This problem isn't new, I think it's as old as browser caching and I'm aware of that from the number of sites I've trawled through looking for a solution but the problem remains and I'm a bit lost.
I've made a website that can be installed as a Progressive Web App and I want to ensure that users don't have to do any manual work when I upload a new version of the site to the server.
I have iterated over several potential solutions for this, none of which appear to do anything - if I press f5 and look at my network activity, all the files that I've changed are still stubbornly the old versions (unless I clear the cache manually or toggle 'disable cache' in the dev options)
Firstly, I use the 'manifest' attribute in the HTML tag of my site's main page.
<html lang="en" manifest="/games/safeword/appcache.php">
and that file's contents look like this:
<?php
header("Cache-Control: max-age=0, no-cache, no-store, must-revalidate");
header("Expires: Wed, 11 Jan 1984 05:00:00 GMT");
header('Content-type: text/cache-manifest');
?>CACHE MANIFEST
v0.5.1323434
# Explicitly cached 'master entries'.
CACHE:
MyGame/assets/favicon.ico
Games/MyGame/index.php
dist/mainjs.js
css/main.css
However, as far as I can tell, this file does absolutely nothing - perhaps its been superseded by the PWA framework but I've found it difficult to find solid information on that other than a single line on the Wikipedia entry suggesting that this is an obsolete technology and this ought to be handled by the PWA framework ().
I also include several cache invalidation incantations that appear to also have no effect whatsoever:
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
Assuming that's the case, I've tried to also implement some sort of cache control within the PWA framework but the service worker I've written doesn't seem to be called under normal website operation, so I'm not sure how that would help for checking if updates are available and to then apply those.
This is how I'm going about that in any case (within my web app's initialisation function) :
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("./scripts/install_game.js");
}
and the service worker itself looks something like this:
const cacheName = "MyGame";
const cacheContents = [
"/dist/webpackedmainfile.js",
"../assets/someimage.png",
"../assets/anotherimage.png"
];
self.addEventListener("install", (e) => {
console.log("[Service Worker] Install");
e.waitUntil(
(async () => {
const cache = await caches.open(cacheName);
console.log("[Service Worker] Caching all: app shell and content");
await cache.addAll(cacheContents);
})(),
);
});
and the manifest file for the PWA looks like this:
{
"id": "/games/mygame/index.php?version=v0.5.20",
"name": "mygame",
"start_url": ".",
"screenshots": [
{
"src": "assets/screenshots/ss1.png",
"sizes": "1280x720",
"type": "image/png",
"form_factor": "wide",
"label": "crown and keyboard safe closed"
}
],
"icons": [
{
"src": "assets/logo144.png",
"type": "image/png",
"sizes": "144x144",
"purpose": "maskable"
},
{
"src": "assets/logo144.png",
"type": "image/png",
"sizes": "144x144",
"purpose": "any"
}
],
"display": "standalone",
"background_color": "#181200"
}
which actually does work: I can install the page as an app on all the platforms I've tested on. However, inspecting in chrome shows nothing cached under that cache name so I don't think its worked as I intended - files are still cached, just not under my named cache. I'm also not sure what effect any of this has if the webpage isn't installed as an app - I want a unified system that works for both and I don't think that will ever update unless its forcibly reinstalled.
The flow I want is that I update my manfiest file's version number and then something is triggered that either reinstalls everything or selectively reinstalls out of date files. I don't mind handling that myself but I need to know how. I would like to know how to accomplish this for the PWA version and the website.