index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <title>Info Bola PWA</title>
  <meta name="description" content="Info Bola PWA"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/materialize.min.css">
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#00897B"/>
</head>
<body>

  <!-- Navigasi -->
  <nav class="purple darken-1" role="navigation">
    <div class="nav-wrapper container">
      <a id="logo-container" href="#" class="brand-logo">Info Bola</a>
      <a href="#" data-target="nav-mobile" class="sidenav-trigger">&#9776;</a>

      <ul class="topnav right hide-on-med-and-down"></ul>
      <ul id="nav-mobile" class="sidenav"></ul>
    </div>
  </nav>
  <!-- Akhir Navigasi -->

  <div class="body-content container"></div>

  <script src="js/materialize.min.js"></script>
  <script src="js/script.js"></script>
  <script src="js/api.js"></script>
  <script>
  // REGISTER SERVICE WORKER
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
      navigator.serviceWorker.register('/service-worker.js')
      .then(function() {
        console.log('Pendaftaran ServiceWorker berhasil');
      })
      .catch(function(){
        console.log('Pendaftaran ServiceWorker gagal');
      });
    })
  } else {
    console.log("ServiceWorker belum didukung browser ini.")
  }

  // REQUEST API UNTUK PERTAMA KALI
  document.addEventListener("DOMContentLoaded", function() {
        getArticles();
  });
  </script>
</body>
</html>