Progressive Web App

作者 secondsky88378361314fMIT227 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫10 天前更新

Progressive Web Apps with service workers, web manifest, offline support, installation prompts. Use for installable web apps, offline functionality, push notifications, or encountering service worker registration, cache strategy, manifest configuration errors.

僅含說明Software Development

AI 產生的概覽

建置漸進式網頁應用程式的參考指南，涵蓋資訊清單、Service Worker、離線快取、安裝提示與推播通知。

功能: 此技能提供建置可安裝、支援離線的漸進式網頁應用程式所需的參考資料與程式碼片段。內容涵蓋網頁應用程式資訊清單設定、Service Worker 註冊與快取策略、beforeinstallprompt 安裝流程、推播通知訂閱，以及 PWA 就緒檢查清單。它產出的是指引說明與範例程式碼，本身不會執行任何工具。
適用情境: 在為網頁應用程式加入可安裝性、離線支援或推播通知時使用，或在排查 Service Worker 註冊、快取策略或資訊清單設定問題時使用。
執行需求: 不需要指令碼或套件，此技能僅為說明與程式碼範例。套用這些範例需要一個透過 HTTPS 提供服務的網頁專案；推播通知另需 VAPID 金鑰組與伺服器端端點。

Progressive Web App (PWA)

Build web applications that work like native apps with offline support and installability.

Web App Manifest

json

{  "name": "My Application",  "short_name": "MyApp",  "start_url": "/",  "display": "standalone",  "background_color": "#ffffff",  "theme_color": "#000000",  "icons": [    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }  ]}

{  "name": "My Application",  "short_name": "MyApp",  "start_url": "/",  "display": "standalone",  "background_color": "#ffffff",  "theme_color": "#000000",  "icons": [    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }  ]}

Service Worker

javascript

const CACHE_NAME = 'app-v1';const STATIC_ASSETS = ['/', '/index.html', '/styles.css', '/app.js'];
// Installself.addEventListener('install', event => {  event.waitUntil(    caches.open(CACHE_NAME).then(cache => cache.addAll(STATIC_ASSETS))  );});
// Fetch with cache-first strategyself.addEventListener('fetch', event => {  event.respondWith(    caches.match(event.request).then(cached => {      if (cached) return cached;
      return fetch(event.request).then(response => {        if (response.status === 200) {          const clone = response.clone();          caches.open(CACHE_NAME).then(cache => cache.put(event.request, clone));        }        return response;      });    })  );});

const CACHE_NAME = 'app-v1';const STATIC_ASSETS = ['/', '/index.html', '/styles.css', '/app.js'];
// Installself.addEventListener('install', event => {  event.waitUntil(    caches.open(CACHE_NAME).then(cache => cache.addAll(STATIC_ASSETS))  );});
// Fetch with cache-first strategyself.addEventListener('fetch', event => {  event.respondWith(    caches.match(event.request).then(cached => {      if (cached) return cached;
      return fetch(event.request).then(response => {        if (response.status === 200) {          const clone = response.clone();          caches.open(CACHE_NAME).then(cache => cache.put(event.request, clone));        }        return response;      });    })  );});

Install Prompt

javascript

let deferredPrompt;
window.addEventListener('beforeinstallprompt', e => {  e.preventDefault();  deferredPrompt = e;  showInstallButton();});
async function installApp() {  if (!deferredPrompt) return;  deferredPrompt.prompt();  const { outcome } = await deferredPrompt.userChoice;  console.log('Install outcome:', outcome);  deferredPrompt = null;}

let deferredPrompt;
window.addEventListener('beforeinstallprompt', e => {  e.preventDefault();  deferredPrompt = e;  showInstallButton();});
async function installApp() {  if (!deferredPrompt) return;  deferredPrompt.prompt();  const { outcome } = await deferredPrompt.userChoice;  console.log('Install outcome:', outcome);  deferredPrompt = null;}

Push Notifications

javascript

async function subscribeToPush() {  const registration = await navigator.serviceWorker.ready;  const subscription = await registration.pushManager.subscribe({    userVisibleOnly: true,    applicationServerKey: VAPID_PUBLIC_KEY  });  await sendSubscriptionToServer(subscription);}

async function subscribeToPush() {  const registration = await navigator.serviceWorker.ready;  const subscription = await registration.pushManager.subscribe({    userVisibleOnly: true,    applicationServerKey: VAPID_PUBLIC_KEY  });  await sendSubscriptionToServer(subscription);}

PWA Checklist

來源與署名

來源：secondsky/claude-skills位於plugins/progressive-web-app/skills/progressive-web-app提交8837836

授權條款： MIT

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

Progressive Web App

Progressive Web App (PWA)

Web App Manifest

Service Worker

Install Prompt

Push Notifications

PWA Checklist

來源與署名

更多來自 secondsky/claude-skills 的技能

Vulnerability Scanning

Web Performance Optimization

Web Performance Audit

Threejs

Tailwind V4 Shadcn

Technical Specification

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices