Я кэшировал 2 веб-страницы в разных папках, чтобы создать PWA (это связанные страницы), но когда я работал в автономном режиме, загружалась только 1-я страница. Кодированные страницы, манифест и служебный работник приведены ниже:
Страница A => это главная страница приложения:
<head>
<link rel="manifest" href="/Folder1/manifest.json">
</head>
<body>
<script>
if('serviceWorker' in navigator){
try{
navigator.serviceWorker.register('sw.js').then(function(reg) {
console.log("SW registered for scope: " + reg.scope);
});
} catch ( error ) {
console.log('SW reg failed');
}
}
</script>
<a href="../Folder2/Page B">Page B</a><br>
</body>
Страница B => это дополнительная страница в другой папке, но не единственный:
<head>
<link rel="manifest" href="../Folder1/manifest.json">
</head>
<body>
<script>
if('serviceWorker' in navigator){
try{
navigator.serviceWorker.register('../Folder1/sw.js');
console.log('SW registered2');
} catch ( error ) {
console.log('SW reg failed2');
}
}
</script>
<h1>Content</h1>
</body>
Файл манифеста => находится в папке страницы A:
{
"name": "Web Outline Work",
"short_name": "WOW",
"theme_color": "#2196f3",
"background_color": "#2196f3",
"display": "standalone",
"scope": "/",
"start_url": ".",
"icons": [
{
"src": "images/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"splash_pages": null
}
что означает диапазон доз и что я должен добавить в него?
Service Worker File => находится в файле манифеста
const cachedData = [
'./',
'../Folder2/Page B'
];
self.addEventListener('install', async event => {
const cache = await caches.open('app-static');
cache.addAll(cachedData);
});
self.addEventListener('fetch', event => {
const req = event.request;
const url = new URL(req.url);
if(url.origin === location.origin){
event.respondWith(cacheFirest(req));
} else {
event.respondWith(networkFirest(req));
}
});
async function cacheFirest(req){
const cacheResp = await caches.match(req);
return cacheResp || fetch(req);
}
async function networkFirest(req){
const cache = await caches.open('app-dynamic');
try{
const res = await fetch(req);
cache.put(req, res.clone());
return res;
} catch ( error ) {
return await cache.match(req);
}
}