I've been using PWABuilder to make my website a PWA.
I'm using Offline copy of pages
.
A solution that expands the offline capabilities of your app. A copy of each pages is stored in the cache as your visitors view them. This allows a visitor to load any previously viewed page while they are offline.
From my understanding of this, it caches pages as they are visited and if offline, show the cache if it had been stored. Sounds great!
However, when I implement this i have the following problem:
- I browse
/user-profile/
page and because I am not logged in, I get redirected to/login/
. - I login (which auto-redirects to Homepage). Browse to
/profile/
again. - It will redirect me again to the login page because it seems to have been cached that way. If I try browse to
/profile/
one further time. It works as the cache has been updated.
The same situation happens when I log out of the account. Across the website if someone makes a change to something they need to do a further refresh to see it.
Is this intended behavior? I assumed the PWA would only "kick in" when the user is seen as offline. If I remove the PWA entirely, it works as intended.
// This is the "Offline copy of assets" service worker
const CACHE = "pwabuilder-offline";
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');
self.addEventListener("message", (event) => {
if (event.data && event.data.type === "SKIP_WAITING") {
self.skipWaiting();
}
});
workbox.routing.registerRoute(
new RegExp('/*'),
new workbox.strategies.StaleWhileRevalidate({
cacheName: CACHE
})
);