在项目中加入以下代码,以便在Angular中正确初始化和引导PWA。
在src/app/app.module.ts中:
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
@NgModule({
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
],
确保已在angular.json文件中为SW(Service Worker)生成了必要的assetGroups:
"configurations": {
"production": {
"buildOptimizer": true,
"sourceMap": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"commonChunk": false,
"assets": [
"src/assets",
"src/favicon.ico",
{
"glob": "**/*",
"input": "dist/",
"output": "/"
},
{
"glob": "ngsw-worker.js",
"input": "node_modules/@angular/service-worker/",
"output": "/"
},
{
"glob": "manifest.webmanifest",
"input": "src/",
"output": "/"
}
],
确保PWA安装包“ngsw-manifest.json”,已保存在“/src”目录下:
{
"name": "my-app",
"short_name": "my-app",
"theme_color": "#1976d2",
"background_color": "#fafafa",
"display": "standalone",
"scope": "/",
"start_url": "/",
"icons": [
{
"src": "assets/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "assets/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "assets/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "assets