search

sveltejs / sapper

The next small thing in web development, powered by Svelte
https://sapper.svelte.dev
MIT License
7k stars 434 forks source link

PWA does not update when a new version of the website is available #1681

Open jz222 opened 3 years ago

jz222 commented 3 years ago

Hi,

I used Sapper and its export feature to build our website. Sapper automatically generates a service worker and I've provided all necessary files so that the website can be installed as PWA. In particular, I've tested it on an iPhone by clicking "Add to Home Screen" in Safari.

When the website is updated and deployed, the installed PWA does not recognize these changes and continues to show the previous version of the website.

Since the service worker, which is responsible for the cached files, is automatically generated by Sapper, I'm wondering if there is a solution to the issue.

Thank you

rotimi-best commented 3 years ago

Have this same issue as well. Any help?

phelbas commented 3 years ago

You may need to use the "killer service-worker" concept from this answer which when deployed, erases the caches and also the cached service-workers .. https://stackoverflow.com/questions/59725245/service-worker-updates-but-old-file-is-still-cached

jz222 commented 3 years ago

How can this be added to the standard Sapper template configuration?

phelbas commented 3 years ago

In service worker registration.update() method you should be able to check for a new version of SW, and then force a reload with location.reload(). See https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/update

I'm at a similar point of testing, but in my case pushing out a new PWA (eg, doing npm run build) makes an IOS PWA in use give an import failure message on white html screen, I must kill the PWA, and click it again, so would naturally like to automate this rather than the user seeing an error. If I can export this more and it isn't my own issue, will post again.

phelbas commented 3 years ago

This thread is useful. https://github.com/sveltejs/sapper/issues/744 Particularly the work-around mentioned to catch the registration, then you can use the update() method.

So put script in your template.html

if ('serviceWorker' in navigator) { navigator.serviceWorker.ready.then(registration => { console.log(registration); // registration.update(); }) }

Maybe a small "refresh" button on your PWA that calls update() and also a location reload?