mcpField
P
progressive-web-app

progressive-web-app

github.com/secondsky开发240512 次安装5 周前更新
代码仓库

关于 progressive-web-app

帮助开发者构建具备离线支持和可安装能力的渐进式 Web 应用（PWA）的技能，提供清单、Service Worker、安装提示和推送通知示例。

主要功能

  1. 01Web App Manifest 配置示例
  2. 02Service Worker 缓存静态资源
  3. 03安装提示处理
  4. 04推送通知订阅示例
  5. 05PWA 发布检查清单

适用场景

  1. 01为 Web 应用添加离线资源缓存
  2. 02配置应用安装流程
  3. 03实现推送通知订阅
  4. 04检查 PWA 发布所需配置

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/secondsky/claude-skills --skill progressive-web-app

安装后在 Claude Code 中输入/progressive-web-app确认已加载。

详细介绍

渐进式 Web 应用（PWA）

构建像原生应用一样运行、支持离线使用且可安装的 Web 应用。

Web 应用清单

{
  "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

const CACHE_NAME = 'app-v1';
const STATIC_ASSETS = ['/', '/index.html', '/styles.css', '/app.js'];

// Install
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => cache.addAll(STATIC_ASSETS))
  );
});

// Fetch with cache-first strategy
self.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;
      });
    })
  );
});

安装提示

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;
}

推送通知

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 检查清单

  • 已启用 HTTPS
  • 已配置 Web 应用清单
  • 已注册 Service Worker
  • 离线备用页面
  • 响应式设计
  • 快速加载（3G 网络下 <3s）
  • 可安装

评论

支持 Markdown