Cara Membuat Sebuah Web Menjadi Progressive Web App

tutorial cara membuat progressive web apps pwa pada situs statis github pages menggunakan workbox cli.
Artikel kali ini akan membahas tentang sebuah tutorial yang baru-baru ini sedang trending, yaitu cara membuat sebuah Website Statis menjadi Progressive Web Apps (atau yang lebih dikenal dengan PWA).

tutorial cara membuat website statis menjadi pwa

Sebenarnya apa sih PWA itu? Dan apa saja kelebihannya?

Simak penjelasan singkat mengenai apa itu PWA, karakteristiknya, apa saja kelebihannya, alat yang dipersiapkan, dan penerapannya pada Website Statis.

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.


Karakteristik PWA

Sebelum melangkah lebih jauh, sebaiknya kita kupas dulu karakteristik yang ada pada PWA.
  1. Progressive
    Bekerja untuk semua pengguna, terlepas dari pilihan browser, karena dibangun dari peningkatan progresif sebagai prinsip inti.
  2. Responsive
    Sesuai dengan berbagai bentuk: desktop, ponsel, tablet dll.
  3. Connectivity independent
    Service Workers dapat berjalan Offline, atau dalam jaringan berkualitas rendah.
  4. App-like
    Terasa seperti aplikasi pada pengguna dengan gaya interaksi dan navigasi aplikasi.
  5. Fresh
    Selalu uptodate.
  6. Safe
    Disediakan lewat HTTPS untuk menanggulangi pengintaian dan memastikan konten didalamnya tidak rusak.
  7. Discoverable
    Diidentifikasikan sebagai aplikasi, lewat W3C manifest dan registrasi service worker scope, yang mengizinkan search engine untuk menemukannya.
  8. Re-engageable
    Mudah melakukan interaksi lebih, lewat fitur seperti push notifikasi.
  9. Installable
    Mengizinkan pengguna untuk "menyimpan" aplikasi yang dirasa berguna ke home screen tanpa ribet dari app store.
  10. 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.


Hal-hal yang perlu disiapkan

Sebelum masuk ke tutorial, sebaiknya dipersiapkan dulu beberapa software dan file-file untuk mendukung Website PWA.
  1. Manifest.json
    File ini berisi: nama aplikasi, deskripsi, warna address bar pada browser, icon, orientasi tampilan, dll.
  2. Icon Persegi dengan berbagai ukuran
    Icon ini yang akan tampil sebagai icon aplikasi.
  3. Install NPM atau Node.js
    Karena menggunakan plugin Workbox CLI, maka kita harus menginstall Node.js yang di dalamnya ada NPM.
    Install Node.js versi LTS.
  4. Install Workbox CLI
    Workbox CLI adalah sebuah alat berupa kumpulan javascript yang dikembangkan oleh Google Developer agar website-nya bisa diakses walaupun dalam keadaan offline (jika sebelumnya website telah dibuka).
    Install dengan mengetik npm i -g workbox-cli pada Command Prompt, pastikan menjalankan CMD dalam mode Ran as Admin.

Tutorial Langkah Membuat WEB Statis menjadi PWA.

  1. Menyiapkan web yang sudah online lewat HTTPS. Jika belum punya bisa lewat localhost.
    Saya menggunakan GitHub Pages, untuk lebih jelasnya bisa membaca artikel tentang GitHub Pages.
  2. Membuat file manifest.json dan memanggilnya di file index.html.
    Pastikan web sudah mempunyai favicon (icon persegi yang sebelumnya telah dibuat).
    Buat file baru di folder yang sama dengan index.html dengan nama manifest.json dan isi dengan Kode di bawah ini. Sesuaikan kode yang ditandai dengan keterangan tentang website yang akan dijadikan PWA. 
    {
 "name": "Nama Situs",
 "short_name": "Nama Pendek Situs",
 "description": "Deskripsi Singkat Situs",
 "lang": "en-US",
 "dir": "ltr",
 "theme_color": "#414f57",
 "start_url": ".",
 "background_color": "#000",
 "display": "standalone",
 "orientation": "portrait-primary",
 "icons": [{
   "src": "path/to/icons/72x72.png",
   "sizes": "72x72",
   "type": "image/png"
  }, {
   "src": "path/to/icons/512x512.png",
   "sizes": "512x512",
   "type": "image/png"
  }]
}
    Lalu memanggilnya menggunakan kode di bawah ini dan letakkan di atas tag </head>
    <link rel="manifest" href="/manifest.json">
  3. Menambahkan Meta Tag di antara <head>...</head>, untuk membantu browser mengenali bahwa web kita adalah sebuah PWA
    <meta name="Description" content="Deskripsi Singkat Situs" />
