渐进式Web应用(PWA)开发指南：离线支持、安装、推送通知与最佳实践

progressive-web-app by aj-geddes/useful-ai-prompts

174 周安装量

162 GitHub Stars

GitHub

安装命令

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

Web应用 JavaScript 框架性能优化

🇨🇳中文介绍

渐进式 Web 应用

概述

构建具有离线支持、可安装性、Service Worker 和 Web 应用清单的渐进式 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"
    },
    {
// ... (完整实现请参阅参考指南)

参考指南

references/ 目录下的详细实现：

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

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

🇺🇸English

Progressive Web App

Overview
When to Use
Quick Start
Reference Guides
Best Practices

Overview

Build progressive web applications with offline support, installability, service workers, and web app manifests to deliver app-like experiences in the browser.

When to Use

App-like web experiences
Offline functionality needed
Mobile installation required
Push notifications
Fast loading experiences

Quick Start

Minimal working example:

// 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)

Reference Guides

Detailed implementations in the references/ directory:

Guide	Contents
Web App Manifest	Web App Manifest
Service Worker Implementation	Service Worker Implementation
Install Prompt and App Installation	Install Prompt and App Installation
Offline Support with IndexedDB	Offline Support with IndexedDB
Push Notifications	Push Notifications

Best Practices

✅ DO

Follow established patterns and conventions
Write clean, maintainable code
Add appropriate documentation
Test thoroughly before deploying

❌ DON'T

Skip testing or validation
Ignore error handling
Hard-code configuration values

Weekly Installs

116

Repository

aj-geddes/usefu…-prompts

GitHub Stars

116

First Seen

Jan 21, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode98

gemini-cli97

codex93

cursor91

claude-code89

github-copilot80