progressive-web-apps
Progressive Web Apps with service workers, manifest, and offline capabilities
Informations de source
- Dépôt
- ffsshhttiikk/opencode-agents-skills
- Dernière activité de la source
- 28 février 2026 à 22:53
- Langue détectée de SKILL.md
- anglais
- Étoiles
- 3
- Forks
- 2
Options d'installation
Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.
Vérifiez les fichiers source
Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.
Affichage de SKILL.md
SKILL.md
Instructions source · Aperçu en lecture seule- name
- progressive-web-apps
- description
- Progressive Web Apps with service workers, manifest, and offline capabilities
- license
- MIT
- compatibility
- opencode
- metadata
- {"audience":"developers","category":"web-development"}
## What I do
- Create PWAs with manifest.json
- Implement service workers for offline support
- Handle push notifications
- Use cache strategies
- Add to home screen capabilities
- Implement background sync
## When to use me
When building installable web apps with offline capabilities.
## Manifest
```json
{
"name": "My PWA",
"short_name": "MyApp",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#007bff",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}
```
## Service Worker
```javascript
// sw.js
self.addEventListener('install', event => {
event.waitUntil(
caches.open('v1').then(cache => {
return cache.addAll(['/', '/index.html', '/styles.css']);
})
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request);
})
);
});
```
## Cache Strategies
```javascript
// Cache first
async function cacheFirst(request) {
const cached = await caches.match(request);
return cached || fetch(request);
}
// Network first
async function networkFirst(request) {
try {
return await fetch(request);
} catch {
return caches.match(request);
}
}
// Stale-while-revalidate
async function staleWhileRevalidate(request) {
const cached = await caches.match(request);
const fetchPromise = fetch(request).then(response => {
caches.open('v1').then(cache => cache.put(request, response));
return response;
});
return cached || fetchPromise;
}
```
Voir sur GitHub