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에서 보기