Progressive Web App

secondsky/claude-skills/plugins/progressive-web-app/skills/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 生成的概览

构建渐进式 Web 应用的参考指南，涵盖清单、Service Worker、离线缓存、安装提示与推送通知。

功能: 该技能提供用于构建可安装、支持离线的渐进式 Web 应用的参考资料与代码片段。内容涵盖 Web 应用清单配置、Service Worker 注册与缓存策略、beforeinstallprompt 安装流程、推送通知订阅，以及 PWA 就绪检查清单。它产出的是指导说明和示例代码，本身不运行任何工具。
适用场景: 在为 Web 应用添加可安装性、离线支持或推送通知时使用，或在排查 Service Worker 注册、缓存策略或清单配置问题时使用。
运行要求: 不需要脚本或软件包，该技能仅为说明与代码示例。应用这些示例需要一个通过 HTTPS 提供服务的 Web 项目；推送通知还需要 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