Progressive Web Application atau disingkat PWA adalah aplikasi web yang dirancang agar terasa seperti aplikasi native yang biasa kita instal dari Play Store atau App Store. Bedanya, PWA bisa diakses langsung lewat browser tanpa perlu instalasi ribet, tapi tetap bisa dipasang di layar utama (home screen), berjalan offline, dan menerima notifikasi push.

Jadi, PWA itu seperti gabungan kelebihan web dan aplikasi mobile yang ringan, cepat, dan praktis.

Mengapa PWA Penting?

Pengalaman pengguna di era digital harus cepat dan mulus. Banyak website lambat, berat, atau tidak bisa diakses saat sinyal lemah. Dengan PWA, pengguna bisa:

• Akses website tanpa koneksi internet (offline mode)
• Memasang aplikasi langsung dari browser tanpa lewat toko aplikasi seperti Play Store maupun App Store
• Mendapat notifikasi seperti aplikasi native
• Menikmati tampilan responsif di berbagai perangkat

Beberapa brand besar sudah pakai PWA dan mendapat hasil positif, contohnya:

Cara Membuat PWA Sederhana: Panduan Lengkap dengan Contoh Kode

Kalau kamu developer atau ingin tahu cara bikin PWA, berikut langkah-langkah dasarnya:

1. HTTPS

   PWA hanya berfungsi di koneksi yang aman (HTTPS). Pastikan websitemu sudah menggunakan HTTPS. Untuk development lokal, localhost sudah dianggap aman.
    

2. Struktur Folder Sederhana

   /simple-pwa/
   ├── index.html
   ├── offline.html
   ├── manifest.json
   ├── service-worker.js
   ├── app.js
   ├── styles.css
   └── icons/
       ├── icon-192x192.png
       └── icon-512x512.png

    

3. Web App Manifest

   File JSON yang menjelaskan aplikasi kamu ke browser: nama, ikon, warna tema, dan perilaku saat diinstall. Contoh manifest.json:

   {
     "name": "My Simple PWA",
     "short_name": "SimplePWA",
     "start_url": "/",
     "display": "standalone",
     "background_color": "#ffffff",
     "theme_color": "#007bff",
     "icons": [
       {
         "src": "icons/icon-192x192.png",
         "sizes": "192x192",
         "type": "image/png"
       },
       {
         "src": "icons/icon-512x512.png",
         "sizes": "512x512",
         "type": "image/png"
       }
     ]
   }

    

4. Service Worker

   File JavaScript yang berjalan di background browser untuk mengatur caching sehingga aplikasi bisa diakses offline dan lebih cepat. Contoh service-worker.js:

   const CACHE_NAME = 'simple-pwa-cache-v1';
   const filesToCache = [
     '/',
     '/index.html',
     '/offline.html',
     '/styles.css',
     '/app.js',
     '/icons/icon-192x192.png',
   ];
   
   // Saat install, cache file penting
   self.addEventListener("install", function (event) {
       event.waitUntil(
           caches.open(CACHE_NAME).then(function (cache) {
               return cache.addAll(filesToCache);
           })
       );
   });
   
   // Saat fetch, coba ambil dari cache dulu
   self.addEventListener("activate", function (event) {
       event.waitUntil(
           caches.keys().then(function (keyList) {
               return Promise.all(
                   keyList.map(function (key) {
                       if (key !== CACHE_NAME) {
                           return caches.delete(key);
                       }
                   })
               );
           })
       );
   });
   
   // Saat activate, hapus cache lama dan jika dalam keadaan offline maka munculkan offline.html
   self.addEventListener("fetch", function (event) {
       if (event.request.method !== "GET") return;
   
       event.respondWith(
           fetch(event.request)
               .then(function (response) {
                   return response;
               })
               .catch(function () {
                   return caches.open(CACHE_NAME).then(function (cache) {
                       if (event.request.mode === "navigate") {
                           return cache.match("/offline.html");
                       }
                       return cache.match(event.request);
                   });
               })
       );
   });

    

5. Daftarkan Service Worker di JavaScript utama

   Agar browser tahu dan menjalankan service worker, daftarkan di file JS utama, misalnya app.js:

   if ("serviceWorker" in navigator) {
       navigator.serviceWorker.register("/service-worker.js").then(
           (registration) => {
               console.log("Service worker registration succeeded");
           },
           (error) => {
               console.error(`Service worker registration failed`);
           },
       );
   } else {
       console.error("Service workers are not supported.");
   }

    

6. Link Manifest dan Meta di index.html

   Masukkan tag berikut supaya browser mengenali manifest dan warna tema aplikasi:

   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Simple PWA</title>
   
     <link rel="manifest" href="manifest.json" />
     <meta name="theme-color" content="#007bff" />
   
     <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
     <h1>Welcome to My Simple PWA</h1>
     <p>This is a Progressive Web App example.</p>
   
     <script src="app.js"></script>
   </body>
   </html>

    

7. Tampilan Offline

   Jika pengguna dalam keadaan offline maka PWA akan mengarahkan ke file cache yang bernama offline.html:

   <!DOCTYPE html>
   <html lang="en">
   
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <meta http-equiv="X-UA-Compatible" content="ie=edge">
       <title>Offline</title>
   </head>
   
   <body>
       <h1>You're offline</h1>
   </body>
   
   </html>
   

Jika kode di atas sudah berhasil di implementasikan, maka pada saat kode dijalankan akan muncul icon instal pada website seperti pada gambar di bawah ini:

Kesimpulan

PWA menghadirkan solusi jitu untuk aplikasi web masa depan yang cepat, responsif, dan hemat data. Selain lebih mudah diakses dan lebih murah dikembangkan dibanding aplikasi native, PWA juga memberikan pengalaman pengguna yang mulus tanpa harus instal aplikasi di Play Store, App Store, maupun di toko aplikasi lainnya.