I started experimenting with progressive web apps but when it concerns offline caching, I am either misunderstanding something, or doing something wrong.
I have 2 HTML pages (index.html and index2.html) which are identical, code below:
<!DOCTYPE html>
<html>
<head>
<title>Test PWA</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="/assets/app_styles.css" />
<link rel="manifest" href="/manifest.json" />
<link rel="shortcut icon" href="/assets/icon1.png" />
</head>
<body>
<header class="header">
<h1>Test web app</h1>
</header>
<nav>
<a href="/index.html">Page 1</a>
<a href="/index2.html">Page 2</a>
</nav>
<script type="text/javascript" src="/assets/app_scripts.js"></script>
</body>
</html>
And then below is the fetch and install event methods, as well as the cache contents, which, from my understanding, should return cached contents if there is no network, correct me if done incorrectly.
var CacheName = 'TestPWA_Cache';
var CacheContents = [
'/',
'/index.html',
'/index2.html',
'/assets/app_scripts.js',
'/assets/app_styles.css',
'/assets/icon1.png',
'/assets/icon2.png',
'/assets/icon3.png'
];
self.addEventListener('install', function (event) {
event.waitUntil(caches.open(CacheName).then(function (cache) {
console.log("Service worker install sucess.");
return cache.addAll(CacheContents).then(function () {self.skipWaiting(); });
}).catch(function (err) {
console.log("Service worker install failed! "+err);
}));
});
self.addEventListener('fetch', function (event) {
event.respondWith(caches.match(event.request).then(function (response) {
if (response) return response;
return fetch(event.request);
}));
});
My issue is, when I go offline, it'll open the index.html page but when I try to navigate between the two pages, it gives me an error saying I'm offline, which is naturally true, but is the idea behind offline caching not supposed to cache the files in such a way that'll allow me to navigate between multiple cached pages while I'm offline?
If so, where am I going wrong?
If not, then I don't see how PWA's will replace native apps anytime soon, until they provide a method of switching between cached pages while offline.
PS. I'm experiencing this using Google Chrome on Windows and on Android.
A service worker's
fetchevent handler is triggered for navigation requests made from the clients that it controls. That's definitely one of the intended use cases for service workers.I notice that you're not calling
self.clients.claim()within your service worker'sactivateevent. That's not a problem in and of itself, but it means that your newly installed service worker won't control the current client tab/window. It won't be until the next time that you visit your web app that the service worker will control the page, and start triggering thefetchevent handler. So if you're testing offline navigations immediately after installing a fresh service worker, prior to closing and then revisiting the site, that would explain what you're seeing.There's more information about using
self.clients.claim()at https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle#clientsclaim