PWA merupakan aplikasi web yang memberikan pengalaman seperti aplikasi mobile namun memiliki kelebihan seperti proses pengembangan dan pembaruan yang lebih cepat serta dapat diakses dari berbagai perangkat. Komponen utama PWA antara lain application shell, web app manifest, dan service worker yang berjalan di belakang layar browser untuk menyimpan cache konten.

1. Progresive Web
App
Oleh Ryan Aunur Rassyid
Studi Independent x Dicoding

2. Apa itu PWA
“Progressive Web Apps use modern web
capabilities to deliver an app-like user
experience. They evolve from pages in
browser tabs to immersive, top-level apps,
maintaining the web's low friction at every
moment.”
- Alex Russel, Frances Berriman

3. Kan udah ada Mobile Apps
kenapa buat PWA?
- Sebuah Alternatif
- Prosess Development cepat
- Prosess Update bisa lebih cepat
- Responsive (Mobile, Desktop, dan Tablet)

4. Sebuah Syarat
- Starts fast, stay fast
- Works in any browser
- Responsive to any screen size
- Provides a custom offline page
- Is Installable

5. Komponent Pembentuk
- Application Shell
- Web App Manifest
- Service Worker
Optional
- Cache API
- Fetch API
- IndexedDB
- dll

6. Application Shell
App Shell memisahkan antara base UI dengan
konten yang bersifat dinamis.
App Shell ini akan di-cache sehingga ia lebih cepat
tampil ketika dikunjungi ulang.

7. Web App Manifest
Web App Manifest merupakan berkas yang
menampung informasi aplikasi seperti:
- Nama
- Deskripsi
- Icon
- Warna Tema
<link rel="manifest" href="app.webmanifest">

8. Service Worker
Service Worker adalah bagian dasar dari
penerapan PWA yang berjalan dibelakang layar
browser.
Kemampuan utamanya adalah mengambil alih
seluruh pengiriman request ke server yang terjadi
pada browser (client).

9. Service Worker
Service Worker yang sudah terdaftar/diregistrasi
akan terlihat di devtool bagian Application >
Service Workers.
Google menyediakan library dan tooling untuk
mempermudah penerapan Cache Strategy pada
Service Worker, yaitu Workbox.

10. Webpack Plugin
webpack-pwa-manifest
Progressive Web App Manifest Generator for Webpack, with auto icon
resizing and fingerprinting support.
workbox-webpack-plugin
A plugin for your Webpack build process, helping you generate a manifest of
local files that workbox-sw should precache.

11. Tips
- Pada saat mengakses alamat yang sebelumnya sudah terpasang Service Worker, pastikan untuk Clear
Site Data terlebih dahulu.
- Ketika menggunakan Workbox GenerateSW lebih baik diletakan pada konfigurasi production saja.
- Gunakan browser mode Incognito untuk mengatasi masalah cache pada Service Worker.

12. Terima Kasih