Ionic/stencil Service Workers don't auto update - ionic-framework

Question

I'm using a ionic starter pwa and I've added service worker in my stencil.config.ts.
I've added my pwa to my mobile homepage but If I build another version of the pwa, with npm run build and then deploy the pwa, the app on my phone don't update.
Stencil doc here says this but don't work for me.
"Also, because the files Stencil generates are hashed, every time you do a production build and push an update to your app, the service worker will know to update, therefore ensuring your users are never stuck on a stale version of your site."
This is my stencil.config.ts.
...
outputTargets: [
{
type: "www",
serviceWorker: {
globPatterns: [
'**/*.{js,css,json,html,ico,png}'
]
},
...
};

Answer 1

The issue is that your service worker is stuck in the waiting state. You'll need to create a custom service worker and then you can trigger "skipWaiting" and reload the page.
File: src/sw.js
importScripts("workbox-v4.3.1/workbox-sw.js");
self.addEventListener("message", ({ data }) => {
if (data === "skipWaiting") {
self.skipWaiting();
}
});
self.addEventListener('activate', event => {
clients.claim();
});
self.workbox.precaching.precacheAndRoute([]);
File: src/components/app-root.tsx
import { Component, h, Host, Listen } from '#stencil/core';
#Component({
tag: 'app-root'
})
export class AppRoot {
#Listen("swUpdate", { target: 'window' })
async onSWUpdate() {
const registration = await navigator.serviceWorker.getRegistration();
if (!registration || !registration.waiting) {
// If there is no registration, this is the first service
// worker to be installed. registration.waiting is the one
// waiting to be activated.
return;
}
registration.waiting.postMessage("skipWaiting");
window.location.reload();
}
render() {
return <Host></Host>;
}
}

Answer 2

add this code in stencil.config.ts
outputTargets: [{
type: 'www',
serviceWorker: {
globPatterns: [
'**/*.{js,css,json,html,ico,png}'
]
}
}],
create new .htaccess with below code
RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html