我开发了一个前端使用angular 11，后端使用Spring Boot的应用程序，现在我需要将其配置为PWA(Progressive Web app(，所以我对angular官方页面和论坛进行了研究，所以我发现使用简单的命令ng-add@angular/PWA，这个程序所需的所有文件都会自动安装，服务人员也会自动安装。
然而，我已经配置了论坛和angular官方网站上提到的所有内容，但浏览器一直收到相同的错误：
"；未检测到匹配的服务工作者。您可能需要重新加载页面，或者检查当前页面的服务工作者的作用域是否包含作用域并从manifest启动URL">
我的文件如下：
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",
"/manifest.webmanifest",
"/*.css",
"/*.js"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**",
"/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
]
}
}
]
}
manifest.webmanifest
{
"name": "Nos Cuidamos",
"short_name": "Nos Cuidamos",
"theme_color": "#1976d2",
"background_color": "#fafafa",
"display": "standalone",
"scope": "/",
"start_url": "/",
"icons": [
{
"src": "assets/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable any"
}
]
}
应用程序模块
ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production,registrationStrategy: "registerImmediately" })
angular.json
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"nos-cuidamos": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets",
"src/manifest.webmanifest"
],
"styles": [
"src/custom-theme.scss",
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.css",
"node_modules/material-design-icons/iconfont/material-icons.css"
],
"scripts": [],
"serviceWorker": true,
"ngswConfigPath": "ngsw-config.json"
},
package.json
"@angular/service-worker": "~9.1.6",
你能谈谈你的想法吗？为了让它发挥作用，我能错过什么。
提前感谢
我在下面的解决方案步骤中遇到了和您一样的问题，希望对您有所帮助：
-
我已经使用(add命令(安装了pwa，尽管我在package.json文件中找不到pwa，所以我必须使用
npm install @angular/pwa手动安装它。 -
之后安装了pwa软件包，但在我的情况下serviceWorker没有注册，所以做了以下事情：
-
在内的index.html中添加代码
if ("serviceWorker" in navigator) { navigator.serviceWorker .register("sw.js") .then(function (registration) { console.log("success load"); }) .catch(function (err) { console.log(err); }); } -
在"src"；带有以下代码的文件夹：
self.addEventListener("fetch", function (event) {});
在我的案例中，我试图以开发模式构建应用程序，但我没有注意到这一行：
ServiceWorkerModule.register('ngsw-worker.js', {
enabled: environment.production, // <----- this line here
registrationStrategy: 'registerWhenStable:30000'
}),
当应用程序处于开发模式时，这基本上禁用了服务工作者的注册。这是一个愚蠢的错误，但我认为它可能会帮助别人。