前言 这里假设我们已经使用Angular开发了SPA应用, 我们希望在此基础上使用PWA做一些增强以获得更好的用户体验, 更好的性能.
什么是Service worker 安装 pwa 进入Angular项目根目录, 执行以下命令安装@angular/pwa.
1 ng add @angular/pwa@13.3.1
这里最好指定@angular/pwa的版本与当前使用的angular一致, 否则会有兼容性问题.
该命令完成以下操作
添加@angular/service-worker到工程 在CLI中启用service worker构建支持 在application模块中导入并注册service worker 更新index.html文件: 添加图标文件 创建名为ngsw-config.json的service worker配置文件，该文件指定缓存行为和其他设置。 添加@angular/service-worker到工程
1 2 3 4 5 6 7 8 @@ -28,10 +28,11 @@ "@angular/material": "13.3.1", "@angular/platform-browser": "13.3.1", "@angular/platform-browser-dynamic": "13.3.1", "@angular/platform-server": "13.3.1", "@angular/router": "13.3.1", + "@angular/service-worker": "13.3.1", "@nguniversal/express-engine": "^13.1.0",
在application模块中导入并注册service worker
src/app/app.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 import { UserService } from "./services/user.service"; import { SharedModule } from "./shared/shared.module"; import { CustomOverlayContainer } from "./utils/custom-overlay-container"; import { WindowService } from "./services/window.service"; import { FlexLayoutModule } from "@angular/flex-layout"; +import { ServiceWorkerModule } from '@angular/service-worker'; +import { environment } from '../environments/environment'; const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = { wheelPropagation: true, suppressScrollX: true, }; @@ -50,11 +52,17 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = { PerfectScrollbarModule, - AppRoutingModule, + AppRoutingModule, + ServiceWorkerModule.register('ngsw-worker.js', { + enabled: environment.production, + // Register the ServiceWorker as soon as the application is stable + // or after 30 seconds (whichever comes first). + registrationStrategy: 'registerWhenStable:30000' + }) ], declarations: [ AppComponent,
创建名为ngsw-config.json的service worker配置文件, 更多配置说明请参考Angular Service Worker Configuration
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 { "$schema" : "./node_modules/@angular/service-worker/config/schema.json" , "index" : "/index.html" , "assetGroups" : [ { "name" : "app" , "installMode" : "prefetch" , "resources" : { "files" : [ "/favicon.ico" , "/index.html" , "/manifest.webmanifest" , "/*.css" , "/*.js" ] } } , { "name" : "assets" , "installMode" : "lazy" , "updateMode" : "prefetch" , "resources" : { "files" : [ "/assets/**" , "/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)" ] } } ] }
更新index.html文件
1 2 3 4 5 6 7 8 <link rel="icon" type="image/x-icon" href="favicon.ico"> + <link rel="manifest" href="manifest.webmanifest"> + <meta name="theme-color" content="#1976d2"> </head> <body> <app-root></app-root> + <noscript>Please enable JavaScript to continue using this application.</noscript> </body>
启动angular PWA 配置完成之后重新构建我们的项目 npm run build
构建完成之后再通过 npm run start 来启动我们的项目，启动成功后打开 http://127.0.0.1:8080 应该能够看到
注意: 如果使用的是angular 14.2以下的版本, 会遇到”Angular 无法注册 ServiceWorker : A bad HTTP response code (404) was received when fetching the script”的问题, 这是因为npm run start实际调用的是ng serve, 而该命令启动应用, 对于生成的ngsw-worker.js文件访问不了,下, 如果开启了ssr进入dist//browser启动项目npx http-server path-to-your-dist-folderng serve
参考文档 Angular PWA 渐进式 Web 应用
Getting started with service workers
How to Use Ng Serve with Service Worker