Progressive Web Apps | Apa ?! Website bisa diakses offline ?

Oi chevas, udah pernah dengan istilah PWA(Progressive Web Apps) belum ?Jadi PWA ini (cmiiw) konsep baru bagaimana kita membangun sebuah web tapi feels nya kayak pake native apps. Sejenis bisa di akses offline, ada shortcut di homescreen, bisa dapet notif, ada local database nya, etc.

Tanpa basa basi langsung aja ya

Set Up

Pertama-tama pastiin kamu punya web yang mau kamu PWA-in tapi kalo belum ada kami udah siapin kok buat kamu. Apasih yang enggak buat kamu

Bisa download di sini ya. Nanti bakal ada tombol warna ijo di sebelah kanan klik aja, terus pilih download zip.

Kalo udah, selanjutnya kita bikin yang namanya service worker.

Offline Web Page with Service Worker

Nah apa tuh service worker, jadi service worker adalah script yg berjalan untuk menyimpan data data web kalian ke cache internal browser agar saat kondisi offline terjadi, browser tinggal ngambil data data dari cache memory browser dan web akan tetap berjalan.

Perama buat sebuah file baru, kasih nama service-worker.js dan letakan di root project barengan sama index.html. Lalu isi dengan

const CACHE_NAME = "chevalier_lab";
var urlsToCache = [
  "/",
  "/assets/images/logo.png",
  "/assets/images/background.jpg",
  "/assets/images/facebook.png",
  "/assets/images/gplus.png",
  "/assets/images/linkedin.png",
  "/assets/images/twitter.png",
  "/assets/images/hero-illus-working.png",
  "/assets/images/nav-logo-chevalier.png",
  "/assets/images/services-icon-cheap.png",
  "/assets/images/services-icon-cleaness.png",
  "/assets/images/services-icon-maintenance.png",
  "/assets/images/services-icon-qualified.png",
  "/assets/images/services-icon-responsive.png",
  "/assets/images/services-icon-security.png",
  "/assets/images/testimonials-placeholder-image.png",
  "/index.html",
  "/assets/css/base.css",
];
 
self.addEventListener("install", function(event) {
  event.waitUntil(
    caches.open(CACHE_NAME).then(function(cache) {
      return cache.addAll(urlsToCache);
    })
  );
});

self.addEventListener("fetch", function(event) {
    event.respondWith(
      caches
        .match(event.request, { cacheName: CACHE_NAME })
        .then(function(response) {
          if (response) {
            return response;
          }
          return fetch(event.request);
        })
    );
  });

  self.addEventListener("activate", function(event) {
    event.waitUntil(
      caches.keys().then(function(cacheNames) {
        return Promise.all(
          cacheNames.map(function(cacheName) {
            if (cacheName != CACHE_NAME) {
              return caches.delete(cacheName);
            }
          })
        );
      })
    );
  });

Jangan lupa ganti nama cache kalian dan untuk urlsToCache isi dengan semua file yang kalian perluin dalam web kalian seperti file html, css, js. dan aset-aset gambar dan semacamnya.

Setelah selesai kita perlu mendaftarkan service worker kita ke browser saat web pertama kali dibuka. Buka index.html kalian lalu tambahkan script berikut di paling bawah sebelum tag tutup body (</body>)

<script>
    if ("serviceWorker" in navigator) {
      window.addEventListener("load", function() {
        navigator.serviceWorker
          .register("/service-worker.js")
          .then(function() {
            console.log("Registrastion succeed.");
          })
          .catch(function() {
            console.log("Registrastion failed.");
          });
      });
    } else {
      console.log("ServiceWorker is unsupported.");
    }
</script>

dan selesai. Sekarang web anda bisa berjalan secara offline.

Tapi untuk sementara kita belum bisa uji coba nih. Wah gimana ya

Kalian bisa gunain Web Server for Chrome untuk serve web kalian, set folder yg mau di serve dan jalankan. Kalo udah muncul, sekarang coba matiin internet kalian dan coba refresh web kalian. Voila!! Bakal tetap muncul itulah keajaiban dari doraemon eh PWA maksudnya.

Add to Home Screen with Manifest

Untuk hal ini merupakan hal paling sederhana dari yang paling sederhana, kalian cukup buat file bernama manifest.json di root folder beriringan dengan index.html yang berisi.

{
    "name": "Chevalier Lab",
    "short_name": "Chevalier Lab",
    "description": "We code, we share, we create.",
    "start_url": "/index.html",
    "display": "standalone",
    "background_color": "#FFFFFF",
    "theme_color": "#F8A400",
    "icons": [
        {
            "src": "/assets/images/logo.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ]
}

Pastikan kalian mengisi file ini dengan benar, jangan lupa tambahin file logo ke service worker, ukuran nya juga jangan salah.

selanjutnya kita refer manifest kita di index.html di bagian <head>

<link rel=”manifest” href=”/manifest.json”>

dan selesai. Kalian akan bisa menambahkan web kalian ke home screen lewat menu Add to home screen dari browser smartphone kalian.

Kalian bisa coba di chevalier-lab.firebaseapp.com

Kalo ada yang mau ditanyakan bisa silahkan di kolom komentar ya!

Dan jangan lupa kasih clap nya 50x boleh lah ya.

Chevalier Lab

We code, we share, we create.