snipplets.dev/projects/PWA/app.js

'use strict';

const container = document.querySelector('.container');
const coffees = [
  { name: 'Tony Stark', image: 'images/Tony_Stark.jpg' },
  { name: 'DeusEx', image: 'images/DeusEx.png' },
  { name: 'Face', image: 'images/Face.png' },
  { name: 'Bear', image: 'images/Bear.png' },
];
const showCoffees = () => {
  let output = '';
  coffees.forEach(
    ({ name, image }) =>
      (output += `
              <div class="card">
                <img class="card--avatar" src=${image} />
                <p class="card--title">${name}</p>
              </div>
              `),
  );
  container.innerHTML = output;
};

document.addEventListener('DOMContentLoaded', showCoffees);

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function () {
    navigator.serviceWorker
      .register('/sw.js', { scope: '/' })
      .then((res) => console.log('Service worker registered'))
      .catch((err) => console.log('Service worker not registered', err));
  });
}