mcpField
P
progressive-web-app

progressive-web-app

github.com/aj-geddes开发373524 次安装34 周前更新
代码仓库

关于 progressive-web-app

用于构建渐进式 Web 应用的指南，涵盖离线支持、安装能力、Service Worker 和 Web 应用清单，面向打造类应用浏览器体验的开发者。

主要功能

  1. 01离线支持
  2. 02Web 应用安装
  3. 03Service Worker 实现
  4. 04Web 应用清单
  5. 05推送通知

适用场景

  1. 01构建类应用的 Web 体验
  2. 02支持无网络连接时使用
  3. 03启用移动端安装
  4. 04添加推送通知

安装

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

$npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill progressive-web-app

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

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
install-prompt-and-app-installation.md
offline-support-with-indexeddb.md
push-notifications.md
service-worker-implementation.md
web-app-manifest.md
templates/
component-template.tsx

详细介绍

渐进式 Web 应用

目录

概述

构建渐进式 Web 应用，支持离线使用、安装、Service Worker 和 Web 应用清单，在浏览器中提供类似应用的体验。

适用场景

  • 类似应用的 Web 体验
  • 需要离线功能
  • 需要在移动设备上安装
  • 推送通知
  • 快速加载体验

快速开始

最简可运行示例：

// public/manifest.json
{
  "name": "My Awesome App",
  "short_name": "AwesomeApp",
  "description": "A progressive web application",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "orientation": "portrait-primary",
  "background_color": "#ffffff",
  "theme_color": "#007bff",
  "icons": [
    {
      "src": "/images/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/images/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
// ... (see reference guides for full implementation)

参考指南

references/ 目录中的详细实现：

指南内容
Web 应用清单Web 应用清单
Service Worker 实现Service Worker 实现
安装提示与应用安装安装提示与应用安装
使用 IndexedDB 支持离线使用 IndexedDB 支持离线
推送通知推送通知

最佳实践

✅ 应该做
  • 遵循既定模式和惯例
  • 编写整洁、易于维护的代码
  • 添加适当的文档
  • 部署前进行充分测试
❌ 不应该做
  • 跳过测试或验证
  • 忽略错误处理
  • 将配置值硬编码

评论

支持 Markdown