让商城离线也能用Angular-ShoppingCart 的 PWA Service Worker 与资产缓存策略全解析【免费下载链接】Angular-ShoppingCartShoppingCart (Ecommerce) Application using Angular10, Firebase, PWA, DragDrop, Materialized Bootstrap and i18n ‍项目地址: https://gitcode.com/gh_mirrors/an/Angular-ShoppingCartAngular-ShoppingCart 是一个基于 Angular 10 构建的电商购物商城它不仅支持购物车、商品管理与拖拽看板还通过 PWA 的 Service Worker 实现了离线可用能力。本文将带你完整看懂它的 Service Worker 注册方式与资产缓存策略教你用几行配置让自己的 Web 应用断网也能开。为什么电商商城需要 PWA 离线能力在传统 Web 应用里一旦断网页面立刻变成一片空白。但对于商城场景——用户可能在地铁、电梯、弱网环境里浏览商品——打开即失败的体验是致命的。PWAProgressive Web App渐进式 Web 应用的思路是把关键文件预先存到浏览器本地断网时由 Service Worker 拦截请求、直接返回缓存。这样用户再次打开应用时秒开、可用、无需加载动画。Angular-ShoppingCart 的移动端商品横幅里甚至打出了 VoLTE and WiFi calling 的标语而 PWA 正是 Web 世界里那句 The Pixel is ready——让应用在任何网络状态下都保持可用。三步启用 Service Worker从依赖到注册第一步引入angular/service-worker依赖项目的 package.json 中声明了angular/service-worker^10.0.2这是 Angular 官方对 Service Worker 的封装层它会自动处理注册、版本检测与更新提示等繁琐逻辑。第二步生产构建时开启 Service Worker在 angular.json 的production构建配置中有两个关键开关serviceWorker: true—— 构建时自动生成ngsw-worker.jsngswConfigPath: ngsw-config.json—— 指定缓存策略配置文件也就是说只有执行ng build --prod生产构建时 Service Worker 才会生效开发模式ng serve下它保持关闭避免干扰调试。第三步在根模块中注册打开 src/app/app.module.ts可以看到核心注册代码ServiceWorkerModule.register(./ngsw-worker.js, { enabled: environment.production, registrationStrategy: registerImmediately, })两个参数值得注意参数作用enabled: environment.production二次保险仅在正式环境启用源码位于 src/environments/environment.tsregistrationStrategy: registerImmediately页面加载后立即注册 Service Worker而非等待空闲确保首次访问就建立缓存缓存策略核心ngsw-config.json 的两个资产组整个离线能力的大脑是根目录的 ngsw-config.json。项目把资源拆成了两个缓存组这正是理解 Service Worker 缓存策略的最佳范例。组一app组 —— 预取应用外壳{ name: app, installMode: prefetch, resources: { files: [/favicon.ico, /index.html, /manifest.webmanifest, /*.css, /*.js] } }installMode: prefetch意味着用户第一次访问应用Service Worker 安装时这些文件就全部被预取并缓存。它们构成了所谓的应用外壳App Shell——入口 HTML、所有 JS 与 CSS、favicon 和应用清单。这保证了断网时用户仍能进入应用主界面商城的布局、样式、导航栏照常渲染。组二assets组 —— 按需缓存静态资源{ name: assets, installMode: lazy, updateMode: prefetch, resources: { files: [/assets/**, /*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)] } }这个组的策略更有讲究installMode: lazy—— 安装时不主动下载用户真正请求到某个商品图、字体文件时才缓存。商城的商品图片体积大先访问后缓存避免了浪费用户流量和安装时长。updateMode: prefetch—— 一旦某资源被缓存过应用发现新版本后会预取更新保证下次访问拿到最新资源。简单记外壳预取保离线素材懒加载省流量更新预取保新鲜。可安装性manifest.webmanifest 补齐 PWA 最后一块拼图ngsw-config.json 只解决离线而像原生应用一样可安装要靠 src/manifest.webmanifest。该文件定义了应用名称、主题色#1976d2与standalone独立显示模式并提供了一整套 72px 到 512px 的 maskable 图标位于 src/assets/icons/。在 src/index.html 中通过link relmanifest引入清单文件后用户就能把 Angular-ShoppingCart 直接安装到手机主屏幕——断网时点一下图标缓存的应用外壳立刻呈现这是 PWA 体验的完整闭环。一个诚实的边界Firebase 实时数据不会被缓存需要向新手说明Service Worker 的资产缓存 ≠ 数据缓存。本项目的商品数据、用户信息存储在 Firebase Realtime Database其数据结构大致如下一条商品记录包含名称、价格、库存、评分等字段这些数据通过 Firebase SDK 动态请求如 src/app/shared/services/product.service.ts走的是实时同步通道不在ngsw-config.json的静态资源匹配范围内。因此离线时✅ 应用外壳、页面布局、已缓存的静态图片可正常展示⚠️ 商品列表、购物车增删、登录鉴权等依赖实时网络的操作会失败这是 PWA 架构的典型边界静态层靠 Service Worker动态数据层需要 IndexedDB 等额外机制。理解这一点才能正确评估一个 PWA 的离线能力等级。如何验证你的项目已具备离线能力执行生产构建ng build --prod确认dist/目录中生成ngsw-worker.js与ngsw.json部署后打开浏览器开发者工具在Application → Service Workers中确认ngsw-worker.js已注册在Network面板勾选Offline刷新页面——应看到index.html、JS、CSS 均命中缓存在 DevTools 的Application → Cache Storage中可以看到ngsw前缀的缓存条目整个验证过程无需修改任何业务代码这正是 Angular 官方封装带来的便利。总结Angular-ShoppingCart 用极小的配置成本演示了一套教科书式的 PWA 资产缓存方案配置位置职责angular.json生产构建开启 Service Worker、指定缓存配置路径src/app/app.module.ts立即注册ngsw-worker.js仅限生产环境生效ngsw-config.jsonapp组预取应用外壳、assets组懒加载静态资源src/manifest.webmanifest提供安装清单与多尺寸图标如果你正在学习 Angular这个项目把路由、守卫、拖拽、i18n 与 Service Worker 揉在同一个实战场景里是理解现代 Angular 应用如何落地 PWA的优质范本。把上面这套缓存分组思路迁移到自己的项目中你的 Web 应用也能获得断网不断体验的离线能力 【免费下载链接】Angular-ShoppingCartShoppingCart (Ecommerce) Application using Angular10, Firebase, PWA, DragDrop, Materialized Bootstrap and i18n ‍项目地址: https://gitcode.com/gh_mirrors/an/Angular-ShoppingCart创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考