Progressive Web App

Progressive Web App (disingkat PWA) adalah sebuah aplikasi web yang dirancang atau dibangun dengan melakukan optimasi pada sebuah website. Tiga pilar utama Progressive Web App yaitu capable, reliable, installable.^[1] Aplikasi Progressive Web App merupakan website yang dibangun dengan menggunakan service worker, manifest, dan beberapa fitur pembentuk Progressive Web App lainnya.^[2] Tujuan dari penerapan Progressive Web App yaitu memungkinkan para pengembang web (web developer) mengubah website yang sudah ada agar bisa berperilaku layaknya aplikasi native.^[3] Sebuah aplikasi Progressive Web App memiliki beberapa keunggulan apabila dibandingkan dengan sebuah website biasa, di antaranya yaitu dapat dipasang pada perangkat (installable), aman (secure), progresif, responsif, dan lain sebagainya.^[2]

Sejarah

Istilah Progressive Web App (PWA) pertama diperkenalkan oleh Alex Russel (Senior Staff Software Engineer di Google) dan Frances Berriman (designer yang bekerja untuk Google) pada tahun 2015.^[3]^[4] Google mendefinisikan PWA sebagai berikut:^[5]

“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.”

Tiga pilar Progressive Web App

Capable

Saat ini website sudah mampu untuk melakukan suatu tugas tertentu yang dapat dilakukannya. Misalnya yaitu membuat sebuah aplikasi video hyper-local (cepat dan efisien) dengan menggunakan WebRTC, geolokasi, dan teknologi push notification. Aplikasi yang dikembangkan tersebut bahkan dapat dipasang (install) pada perangkat dan bisa digunakan untuk melakukan percakapan secara virtual dengan memanfaaatkan WebGL dan WebVR. Selain itu, dengan diperkenalkannya WebAssembly, para pengembang aplikasi (developer) dapat memanfaatkan ekosistem lain seperti C, C++, ataupun Rust, dengan keuntungan kinerja aplikasi yang lebih baik. Misalnya yaitu Squoosh.app yang menerapkannya untuk kompresi gambar tingkat lanjut.^[6]

Hingga saat ini, hanya aplikasi platform tertentu yang benar-benar dapat menerapkan hal ini. Meskipun masih ada beberapa kemampuan (capabilities) yang belum dapat diterapkan atau berada di luar jangkauan teknologi website, tetapi dengan hadirnya API baru dan yang akan datang kemungkinan dapat mengubahnya dan memperluas kemampuan (capabilites) yang dapat dilakukan sebuah website. Misalnya yaitu adanya fitur akses file sistem, kontrol media, app badging,^[7] ataupun full clipboard. Semua kemampuan tersebut dibangun dengan menerapkan konsep keamanan web (web secure) dan model data yang berpusat pada pengguna (user-centric permission model) guna memastikan bahwa website yang digunakan aman bagi pengguna.

Di antara API modern yang ada, termasuk WebAssembly dan API baru yang akan hadir, dapat memungkinkan sebuah aplikasi website memiliki kemampuan (capabilities) yang lebih baik dari sebelumnya dan dapat terus berkembang lagi.^[1]

Reliable

Progressive Web App memiliki kinerja yang lebih cepat dan dapat diandalkan dibandingkan dengan website biasa. Bahkan dengan menerapkan Progressive Web App pengguna dapat mengakses website dalam keadaan tanpa akses internet (offline).^[1] Hal tersebut dapat terjadi karena Progressive Web App menerapkan teknologi service worker. Service worker adalah sebuah berkas JavaScript yang diproses oleh browser di latar belakang.^[3] Berkas tersebut dieksekusi secara terpisah tak seperti berkas JavaScript biasa yang membentuk sebuah website.

Service worker memungkinkan menyimpan application shell (kerangka aplikasi) dan assets (CSS maupun JavaScript) dari sebuah website yang pernah diakses, lalu menyimpannya di cache storage.^[8] Sehingga ketika pengguna mengakses kembali website tersebut pengguna tidak perlu melakukan request kembali ke server, namun browser akan menampilkan data yang sudah disimpan di cache storage berdasarkan request yang telah dilakukan sebelumnya. Dengan demikian pengguna dapat mengakses website PWA dalam keadaan tanpa akses internet (offline).^[9]

Kecepatan merupakan salah satu faktor yang sangat penting bagi kenyamanan pengguna ketika mengakses sebuah website. Berdasarkan data yang ada, kecepatan atau waktu proses memuat sebuah website (page load times) sangat berpengaruh terhadap pengguna, apabila page load times berkisar antara 1-10 detik maka kemungkinan terpentalnya (bouncing) pengunjung situs seluler meningkat sebesar 123%.^[10] Terpentalnya pengunjung merujuk pada para pengguna yang masuk ke sebuah website dan kemudian keluar dikarenakan berbagai faktor, salah satunya yaitu page load times. Dengan adanya Progressive Web App, maka masalah tersebut dapat diatasi, sehingga pengguna dapat mengakses aplikasi PWA yang merespon setiap interaksi dan selalu dapat diandalkan.^[1]

