for service worker and offline page
<link
rel="preload|prefetch"
as="font|script|style"
href='https://fonts.googleapis.com/css........'
onload="this.rel = 'stylesheet'"
>
/*for ...*/
<link rel="manifest" href="/manifest.json">
/*apple*/
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Chatty Images">
<link rel="apple-touch-icon" href="/static/icons/144.png">
/*ie*/
<meta name="msapplication-TileImage" content="/static/icons/144.png">
<meta name="msapplication-TileColor" content="#000">
{
"name": "Chatty Images",
"short_name": "Chatty",
"start_url": "index.html",
"display": "standalone",
"theme_color": "#9c27b0",
"background_color": "#fff",
"icons": [
{
"src": "/static/icons/144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "/static/icons/512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js').then(reg => {
reg.onupdatefound = function() {
const sw = reg.installing;
sw.onstatechange = function() {
if (sw.state === 'installed') {
if (navigator.serviceWorker.controller) {
app.message = 'New version is available. Reload to activate it.'
app.show=true
} else {
app.message = 'Content is now available offline'
app.show=true
}
}
}
}
})
}
//------------------------------------
self.addEventListener('activate', event => {
event.waitUntil(clients.claim());
});
self.addEventListener('activate', () => {
self.clients.matchAll({ type: 'window' }).then(clients => {
for (let client of clients) {
client.navigate(client.url)
}
})
})