mcpField
A
angular-pwa

angular-pwa

github.com/oguzhan18开发7189 次安装31 周前更新
代码仓库

关于 angular-pwa

面向 Angular 项目的渐进式 Web 应用开发指南，涵盖服务工作线程缓存、离线处理、推送订阅、版本更新和清单配置。

主要功能

  1. 01使用 ng add @angular/pwa 添加 PWA
  2. 02配置服务工作线程缓存
  3. 03处理离线状态和推送订阅
  4. 04检查服务工作线程版本更新
  5. 05自定义 Web 应用清单

适用场景

  1. 01为 Angular 应用添加离线支持
  2. 02设置 API 和静态文件的缓存策略
  3. 03引导用户订阅通知
  4. 04在新版本就绪时重新加载应用

安装

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

$npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-pwa

安装后在 Claude Code 中输入/angular-pwa确认已加载。

包含的文件

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

references/discussions/
_INDEX.md
references/docs/
_INDEX.md
references/issues/
_INDEX.md
references/releases/
_INDEX.md

详细介绍

@angular/pwa

版本： Angular 21（2025） 标签： PWA、Service Worker、离线、Web 应用清单

参考： PWA 指南 • ngsw-config

API 变更

本节记录近期特定版本的 API 变更。

  • 新增：Angular Service Worker v2 — 改进缓存策略

  • 新增：esbuild PWA 支持 — 加快构建速度

  • 新增：@angular/build:application — 现代化 PWA 构建

最佳实践

  • 将 PWA 添加到项目中
ng add @angular/pwa
  • 配置 ngsw-config.json
{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(svg|cur|jpg|jpeg|png)"
        ]
      }
    }
  ],
  "dataGroups": [
    {
      "name": "api-freshness",
      "urls": ["/api/**"],
      "cacheConfig": {
        "strategy": "freshness",
        "maxSize": 100,
        "maxAge": "1h",
        "timeout": "10s"
      }
    }
  ]
}
  • API 调用使用网络优先策略
{
  "dataGroups": [
    {
      "name": "api",
      "urls": ["/api/**"],
      "cacheConfig": {
        "strategy": "freshness",
        "maxSize": 50,
        "maxAge": "1h"
      }
    }
  ]
}
  • 静态资源使用缓存优先策略
{
  "assetGroups": [
    {
      "name": "static",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "resources": {
        "files": ["/*.js", "/*.css"]
      }
    }
  ]
}
  • 处理离线状态
import { SwPush } from '@angular/service-worker';

constructor(private swPush: SwPush) {}

subscribeToNotifications() {
  if (this.swPush.isEnabled) {
    this.swPush.requestSubscription({
      serverPublicKey: 'VAPID_PUBLIC_KEY'
    });
  }
}
  • 检查 Service Worker 更新
import { SwUpdate } from '@angular/service-worker';

constructor(private updates: SwUpdate) {
  this.updates.versionUpdates.subscribe(event => {
    if (event.type === 'VERSION_READY') {
      // Reload to get new version
      window.location.reload();
    }
  });
}
  • 自定义清单
{
  "name": "My PWA",
  "short_name": "MyPWA",
  "theme_color": "#1976d2",
  "background_color": "#ffffff",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

评论

支持 Markdown