can help me create a simple PWA for my site. Currently the installation banner appears and it works.
I want that when I update my site, a message is displayed in the application in the form of a banner with the text "An update is available, click on this banner to update".
I want that when the internet network is not available, a banner appears with the message "You are offline, the content of this page may be obsolete".
How can I do this ? Thank you
Here are the files I created :
index.html
<!doctype html><html lang="fr" class="h-100"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="/bootstrap.min.css" rel="stylesheet"><link href="/example/style.css" rel="stylesheet"></head><body class="d-flex flex-column bg-dark text-white text-center"><div>MY PAGE</div><script src="bootstrap.bundle.min.js"></script><script src="app.js"></script></body></html>app.js
if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('sw.js') .then(reg => { console.log('Service worker registered! 😎', reg); }) .catch(err => { console.log('😥 Service worker registration failed: ', err); }); });}sw.js
const staticCacheName = 'v10';const filesToCache = ['/','/index.html','/style.css','/app.js','/bootstrap.min.css','/bootstrap.bundle.min.js','/favicon.ico','/logo.png','/icon-144.png','/icon-192.png','/icon-512.png','/ipadpro1_splash.png','/ipadpro2_splash.png','/ipadpro3_splash.png','/ipad_splash.png','/iphone5_splash.png','/iphone6_splash.png','/iphoneplus_splash.png','/iphonexr_splash.png','/iphonexsmax_splash.png','/iphonex_splash.png'];self.addEventListener('install', event => { event.waitUntil( caches.open(staticCacheName).then(cache => { return cache.addAll(filesToCache); }) );});self.addEventListener('activate', event => { event.waitUntil(caches.keys().then(function(cacheNames) { return Promise.all( cacheNames.filter(function(staticCacheName) { }).map(function(staticCacheName) { return caches.delete(staticCacheName); }) ); }));});self.addEventListener('fetch', event => { event.respondWith(caches.match(event.request).then(cachedResponse => { if (cachedResponse) { return cachedResponse; } return fetch(event.request); }));});self.addEventListener('message', event => { if (event.data.action === 'skipWaiting') { self.skipWaiting(); }});