enhance-pwalisted
Install: claude install-skill kensaurus/cursor-kenji
# enhance-pwa — Make It Installable and Offline-Ready
**A PWA closes the gap between "website" and "app".** Users can install it to
their home screen, it loads instantly from cache, and it keeps working when the
network drops. This skill adds those capabilities to any existing web app without
breaking what already works.
---
## Phase 0: Audit what already exists
```
public/manifest.json or public/manifest.webmanifest → existing manifest
public/sw.js or src/sw.ts → existing service worker
vite.config.* → vite-plugin-pwa already configured?
next.config.* → next-pwa already configured?
package.json → workbox-*, vite-plugin-pwa, next-pwa, @vite-pwa/nuxt
```
Also check the current Lighthouse PWA score via:
```javascript
// browser_evaluate after browser_navigate
const pwaReady = {
manifest: !!document.querySelector('link[rel="manifest"]'),
sw: 'serviceWorker' in navigator,
https: location.protocol === 'https:' || location.hostname === 'localhost',
};
```
---
## Phase 1: Research framework-specific PWA tooling
```json
CallMcpTool(server: "user-firecrawl", toolName: "firecrawl_search", arguments: {
"query": "<framework> PWA service worker offline 2026 vite-plugin-pwa",
"limit": 3,
"sources": [{ "type": "web" }]
})
```
Fetch the official docs for the relevant PWA plugin via Context7:
```json
CallMcpTool(server: "plugin-context7-plugin-context7", toolName: "resolve-library-id", arguments: {
"libraryName": "vite-plugin-pwa"
})