尧图网页设计 
把angular-contacts-app-example变成PWAService Worker离线缓存与可安装应用完全指南【免费下载链接】angular-contacts-app-exampleFull Stack Angular PWA example app with NgRx NestJS项目地址: https://gitcode.com/gh_mirrors/an/angular-contacts-app-exampleangular-contacts-app-example 是一个基于 Angular NgRx NestJS 的全栈通讯录示例应用本指南带你把它变成一个可离线使用、可安装到桌面和手机桌面的 PWA渐进式 Web 应用核心是 Service Worker 离线缓存策略与 Web App Manifest 配置新手跟着做即可上手 一、这个项目的 PWA 能力藏在哪里好消息是本项目已经内置了 PWA 所需的全部配置你只需要理解三个关键文件就能掌握它的离线缓存与安装能力文件作用src/ngsw-config.jsonService Worker 缓存策略缓存哪些资源、如何过期src/manifest.json应用清单名称、主题色、启动页、图标决定能否安装src/main.ts在应用启动后注册 Service Worker注册逻辑非常克制——只在生产环境才启用 Service Worker见 src/main.ts避免开发时缓存干扰热更新这是很多新手容易踩的坑 二、一键启动项目前置准备先 clone 仓库并安装依赖git clone https://gitcode.com/gh_mirrors/an/angular-contacts-app-example cd angular-contacts-app-example npm install本地开发用npm start启动前端后端 NestJS API 可用 docker-compose.yml 一键拉起访问 http://localhost:4200 即可看到通讯录界面。⚠️ 注意开发模式下 Service Worker 是关闭的。angular.json 中dev和local配置均设置了serviceWorker: false只有生产构建才开启。三、最快启用 Service Worker 的步骤只需一条命令构建生产包npm run build:prod背后发生的事配置位于 angular.json 的production配置serviceWorker: true—— 让构建器自动生成ngsw-worker.js并把它注入 index.htmlngswConfigPath: src/ngsw-config.json—— 指定缓存策略文件fileReplacements—— 把环境变量替换为 src/environments/environment.prod.ts指向正式 API 地址https://contacts-api.vatsaev.com。之后用任意静态服务器如 nginx托管dist/angular-contacts目录打开页面第二次访问缓存即已生效。四、读懂 ngsw-config.json 的三类缓存打开 src/ngsw-config.json你会看到两类缓存组这是整个离线能力的核心4.1 静态资源缓存app 组预取模式缓存/index.html、所有/*.css、/*.js、favicon.icoinstallMode: prefetch应用安装时就全部下载这是二次打开秒加载的关键4.2 静态资源缓存assets 组懒加载缓存/assets/**及图片、字体文件installMode: lazy首次访问时才缓存不占用安装时间updateMode: prefetch更新时提前预取新版本4.3 接口数据缓存api 组新鲜度策略针对https://contacts-api.vatsaev.com/**的 API 请求strategy: freshness—— 优先返回缓存后台悄悄检查更新弱网下体验极佳maxSize: 100—— 最多缓存 100 个接口响应maxAge: 3d—— 缓存数据 3 天内视为新鲜timeout: 5s—— 离线时 5 秒内降级到缓存返回简单记忆界面文件装好就缓存图片用到再缓存接口数据过期了才更新五、让应用可安装Manifest 配置清单能否安装到桌面取决于 src/manifest.json 是否完整。本项目已配置好以下关键项name / short_name应用名称angular-contactstheme_color: #1976d2 / background_color: #fafafa安装后启动时的主题色与背景色和 src/index.html 中的meta nametheme-color保持一致display: standalone以独立窗口运行无浏览器地址栏这是应用感的来源start_url: /与scope: /启动页与权限范围此外 src/index.html 通过link relmanifest hrefmanifest.json关联了清单文件。图标文件放在src/assets/icons/下提供 72px 到 512px 共 8 种尺寸覆盖手机桌面、平板到 Windows 磁贴的全场景——192px 和 512px 两张是浏览器判定可安装的硬性要求。六、如何验证离线缓存与安装成功验证离线能力用 Chrome 打开生产版应用打开 DevToolsF12Network 面板勾选Offline刷新页面通讯录页面应正常打开联系人列表在缓存有效期内依然可见验证可安装地址栏右侧会出现安装图标Chrome 桌面或添加到主屏幕手机安装后应用以独立窗口启动标题与图标来自 manifest 配置也可以直接用 Lighthouse 跑一次审计PWA 得分与离线检查项一目了然。七、新手常见问题 FAQQ1为什么我ng serve后测试离线无效开发模式默认关闭 Service Workerangular.json 中serviceWorker: false必须npm run build:prod后托管 dist 目录测试。Q2为什么接口数据离线时偶尔加载不到api 组缓存上限 100 条、有效期 3 天。只有曾经在线访问过的接口才会命中缓存从没请求过的数据离线时无法凭空出现。Q3想改缓存策略比如接口缓存 7 天只需修改 src/ngsw-config.json 中maxAge为7d后重新构建无需改动任何业务代码。Q4如何自定义应用图标和名称替换src/assets/icons/下的图片并修改 src/manifest.json 中的name、short_name与theme_color即可。八、总结通过这个指南你已经掌握了 angular-contacts-app-example 的全部 PWA 机制✅ 用 angular.json 的serviceWorker: true一键启用 Service Worker✅ 用 src/ngsw-config.json 配置预取 懒加载 新鲜度三层缓存✅ 用 src/manifest.json 让应用可安装、可离线启动这套配置模式非常通用——任何 Angular 项目照搬这三个文件就能获得同款离线体验。动手试试吧 【免费下载链接】angular-contacts-app-exampleFull Stack Angular PWA example app with NgRx NestJS项目地址: https://gitcode.com/gh_mirrors/an/angular-contacts-app-example创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 把angular-contacts-app-example变成PWA：Service Worker离线缓存与可安装应用完全指南
把angular-contacts-app-example变成PWAService Worker离线缓存与可安装应用完全指南【免费下载链接】angular-contacts-app-exampleFull Stack Angular PWA example app with NgRx NestJS项目地址: https://gitcode.com/gh_mirrors/an/angular-contacts-app-exampleangular-contacts-app-example 是一个基于 Angular NgRx NestJS 的全栈通讯录示例应用本指南带你把它变成一个可离线使用、可安装到桌面和手机桌面的 PWA渐进式 Web 应用核心是 Service Worker 离线缓存策略与 Web App Manifest 配置新手跟着做即可上手 一、这个项目的 PWA 能力藏在哪里好消息是本项目已经内置了 PWA 所需的全部配置你只需要理解三个关键文件就能掌握它的离线缓存与安装能力文件作用src/ngsw-config.jsonService Worker 缓存策略缓存哪些资源、如何过期src/manifest.json应用清单名称、主题色、启动页、图标决定能否安装src/main.ts在应用启动后注册 Service Worker注册逻辑非常克制——只在生产环境才启用 Service Worker见 src/main.ts避免开发时缓存干扰热更新这是很多新手容易踩的坑 二、一键启动项目前置准备先 clone 仓库并安装依赖git clone https://gitcode.com/gh_mirrors/an/angular-contacts-app-example cd angular-contacts-app-example npm install本地开发用npm start启动前端后端 NestJS API 可用 docker-compose.yml 一键拉起访问 http://localhost:4200 即可看到通讯录界面。⚠️ 注意开发模式下 Service Worker 是关闭的。angular.json 中dev和local配置均设置了serviceWorker: false只有生产构建才开启。三、最快启用 Service Worker 的步骤只需一条命令构建生产包npm run build:prod背后发生的事配置位于 angular.json 的production配置serviceWorker: true—— 让构建器自动生成ngsw-worker.js并把它注入 index.htmlngswConfigPath: src/ngsw-config.json—— 指定缓存策略文件fileReplacements—— 把环境变量替换为 src/environments/environment.prod.ts指向正式 API 地址https://contacts-api.vatsaev.com。之后用任意静态服务器如 nginx托管dist/angular-contacts目录打开页面第二次访问缓存即已生效。四、读懂 ngsw-config.json 的三类缓存打开 src/ngsw-config.json你会看到两类缓存组这是整个离线能力的核心4.1 静态资源缓存app 组预取模式缓存/index.html、所有/*.css、/*.js、favicon.icoinstallMode: prefetch应用安装时就全部下载这是二次打开秒加载的关键4.2 静态资源缓存assets 组懒加载缓存/assets/**及图片、字体文件installMode: lazy首次访问时才缓存不占用安装时间updateMode: prefetch更新时提前预取新版本4.3 接口数据缓存api 组新鲜度策略针对https://contacts-api.vatsaev.com/**的 API 请求strategy: freshness—— 优先返回缓存后台悄悄检查更新弱网下体验极佳maxSize: 100—— 最多缓存 100 个接口响应maxAge: 3d—— 缓存数据 3 天内视为新鲜timeout: 5s—— 离线时 5 秒内降级到缓存返回简单记忆界面文件装好就缓存图片用到再缓存接口数据过期了才更新五、让应用可安装Manifest 配置清单能否安装到桌面取决于 src/manifest.json 是否完整。本项目已配置好以下关键项name / short_name应用名称angular-contactstheme_color: #1976d2 / background_color: #fafafa安装后启动时的主题色与背景色和 src/index.html 中的meta nametheme-color保持一致display: standalone以独立窗口运行无浏览器地址栏这是应用感的来源start_url: /与scope: /启动页与权限范围此外 src/index.html 通过link relmanifest hrefmanifest.json关联了清单文件。图标文件放在src/assets/icons/下提供 72px 到 512px 共 8 种尺寸覆盖手机桌面、平板到 Windows 磁贴的全场景——192px 和 512px 两张是浏览器判定可安装的硬性要求。六、如何验证离线缓存与安装成功验证离线能力用 Chrome 打开生产版应用打开 DevToolsF12Network 面板勾选Offline刷新页面通讯录页面应正常打开联系人列表在缓存有效期内依然可见验证可安装地址栏右侧会出现安装图标Chrome 桌面或添加到主屏幕手机安装后应用以独立窗口启动标题与图标来自 manifest 配置也可以直接用 Lighthouse 跑一次审计PWA 得分与离线检查项一目了然。七、新手常见问题 FAQQ1为什么我ng serve后测试离线无效开发模式默认关闭 Service Workerangular.json 中serviceWorker: false必须npm run build:prod后托管 dist 目录测试。Q2为什么接口数据离线时偶尔加载不到api 组缓存上限 100 条、有效期 3 天。只有曾经在线访问过的接口才会命中缓存从没请求过的数据离线时无法凭空出现。Q3想改缓存策略比如接口缓存 7 天只需修改 src/ngsw-config.json 中maxAge为7d后重新构建无需改动任何业务代码。Q4如何自定义应用图标和名称替换src/assets/icons/下的图片并修改 src/manifest.json 中的name、short_name与theme_color即可。八、总结通过这个指南你已经掌握了 angular-contacts-app-example 的全部 PWA 机制✅ 用 angular.json 的serviceWorker: true一键启用 Service Worker✅ 用 src/ngsw-config.json 配置预取 懒加载 新鲜度三层缓存✅ 用 src/manifest.json 让应用可安装、可离线启动这套配置模式非常通用——任何 Angular 项目照搬这三个文件就能获得同款离线体验。动手试试吧 【免费下载链接】angular-contacts-app-exampleFull Stack Angular PWA example app with NgRx NestJS项目地址: https://gitcode.com/gh_mirrors/an/angular-contacts-app-example创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考