Installabe

Salah satu keunggulan dari Progressive Web App yaitu dapat dipasang (install) pada perangkat, baik pada perangkat desktop ataupun mobile. Sehingga aplikasi PWA dapat berjalan di jendela mandiri, bukan di tab browser.^[1]

Perbedaan

Berikut adalah beberapa perbedaan Progressive Web App dengan aplikasi native, di antaranya yaitu :

Biaya pengembangan Progressive Web App lebih murah.^[11]
Aplikasi native lebih sulit diindeks oleh mesin pencari dan hanya dapat ditemukan melalui App/Play store. Sedangkan Progressive Web App bekerja layaknya website, sehingga dapat diindeks oleh mesin pencari. Hal tersebut membuat Progressive Web App mudah ditemukan (discoverability)

Teknologi

Ada banyak teknologi yang digunakan dalam membuat aplikasi Progressive Web App. Sebuah aplikasi berbasis website dianggap sebagai Progressive Web App apabila memenuhi kriteria, di antaranya yaitu dapat dipasang (install) pada layar beranda perangkat, dapat diakses tanpa akses internet (offline), dan lain sebagainya. Selain itu, untuk dapat dianggap sebagai aplikasi Progressive Web App maka harus menerapkan service worker dan web app manifests.^[12]^[13]

Web App Manifest

Web app manifest adalah sebuah file dalam format JSON (JavaScript Object Notation) biasanya berlabel manifest.json. Berkas tersebut merupakan tempat terpusat bagi pengembang (developer) untuk menyimpan metadata atau informasi terkait aplikasi web.^[14]^[15] Berkas manifest.json biasanya berisi informasi nama aplikasi web, ikon beserta ukuran yang digunakan, dan lain sejenisnya. Berikut adalah contoh dari file manifest.json^[16]

