未检测到匹配的服务人员 - Angular 9
Posted
技术标签:
【中文标题】未检测到匹配的服务人员 - Angular 9【英文标题】：No matching service worker detected - Angular 9 【发布时间】：2021-12-16 21:30:11 【问题描述】：这是我第一次与服务人员合作，我遇到了困难，因为我总是在网络 - 应用程序 - 清单选项卡中收到此错误：
一些技术细节：
package.json
"@angular/animations": "~9.1.0",
"@angular/common": "~9.1.0",
"@angular/compiler": "~9.1.0",
"@angular/core": "~9.1.0",
"@angular/forms": "~9.1.0",
"@angular/localize": "~9.1.0",
"@angular/platform-browser": "~9.1.0",
"@angular/platform-browser-dynamic": "~9.1.0",
"@angular/pwa": "^0.901.12",
"@angular/router": "~9.1.0",
"@angular/service-worker": "~9.1.0",
angular.json
"configurations":
"production":
"fileReplacements": [
"replace": "projects/appName/src/environments/environment.ts",
"with": "projects/appName/src/environments/environment.prod.ts"
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
"type": "initial",
"maximumWarning": "5mb",
"maximumError": "5mb"
,
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
],
"serviceWorker": true,
"ngswConfigPath": "projects/appName/src/ngsw-config.json"
manifest.webmanifest
"name": "app name",
"short_name": "app",
"description": "test test",
"theme_color": "#003f8b",
"background_color": "#ffffff",
"display": "standalone",
"orientation": "portrait",
"scope": "/",
"start_url": "/",
"icons": [
"src": "favicon.ico",
"sizes": "16x16",
"type": "image/png",
"purpose": "any"
,
"src": "assets/images/icons/flatwork.svg",
"sizes": "150x150",
"type": "image/png",
"purpose": "any"
,
"src": "assets/images/icons/icon-withdrawal-mark.png",
"sizes": "27x23",
"type": "image/png",
"purpose": "any"
,
"src": "assets/images/icons/incoming.svg",
"sizes": "150x150",
"type": "image/png",
"purpose": "any"
,
"src": "assets/images/icons/input.svg",
"sizes": "150x150",
"type": "image/png",
"purpose": "any"
,
"src": "assets/images/icons/master_data_icon.svg",
"sizes": "150x150",
"type": "image/png",
"purpose": "any"
,
"src": "assets/images/icons/outgoing.svg",
"sizes": "150x150",
"type": "image/png",
"purpose": "any"
,
"src": "assets/images/icons/output.svg",
"sizes": "150x150",
"type": "image/png",
"purpose": "any"
,
"src": "assets/images/icons/rental_outfit.svg",
"sizes": "150x150",
"type": "image/png",
"purpose": "any"
,
"src": "assets/images/icons/repair.svg",
"sizes": "150x150",
"type": "image/png",
"purpose": "any"
,
"src": "assets/images/icons/scanned_on.svg",
"sizes": "150x150",
"type": "image/png",
"purpose": "any"
,
"src": "assets/images/icons/tooltip_icon.svg",
"sizes": "150x150",
"type": "image/png",
"purpose": "any"
]
index.html
<meta name="theme-color" content="#003f8b" />
<link rel="manifest" href="manifest.webmanifest" />
<body>
<bar-root></bar-root>
<noscript
>Please enable javascript to continue using this application.</noscript
>
</body>
app.module
imports: [
BrowserModule,
ServiceWorkerModule.register('../ngsw-worker.js',
enabled: environment.production
),
... // other imports
],
providers: [
provide: SwRegistrationOptions,
useFactory: () => (
enabled: environment.production,
registrationStrategy: 'registerImmediately',
),
,
]
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)"
]
]
另外，这里是检查路径导入的项目结构：
我错过了什么？另外，测试任何配置更改的最佳方法是什么？
【问题讨论】：
【参考方案1】：我找到了关于我的问题的解决方案，需要进行一些小的更改：
app.module - 调整 Service Worker 注册
ServiceWorkerModule.register('ngsw-worker.js',
enabled: environment.production,
// Register the ServiceWorker as soon as the app is stable
// or after 30 seconds (whichever comes first).
registrationStrategy: 'registerWhenStable:30000',
),
在angular.json 中，如果您有针对不同环境的多个构建，比如生产环境和 qa，您可以在两者上添加这些配置：
"serviceWorker": true,
"ngswConfigPath": "projects/appName/ngsw-config.json"
// 或者你有 ngsw-config.json 的任何路径，但是这可能会在安装 @angular/pwa 时自动生成。
要测试您的更改，请运行 ng build 或 ng build --prod 或您想要测试的任何其他环境。
要查看我使用http-server 的 prod 环境的构建，您可以在 npm 中找到并安装它。您的构建将在 dist 文件夹中创建，并在应用程序运行的根文件夹中（9191 是端口，您可以将其更改为您喜欢的任何内容，只要确保没有任何内容在其上运行）：
http-server -p 9191 -c-1 dist/appName
您可以打开 9191 localhost 端口并检查开发人员工具，应用程序选项卡，在清单和服务工作者下，以确保一切都在运行。
我还从我的项目中删除了 ngsw-worker.js，因为在您进行构建时它会自动从 node_modules 中移动。
【讨论】：
以上是关于未检测到匹配的服务人员 - Angular 9的主要内容，如果未能解决你的问题，请参考以下文章