我正在尝试使用 Angular 6 设置 PWA，但无法让服务人员离线提供内容。这几天我尝试了很多配置和东西，但没有成功。
服务工作者似乎已注册并在 Chrome 的审核选项卡中运行灯塔通过了 pwa 测试。
我正在使用 Contentful 为本网站提供文本/资产。Service Worker 正在从 dataGroups 中获取内容，但在 Service Worker 进行获取时它会返回 204 代码。我只能假设这会导致缓存存储为空。
但话又说回来，我预计灯塔测试会失败，因为它不提供离线内容。我认为这是因为只要会话没有更改，页面就可以离线工作。这意味着如果我关闭网络连接，当我从一条路线导航到另一条路线时它会起作用，但如果我重新加载/打开新选项卡/重新打开浏览器，它将失败并出现 504 代码。
我在本地 IIS 下托管 Angular 6 应用程序。
索引.html：
<base href="/servicemanager/">
网络配置：
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Angular Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/servicemanager/index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
ngsw-config.json：
"dataGroups": [
{
"name": "contentful-api",
"urls": [
"https://cdn.contentful.com/**"
],
"cacheConfig": {
"maxSize": 20,
"maxAge": "1h",
"timeout": "5s",
"strategy": "freshness"
}
}
]
其余的像assetGroups 只是默认的。
清单.json：
{
"name": "Service Manager",
"short_name": "ASM",
"theme_color": "#03A753",
"background_color": "#1b2a32",
"display": "standalone",
"scope": "/",
"start_url": "/servicemanager/index.html",
"icons": [
{
"src": "assets/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "assets/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "assets/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "assets/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "assets/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "assets/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "assets/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "assets/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
生成的ngsw.json：
{
"configVersion": 1,
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"updateMode": "prefetch",
"urls": [
"/0.05ca3f943f64d55f5fa7.js",
"/favicon.ico",
"/index.html",
"/main.053796e1e3924671dbee.js",
"/polyfills.5fa68b41d92ab3b795c7.js",
"/runtime.69ef21bf8bcc49e08c9e.js",
"/scripts.64e0c48f62b83802d584.js",
"/styles.e43a5292c1af99ea721e.css"
],
"patterns": []
},
{
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"urls": [
"/assets/icons/icon-128x128.png",
"/assets/icons/icon-144x144.png",
"/assets/icons/icon-152x152.png",
"/assets/icons/icon-192x192.png",
"/assets/icons/icon-384x384.png",
"/assets/icons/icon-512x512.png",
"/assets/icons/icon-72x72.png",
"/assets/icons/icon-96x96.png"
],
"patterns": []
}
],
"dataGroups": [
{
"name": "contentful-api",
"patterns": [
"https:\\/\\/cdn\\.contentful\\.com\\/spaces\\/MY-SPACE-ID\\/environments\\/master\\/entries\\?content_type=[^/]*[^/]*"
],
"strategy": "freshness",
"maxSize": 20,
"maxAge": 3600000,
"timeoutMs": 5000,
"version": 1
}
],
"hashTable": {
"/0.05ca3f943f64d55f5fa7.js": "dd54298a2e628e75609193708728c5712ced700c",
"/assets/icons/icon-128x128.png": "dae3b6ed49bdaf4327b92531d4b5b4a5d30c7532",
"/assets/icons/icon-144x144.png": "b0bd89982e08f9bd2b642928f5391915b74799a7",
"/assets/icons/icon-152x152.png": "7479a9477815dfd9668d60f8b3b2fba709b91310",
"/assets/icons/icon-192x192.png": "1abd80d431a237a853ce38147d8c63752f10933b",
"/assets/icons/icon-384x384.png": "329749cd6393768d3131ed6304c136b1ca05f2fd",
"/assets/icons/icon-512x512.png": "559d9c4318b45a1f2b10596bbb4c960fe521dbcc",
"/assets/icons/icon-72x72.png": "c457e56089a36952cd67156f9996bc4ce54a5ed9",
"/assets/icons/icon-96x96.png": "3914125a4b445bf111c5627875fc190f560daa41",
"/favicon.ico": "64a8e578c637632445eb27146bdace22a0a67d3f",
"/index.html": "25109496c7fb90a5405bfcfc6e9dd6cf58ec3944",
"/main.053796e1e3924671dbee.js": "5c36b96118d14a3359f5ee1fa0e6364039800813",
"/polyfills.5fa68b41d92ab3b795c7.js": "8bec897f2edb48724e3ee0be629023a4341f11fe",
"/runtime.69ef21bf8bcc49e08c9e.js": "f8968c9729551f87114304197d9024d845442965",
"/scripts.64e0c48f62b83802d584.js": "a5da6a77894682a4392ff3cf708be911dd595c12",
"/styles.e43a5292c1af99ea721e.css": "d7f76e3762b515c48a214df68fea7775d5095085"
},
"navigationUrls": [
{
"positive": true,
"regex": "^\\/.*$"
},
{
"positive": false,
"regex": "^\\/(?:.+\\/)?[^/]*\\.[^/]*$"
},
{
"positive": false,
"regex": "^\\/(?:.+\\/)?[^/]*__[^/]*$"
},
{
"positive": false,
"regex": "^\\/(?:.+\\/)?[^/]*__[^/]*\\/.*$"
}
]
}
在我的 app.component.ts 构造函数中，我使用的是 SwUpdate：
updates.available.subscribe(() => {
updates.activateUpdate().then(() => {
document.location.reload()
})
})
我没有主意了。我希望能够在刷新或打开新标签/浏览器时重新加载页面。
如果任何拥有更多服务人员知识的人对我能做什么有一些想法，我将不胜感激。
谢谢！