<!-- Mendeklarasikan warna yang muncul pada address bar Chrome versi seluler -->
<meta name="theme-color" content="#414f57" />
<!-- Mendeklarasikan ikon untuk 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="Nama Situs" />
<link rel="apple-touch-icon" href="path/to/icons/128x128.png" />
<!-- Mendeklarasikan ikon untuk Windows -->
<meta name="msapplication-TileImage" content="path/to/icons/128x128.png" />
<meta name="msapplication-TileColor" content="#000000" />
  4. Membuat Precache Service Workers,
    - Pastikan telah menginstall package npm "Workbox CLI"
    - lalu buat file bernama workbox-config.js, isikan kode kurang lebih seperti ini;
    module.exports = {
  globDirectory: './',
  globPatterns: [
    '**/*.{html,json,js,css,woff}'
  ],
  swDest: './sw.js',
  runtimeCaching: [{
    urlPattern: /\.(?:png|jpg|jpeg|svg)$/,
    handler: 'NetworkFirst',
    options: {
      cacheName: 'images',
      expiration: {
        maxEntries: 10,
      },
    },
  }],
};
    - globDirectory adalah lokasi root website.
    - buka CMD di tempat ditaruhnya file diatas, tidak harus Ran as Admin.
    - lalu eksekusikan perintah berikut "workbox generateSW workbox-config.js".
    - akan ada file bernama sw.js, dan workbox-xxxxxx.js.
    - upload ke directory yang sama dengan index.html.
  5. Register sw.js di index.html,
    - buka index.html, lalu isikan dengan kode berikut ini
    <script>
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
      navigator.serviceWorker.register('/sw.js');
    });
  }
</script>
    - panggil dari index.html, di atas tag </body>
  6. Untuk mengecek apakah website tersebut sudah support PWA atau belum, bisa menggunakan menu Audit yang ada di Chrome Developer Tools.
    chrome dev tool audit pwa
  7. Sekian, jika ada pertanyaan lebih lanjut bisa komentar dibawah.


Demikian artikel tentang cara membuat sebuah website statis menjadi PWA, dan semoga bermanfaat.

Referensi:
[1] https://developers.google.com/web/tools/workbox/guides/get-started
[2] https://developers.google.com/web/tools/workbox/reference-docs/latest

17 komentar

  1. kalau diterapkan di blogger gimana caranya ya ??
    1. Belum bisa, mas.
      Di Blogger belum tersedia fitur untuk upload file ke root domain.
  2. kalau laravel bagaimana ya
    1. Belum saya coba, mas.

      Kemungkinan bisa diterapkan pada folder "public", tinggal disesuaikan pengaturannya pada langkah ke-4 di atas.
  3. menambahkan meta tag itu dmna ya mas?
    1. di dalam tag <head> ... </head>
  4. kalau develop web dengan CI lalu dibuat PWA bisa ya mas? trus pengaplikasian di mobile nya gimana mas?
    1. Kalau CI saya belum pernah coba mas, jadi kurang tau.
  5. Gimana cara buat PWA nya Installable gan ... ?.
    Artinya saat bukann sekedar add to home screen tp terinstal di android
    1. Kalau sudah di-"Add to homescreen", webnya itu sudah terinstall di android, gan.
  6. Mas, itukan secara statis webnya. Kalo utk dinamisnya gmn ya? Juga utk directory/penaruhan file itu spt apa ya, bebas taro dmn saja atau ada ditempat tertentu? Ini saya mau implementasi ke ci 3
  7. mas kenapa pas di general report PWA nya ga muncul nilai? apa karna masih pake localhost ya?
    1. iya mas, karena masih localhost,
      tp keterangan di bagian bawahnya bisa dicek apakah sudah tercentang semua atau belum.
  8. Kalau hosting shared gimana install npm & workbox nya?
    1. Kalau lewat Shared Hosting yang terbatas bisa diakali install NPM dan WorkBox nya lewat local development, jika sudah di-generate juga lewat local baru di push ke Server Shared Hosting.
  9. Akhirnya ketemu juga cara yang works. Setelah kemarin seharian ikutin tutorial bahasa Inggris gagal semua karena gak paham basic-nya. Terima kasih banyak mas Taufiq.
    1. Terima kasih juga sudah mampir, mas Bagas.