How do I display an "Offline" message in a PWA ?
I created 1 post using Bootstrap 5 theme in my HTML code.
https://getbootstrap.com/docs/5.0/components/toasts/
What I want :
- The message "You are offline" appears when the user has no internet connection?
How to do this ? Here is my code.
index.html
<!doctype html><html lang="fr" class="h-100"><head><link rel="manifest" href="/manifest.json"><link rel="canonical" href="https://www.mathieulebert.fr/"><link href="bootstrap.min.css" rel="stylesheet"><link href="style.css" rel="stylesheet"></head><body class="position-relative d-flex flex-column bg-dark text-white text-center" data-bs-spy="scroll" data-target="#navbar" data-bs-offset="85" tabindex="0"><div class="toast" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast-header"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-wifi-off text-danger" viewBox="0 0 16 16"><path d="M10.706 3.294A12.545 12.545 0 0 0 8 3C5.259 3 2.723 3.882.663 5.379a.485.485 0 0 0-.048.736.518.518 0 0 0 .668.05A11.448 11.448 0 0 1 8 4c.63 0 1.249.05 1.852.148l.854-.854zM8 6c-1.905 0-3.68.56-5.166 1.526a.48.48 0 0 0-.063.745.525.525 0 0 0 .652.065 8.448 8.448 0 0 1 3.51-1.27L8 6zm2.596 1.404.785-.785c.63.24 1.227.545 1.785.907a.482.482 0 0 1 .063.745.525.525 0 0 1-.652.065 8.462 8.462 0 0 0-1.98-.932zM8 10l.933-.933a6.455 6.455 0 0 1 2.013.637c.285.145.326.524.1.75l-.015.015a.532.532 0 0 1-.611.09A5.478 5.478 0 0 0 8 10zm4.905-4.905.747-.747c.59.3 1.153.645 1.685 1.03a.485.485 0 0 1 .047.737.518.518 0 0 1-.668.05 11.493 11.493 0 0 0-1.811-1.07zM9.02 11.78c.238.14.236.464.04.66l-.707.706a.5.5 0 0 1-.707 0l-.707-.707c-.195-.195-.197-.518.04-.66A1.99 1.99 0 0 1 8 11.5c.374 0 .723.102 1.021.28zm4.355-9.905a.53.53 0 0 1 .75.75l-10.75 10.75a.53.53 0 0 1-.75-.75l10.75-10.75z"/></svg><strong class="me-auto">Vous êtes hors-ligne</strong><button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button></div><div class="toast-body text-start text-dark"> Les informations de cette page peuvent être obsolètes.</div></div></div><script src="bootstrap.bundle.min.js"></script><script src="popover.js"></script><script src="clipboard.min.js"></script><script src="btn-clipboard.js"></script><script src="pwa.js"></script><script src="feed.js"></script></body></html>pwa.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 = 'v13';const filesToCache = ['/','/index.html','/style.css','/bootstrap.min.css','/bootstrap.bundle.min.js','/popover.js','/clipboard.min.js','/btn-clipboard.js','/pwa.js','/feed.js','/icon-32.png','/icon-144.png','/icon-192.png','/icon-512.png','/iphone5_splash.png','/iphone6_splash.png','/iphoneplus_splash.png','/iphonex_splash.png','/iphonexr_splash.png','/iphonexsmax_splash.png','/ipad_splash.png','/ipadpro1_splash.png','/ipadpro3_splash.png','/ipadpro2_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(); }});Here are some examples :
