How do I display a message to update the PWA?

How do I display an "Update" 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 "Update available" appears when an update is available for the PWA.

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-container position-fixed bottom-0 start-50 translate-middle-x mb-3 d-none">
      <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-arrow-repeat text-success" viewBox="0 0 16 16">
            <path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/>
            <path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/>
          </svg>
          <strong class="me-auto">Mise à jour disponible</strong>
        </div>
        <div class="toast-body text-start text-dark">
          Cliquez ICI pour mettre à jour.
        </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 :

enter image description here

Source: Ask Javascript Questions

LEAVE A COMMENT