{
  "short_name": "Weather",
  "name": "Weather: Do I need an umbrella?",
  "icons": [
    {
      "src": "/images/icons-vector.svg",
      "type": "image/svg+xml",
      "sizes": "512x512"
    },
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "id": "/?source=pwa",
  "start_url": "/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#3367D6",
  "shortcuts": [
    {
      "name": "How's weather today?",
      "short_name": "Today",
      "description": "View weather information for today",
      "url": "/today?source=pwa",
      "icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
    },
    {
      "name": "How's weather tomorrow?",
      "short_name": "Tomorrow",
      "description": "View weather information for tomorrow",
      "url": "/tomorrow?source=pwa",
      "icons": [{ "src": "/images/tomorrow.png", "sizes": "192x192" }]
    }
  ],
  "description": "Weather forecast information",
  "screenshots": [
    {
      "src": "/images/screenshot1.png",
      "type": "image/png",
      "sizes": "540x720"
    },
    {
      "src": "/images/screenshot2.jpg",
      "type": "image/jpg",
      "sizes": "540x720"
    }
  ]
}

Service worker

Service worker pada dasarnya bertindak sebagai server proxy yang berada di antara aplikasi web, browser, dan internet (apabila tersedia). Service worker dapat memungkinkan webuah aplikasi web dapat diakses tanpa akses internet, mencegat permintaan (request) jaringan internet dan mengambil tindakan yang sesuai berdasarkan ketersediaan jaringan internet.^[17]

Web storage

Web storage atau juga dikenal dengan DOM storage (Document Object Model Storage) adalah web API JavaScript yang disediakan oleh peramban web. Web storage memungkinkan untuk menyimpan data secara lokal pada sisi client. Data yang disimpan pada web storage dapat bertahan lebih lama karena disimpan pada storage browser. Terdapat dua jenis web storage, yaitu local storage dan session storage.^[18]

Penerapan di industri

Progressive Web App termasuk dalam teknologi baru, meskipun demikian sudah banyak website kelas dunia yang sudah menerapkan Progressive Web App. Berikut daftar website yang menerapkan sifat Progressive Web App, di antaranya yaitu :

Lihat pula

Google Lighthouse, tools audit sumber terbuka untuk PWA yang dikembangkan oleh Google
Web
HTML5
CSS
JavaScript
NodeJS
NPM

Daftar pustaka

^ ^a ^b ^c ^d ^e "What are Progressive Web Apps?". web.dev (dalam bahasa Inggris). Diakses tanggal 2022-11-29.
^ ^a ^b "Progressive web apps (PWAs) | MDN". developer.mozilla.org (dalam bahasa Inggris). Diakses tanggal 2022-11-29.
^ ^a ^b ^c Indonesia, Dicoding. "Developer Academy: Menjadi Front-End Web Developer Expert". Dicoding (dalam bahasa Inggris). Diakses tanggal 2022-11-30.
^ "The history of PWA development | The PWA Book". www.divante.com (dalam bahasa Inggris). Diakses tanggal 2022-11-30.
^ "Getting started with Progressive Web Apps". Chrome Developers (dalam bahasa Inggris). Diakses tanggal 2022-11-30.
^ "WebAssembly Concepts - WebAssembly | MDN". developer.mozilla.org (dalam bahasa Inggris). Diakses tanggal 2022-11-30.
^ "Badging for app icons". Chrome Developers (dalam bahasa Inggris). Diakses tanggal 2022-11-30.
^ "Introduction to Progressive Web Apps (PWAs): Service Worker & Manifest | DigitalOcean". www.digitalocean.com (dalam bahasa Inggris). Diakses tanggal 2022-11-30.
^ "Service worker overview". Chrome Developers (dalam bahasa Inggris). Diakses tanggal 2022-11-30.
^ "Page load time statistics". Think with Google (dalam bahasa Inggris). Diakses tanggal 2022-11-30.
^ "What is a PWA? Progressive Web Apps for Beginners". freeCodeCamp.org (dalam bahasa Inggris). 2021-04-06. Diakses tanggal 2022-11-30.
^ "Progressive web apps (PWAs) | MDN". developer.mozilla.org (dalam bahasa Inggris). Diakses tanggal 2022-11-30.
^ "Instant Loading Web Apps with an Application Shell Architecture". Chrome Developers (dalam bahasa Inggris). Diakses tanggal 2022-11-30.
^ "Web Application Manifest". www.w3.org. Diakses tanggal 2022-11-30.
^ "manifest.json - Mozilla | MDN". developer.mozilla.org (dalam bahasa Inggris). Diakses tanggal 2022-11-30.
^ "Add a web app manifest". web.dev (dalam bahasa Inggris). Diakses tanggal 2022-11-30.
^ "Service Worker API - Web APIs | MDN". developer.mozilla.org (dalam bahasa Inggris). Diakses tanggal 2022-11-30.
^ "Difference Between Local Storage, Session Storage And Cookies". GeeksforGeeks (dalam bahasa Inggris). 2021-09-10. Diakses tanggal 2022-11-30.

Pranala luar

[:0-1] "What are Progressive Web Apps?". web.dev (dalam bahasa Inggris). Diakses tanggal 2022-11-29.

[developer.mozilla.org-2] "Progressive web apps (PWAs) | MDN". developer.mozilla.org (dalam bahasa Inggris). Diakses tanggal 2022-11-29.

[:1-3] Indonesia, Dicoding. "Developer Academy: Menjadi Front-End Web Developer Expert". Dicoding (dalam bahasa Inggris). Diakses tanggal 2022-11-30.

[4] "The history of PWA development | The PWA Book". www.divante.com (dalam bahasa Inggris). Diakses tanggal 2022-11-30.

[5] "Getting started with Progressive Web Apps". Chrome Developers (dalam bahasa Inggris). Diakses tanggal 2022-11-30.

[6] "WebAssembly Concepts - WebAssembly | MDN". developer.mozilla.org (dalam bahasa Inggris). Diakses tanggal 2022-11-30.

[7] "Badging for app icons". Chrome Developers (dalam bahasa Inggris). Diakses tanggal 2022-11-30.

[8] "Introduction to Progressive Web Apps (PWAs): Service Worker & Manifest | DigitalOcean". www.digitalocean.com (dalam bahasa Inggris). Diakses tanggal 2022-11-30.

[9] "Service worker overview". Chrome Developers (dalam bahasa Inggris). Diakses tanggal 2022-11-30.

[10] "Page load time statistics". Think with Google (dalam bahasa Inggris). Diakses tanggal 2022-11-30.

[11] "What is a PWA? Progressive Web Apps for Beginners". freeCodeCamp.org (dalam bahasa Inggris). 2021-04-06. Diakses tanggal 2022-11-30.

[12] "Progressive web apps (PWAs) | MDN". developer.mozilla.org (dalam bahasa Inggris). Diakses tanggal 2022-11-30.

[13] "Instant Loading Web Apps with an Application Shell Architecture". Chrome Developers (dalam bahasa Inggris). Diakses tanggal 2022-11-30.

[14] "Web Application Manifest". www.w3.org. Diakses tanggal 2022-11-30.

[15] "manifest.json - Mozilla | MDN". developer.mozilla.org (dalam bahasa Inggris). Diakses tanggal 2022-11-30.

[16] "Add a web app manifest". web.dev (dalam bahasa Inggris). Diakses tanggal 2022-11-30.

[17] "Service Worker API - Web APIs | MDN". developer.mozilla.org (dalam bahasa Inggris). Diakses tanggal 2022-11-30.

[18] "Difference Between Local Storage, Session Storage And Cookies". GeeksforGeeks (dalam bahasa Inggris). 2021-09-10. Diakses tanggal 2022-11-30.

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]

[13]

[14]

[15]

[16]

[17]

[18]