Я пытаюсь настроить PWA с Angular 6, и у меня возникают проблемы с тем, чтобы работник службы обслуживал контент в автономном режиме. Я уже пару дней перепробовал множество конфигураций и прочего, но безуспешно.
Служебный работник, похоже, зарегистрирован и запускает маяк на вкладке "Аудит" в Chrome и проходит тест pwa.
Я использую Contentful для обслуживания текстов / ресурсов для этого сайта. Сервисный работник выбирает контент из dataGroups, но он возвращает код 204, когда сервисный работник делает выборку.
Я могу только предположить, что это приводит к тому, что кэш-память пуста.
Но опять же, я ожидаю, что тест маяка провалится, поскольку он не обслуживает контент в автономном режиме. Я думаю, что это происходит потому, что страница работает в автономном режиме, пока сессия не изменилась. Это означает, что если я отключу сетевое соединение, оно будет работать при переходе от маршрута к другому маршруту, но не получится с кодом 504, если я перезагрузлю / открою новую вкладку / заново открою браузер.
Я размещаю приложение Angular 6 под локальным IIS.
index.html:
<base href="/servicemanager/">
web.config:
<?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, просто по умолчанию.
manifest.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()
})
})
У меня кончились идеи. Я хотел бы получить возможность перезагрузить страницу при обновлении или при открытии новой вкладки / браузера.
Если у кого-то с большими знаниями в сфере услуг есть идеи о том, что я могу сделать, я был бы очень признателен.
Спасибо!