Generate PWA specification for a web game
Generates a comprehensive PWA specification for browser games with manifest, service worker strategy, and offline capabilities.
/plugin marketplace add sponticelli/gamedev-claude-plugins/plugin install web-games@gamedev-claude-pluginsGenerate a comprehensive Progressive Web App specification for a browser game.
Before generating, understand:
# PWA Specification: [Game Name]
## Overview
**PWA Goal:** [What PWA features enable]
**Offline Support:** [Full/Partial/None]
**Install Priority:** [High/Medium/Low]
## Web App Manifest
```json
{
"name": "[Full Game Name]",
"short_name": "[Short Name - 12 chars max]",
"description": "[Game description]",
"start_url": "/?source=pwa",
"display": "fullscreen",
"orientation": "[landscape/portrait/any]",
"background_color": "#[hex]",
"theme_color": "#[hex]",
"icons": [
{
"src": "/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"screenshots": [
{
"src": "/screenshots/gameplay.png",
"sizes": "1280x720",
"type": "image/png",
"form_factor": "wide"
}
],
"categories": ["games"],
"prefer_related_applications": false
}
| Tier | Assets | Strategy | Max Age |
|---|---|---|---|
| Shell | HTML, core JS/CSS | Cache first | Versioned |
| Game assets | Sprites, audio | Stale-while-revalidate | 7 days |
| API responses | Leaderboards, saves | Network first | 1 hour |
| Dynamic | User content | Network only | N/A |
const PRECACHE = [
'/',
'/index.html',
'/main.js',
'/style.css',
'/manifest.json',
// Core game assets
'/assets/player.png',
'/assets/ui.png',
'/audio/bgm.mp3'
];
// Game assets: stale-while-revalidate
workbox.routing.registerRoute(
/\/assets\//,
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'game-assets',
plugins: [
new workbox.expiration.ExpirationPlugin({
maxEntries: 100,
maxAgeSeconds: 7 * 24 * 60 * 60
})
]
})
);
// API: network first with cache fallback
workbox.routing.registerRoute(
/\/api\//,
new workbox.strategies.NetworkFirst({
cacheName: 'api-cache',
networkTimeoutSeconds: 5
})
);
| Data Type | Offline Behavior | Sync Trigger |
|---|---|---|
| Save games | Queue for sync | On reconnect |
| High scores | Store locally | Background sync |
| Purchases | Not available | N/A |
| Storage Type | Purpose | Estimated Size |
|---|---|---|
| Cache API | Game shell & assets | [X] MB |
| IndexedDB | Save data, sync queue | [X] MB |
| LocalStorage | Settings, preferences | [X] KB |
// Request persistent storage
if (navigator.storage && navigator.storage.persist) {
const isPersisted = await navigator.storage.persist();
// Handle based on result
}
Show when: [After N minutes of play / After completing tutorial / On return visit] Don't show if: [Already installed, previously declined within 7 days]
Check frequency: On each visit Notification: [Silent / Prompt / Force after X days]
When: [After explicit user interest] Fallback: [In-game notification system]
Generate the PWA specification based on the game context provided.