Cara Membuat Sebuah Web Menjadi Progressive Web App

Selamat malam.

Pada kesempatan kali ini saya akan membagikan sebuah tutorial yang baru-baru ini sedang trending, yaitu cara membuat sebuah web menjadi Progressive Web Apps (atau yang lebih dikenal dengan PWA).


Sebenarnya apa sih PWA itu? Dan apa saja kelebihannya?

Berikut penjelasan singkat mengenai apa itu PWA dan apa saja kelebihannya.

Apa itu PWA?

Progressive Web Apps (PWAs) adalah aplikasi web yang merupakan halaman web atau situs web biasa, tetapi dapat muncul ke pengguna seperti aplikasi tradisional atau aplikasi seluler asli. Jenis aplikasi ini mencoba menggabungkan fitur yang ditawarkan oleh sebagian besar browser modern dengan manfaat pengalaman seluler pada umummnya. Maksud dari aplikasi di sini adalah website tersebut dapat dipasang di home screen smartphone atau daftar aplikasi windows dan dapat dijalankan seperti menggunakan aplikasi bawaan lain.

Kelebihan PWA?

Kelebihan PWA sendiri yaitu dapat menggunakan web seperti menggunakan aplikasi seluler.

Dari kedua pengertian diatas dapat ditarik kesimpulan bahwa PWA itu adalah WEB APPS yang berjalan lewat browser namun memiliki tampilan dan fungsi seperti aplikasi ponsel asli.

Sebelum melangkah lebih jauh, sebaiknya kita kupas dulu karakteristik yang ada pada PWA.

Karakteristik PWA

Progressive
Bekerja untuk semua pengguna, terlepas dari pilihan browser, karena dibangun dari peningkatan progresif sebagai prinsip inti.
Responsive
Sesuai dengan berbagai bentuk: desktop, ponsel, tablet dll.
Connectivity independent
Service Workers dapat berjalan Offline, atau dalam jaringan berkualitas rendah.
App-like
Terasa seperti aplikasi pada pengguna dengan gaya interaksi dan navigasi aplikasi.
Fresh
Selalu uptodate.
Safe
Disediakan lewat HTTPS untuk menanggulangi pengintaian dan memastikan konten didalamnya tidak rusak.
Discoverable
Diidentifikasikan sebagai aplikasi, lewat W3C manifest dan registrasi service worker scope, yang mengizinkan search engine untuk menemukannya.
Re-engageable
Mudah melakukan interaksi lebih, lewat fitur seperti push notifikasi.
Installable
Mengizinkan pengguna untuk "menyimpan" aplikasi yang dirasa berguna ke home screen tanpa ribet dari app store.
Linkable
Mudah dibagikan lewat URL dan tidak memerlukan instalasi yang ribet.
Dapat ditarik kesimpulan kembali jika PWA memerlukan beberapa file dan tag khusus yang harus dipasang ke web agar PWA berjalan mulus; yaitu file manifest.json, sw-register.js, dan sw.js.

Berikut langkah-langkah dalam membuat sebuah WEB menjadi PWA.

  1. Menyiapkan web yang sudah online lewat HTTPS. Jika belum punya bisa lewat localhost.
  2. Membuat file manifest.json dan memanggilnya di file index.html.
    Pastikan web sudah mempunyai favicon.
    {
     "name": "@TaufiqHidayat23",
     "short_name": "TaufiqH23",
     "description": "A Personal Single Web Page",
     "lang": "en-US",
     "dir": "ltr",
     "theme_color": "#414f57",
     "start_url": ".",
     "background_color": "#000",
     "display": "standalone",
     "orientation": "portrait-primary",
     "icons": [{
       "src": "assets/img/icons/ar23logo72.png",
       "sizes": "72x72",
       "type": "image/png"
      }, {
       "src": "assets/img/icons/ar23logo512.png",
       "sizes": "512x512",
       "type": "image/png"
      }]
    }
    Lalu memanggilnya menggunakan kode di bawah ini di dalam tag <head> ... </head>
    <link rel="manifest" href="/manifest.json">
  3. Menambahkan Meta Tag, untuk membantu browser mengenali bahwa web kita adalah sebuah PWA
    <meta name="Description" content="@ArtTerror23" />
    <!-- theme-color defines the top bar color (blue in my case)-->
    <meta name="theme-color" content="#414f57" />
    <!-- Add to home screen for Safari on iOS-->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <meta name="apple-mobile-web-app-title" content="@ArtTerror23" />
    <link rel="apple-touch-icon" href="assets/img/icons/ar23logo128.png" />
    <!-- Add to home screen for Windows-->
    <meta name="msapplication-TileImage" content="assets/img/icons/ar23logo128.png" />
    <meta name="msapplication-TileColor" content="#000000" />
  4. Membuat Precache Service Workers,
    - install package npm "Sw-Precache" dan "sw-toolbox"
    - lalu buat file bernama sw-config.js, isikan kode kurang lebih seperti ini;
    module.exports = {
     staticFileGlobs: [
      'images/**.jpg',
      'images/**.png',
      'assets/**/**.css',
      'assets/**/**.html',
      'assets/**/**.jpg',
      'assets/**/**.svg',
      'assets/**/**.png',
      'assets/**/**.webp',
      'assets/**/**.ico',
      'assets/**/**.eot',
      'assets/**/**.otf',
      'assets/**/**.ttf',
      'assets/**/**.woff',
      'assets/**/**.woff2'
     ],
     runtimeCaching: [{
      urlPattern: /^https:\/\/me.taufiqhdyt\.com\//,
      handler: 'networkFirst'
     }]
    }
    - buka cmd di tempat ditaruhnya file diatas,
    - lalu eksekusikan perintah berikut "sw-precache --config sw-config.js"
    - akan ada file bernama service-worker.js
    - upload ke directory yang sama dengan index.html
  5. Register sw.js,
    - buat file bernama sw-register.js, lalu isikan dengan kode berikut
    "use strict"
    if("serviceWorker"in navigator){window.addEventListener("load",function(){navigator.serviceWorker.register("/service-worker.js").then(function(reg){reg.onupdatefound=function(){var installingWorker=reg.installing
    installingWorker.onstatechange=function(){switch(installingWorker.state){case "installed":if(navigator.serviceWorker.controller){console.log("New or updated content is now available.")
    document.querySelector('#update-message').classList.add('show')}else{console.log("Content is now available offline!")}
    break
    case "redundant":console.error("The installing service worker became redundant.")
    break}}}}).catch(function(e){console.error("Error during service worker registration:",e)})})}
    - panggil dari index.html
  6. Sekian, jika ada pertanyaan lebih lanjut bisa komentar dibawah
Demikian, dan semoga bermanfaat.