菜单
Diagnoses and fixes routing conflicts between the Frontend PWA Service Worker and Backend/Nginx endpoints in the Divemap project. Also handles Workbox and Manifest loading errors. Use when a URL works via curl but fails in the browser, or when seeing Manifest Syntax Errors.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Guidelines and patterns for implementing high-quality, "mobile-first" responsive user interfaces in the Divemap project using Tailwind CSS. Use this skill when designing or refactoring components and pages to ensure they are visually striking, functional, and touch-optimized on all devices.
Assists with Alembic database migrations in Python projects. Use when generating, applying, or debugging database schema migrations to ensure consistency and prevent conflicts.
Workflow for building, testing, and publishing new Android app versions (PWA/TWA) using Bubblewrap to the Google Play Store. Use this when the user wants to build a new APK/AAB or release an update to Android.
Mandatory standard operating procedure for running tests in the Divemap backend. Explicitly forbids direct pytest commands that cause data loss and explains SQLite incompatibility.
Guidelines and workflows for detecting and fixing Cross-Site Scripting (XSS) vulnerabilities in frontend code. Use this skill when auditing frontend components, reviewing PRs with user-generated content, or investigating reported XSS issues.
Standard procedure for testing authenticated FastAPI endpoints via curl in the CLI. Use this when verifying backend logic without a frontend, or when debugging authentication/permission issues.
| name | debug-pwa-routing |
| description | Diagnoses and fixes routing conflicts between the Frontend PWA Service Worker and Backend/Nginx endpoints in the Divemap project. Also handles Workbox and Manifest loading errors. Use when a URL works via curl but fails in the browser, or when seeing Manifest Syntax Errors. |
This skill provides instructions for handling common routing issues related to the Progressive Web App (PWA) setup, Service Workers (Workbox), and Web Manifests in the Divemap application.
If the browser console shows:
Manifest: Line: 1, column: 1, Syntax error.
The Problem:
This occurs when the Vite PWA plugin is disabled (e.g., in development mode), causing Nginx to fall back to serving the index.html file for the /manifest.webmanifest route. The browser expects a JSON file but receives HTML, leading to a syntax error.
The Fix: Ensure that Nginx explicitly intercepts requests for the manifest when it doesn't exist and returns an empty JSON object with the correct content type.
In nginx/dev.conf:
# Web Manifest - Correct Content-Type and MUST NOT be cached
location = /manifest.webmanifest {
proxy_pass http://frontend/manifest.webmanifest;
proxy_set_header Host $host;
proxy_intercept_errors on;
error_page 404 = /empty-manifest.json;
add_header Cache-Control "no-cache, no-store, must-revalidate";
add_header Content-Type application/manifest+json;
expires off;
}
location = /empty-manifest.json {
return 200 '{}';
add_header Content-Type application/manifest+json;
}
Logs like workbox Using CacheFirst to respond to... or workbox The navigation route is not being used... are informational debug logs produced by the Workbox library when the site is running in development mode.
These logs are harmless and indicate the Service Worker is deciding how to route requests. They do not require a fix.
Always ensure that backend API routes, static assets, and dynamic backend content (like sitemaps or LLM text files) are excluded from the PWA's navigateFallback catch-all in vite.config.js. If the PWA intercepts an API call, it will incorrectly serve the React index.html instead of the JSON data.