i cached 2 web pages in different folders to make PWA, (they are linked pages) but when i worked offline it loaded the 1st page only. The coded pages, manifest and service worker are below:
Page A => this is the main app page:
<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>
Page B => this is a sub page in different folder but not the only one:
<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>
Manifest File => located with Page A folder:
{
"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
}
what dose scope means and what should i add in it?
Service Worker File => located with manifest 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);
}
}
