progressive-web-apps
Progressive Web Apps with service workers, manifest, and offline capabilities
ソース情報
- リポジトリ
- ffsshhttiikk/opencode-agents-skills
- ソースの最終更新活動
- 2026年2月28日 22:53
- 検出された SKILL.md の言語
- 英語
- スター
- 3
- フォーク
- 2
インストール方法
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
ソースファイルを確認
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
SKILL.md を表示中
SKILL.md
ソースの指示 · 読み取り専用プレビュー- 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;
}
```
GitHubで見る