我缓存了2个网页在不同的文件夹，使PWA，（他们是链接页），但当我工作脱机它加载第一页只。 编码页，舱单和服务人员如下:
第A页=>； 这是主要的app页面:
<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>
清单文件=>； 位于Page 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
}
剂量范围是什么意思，我应该在里面加上什么？
服务工作者文件=>； 与清单文件一起定位
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);
}
}
您的作用域需要包括这两个文件夹。 查看这篇文章
scope属性可以是一个相对路径（。。/），也可以是任何更高级别的路径（/），这样可以增加web应用程序中导航的覆盖范围。
希望这有用！
