https://wiki.unissula.ac.id/index.php?action=history&feed=atom&title=Progressive_Web_App 2026-09-15T15:31:47Z Riwayat revisi halaman ini di wiki MediaWiki 1.46.0 https://wiki.unissula.ac.id/index.php?title=Progressive_Web_App&diff=355&oldid=prev 2026-08-23T03:07:27Z

<p>Presentation V4: sitasi, referensi, Math, Wikimedia Commons, dan atribusi</p> <a href="https://wiki.unissula.ac.id/index.php?title=Progressive_Web_App&amp;diff=355&amp;oldid=195">Lihat perubahan</a>

Maintenance script https://wiki.unissula.ac.id/index.php?title=Progressive_Web_App&diff=195&oldid=prev 2026-08-23T02:26:27Z

<p>Impor teks terkontrol dari Wikipedia bahasa Indonesia; revisi 28484112; atribusi sumber disertakan.</p> <p><b>Halaman baru</b></p><div>&#039;&#039;&#039;Progressive Web App&#039;&#039;&#039; (disingkat &#039;&#039;&#039;PWA&#039;&#039;&#039;) adalah sebuah [[aplikasi web]] yang dirancang atau dibangun dengan melakukan optimasi pada sebuah &#039;&#039;[[website]]&#039;&#039;. Tiga pilar utama Progressive Web App yaitu &#039;&#039;capable, reliable, installable.&#039;&#039; Aplikasi Progressive Web App merupakan &#039;&#039;website&#039;&#039; yang dibangun dengan menggunakan &#039;&#039;service worker, manifest,&#039;&#039; dan beberapa fitur pembentuk Progressive Web App lainnya. Tujuan dari penerapan Progressive Web App yaitu memungkinkan para [[pengembang web]] (&#039;&#039;web developer&#039;&#039;) mengubah &#039;&#039;website&#039;&#039; yang sudah ada agar bisa berperilaku layaknya aplikasi &#039;&#039;native&#039;&#039;. Sebuah aplikasi Progressive Web App memiliki beberapa keunggulan apabila dibandingkan dengan sebuah &#039;&#039;website&#039;&#039; biasa, di antaranya yaitu dapat dipasang pada perangkat (&#039;&#039;installable&#039;&#039;), aman (&#039;&#039;secure&#039;&#039;), &#039;&#039;progresif, responsif,&#039;&#039; dan lain sebagainya.<br /> <br /> == Sejarah ==<br /> Istilah Progressive Web App (PWA) pertama diperkenalkan oleh [[Alex Russell|Alex Russel]] (Senior Staff Software Engineer di Google) dan Frances Berriman (&#039;&#039;designer&#039;&#039; yang bekerja untuk Google) pada tahun 2015. Google mendefinisikan PWA sebagai berikut:&lt;blockquote&gt;&#039;&#039;“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&#039;s low friction at every moment.”&#039;&#039;&lt;/blockquote&gt;<br /> <br /> == Tiga pilar Progressive Web App ==<br /> <br /> === &#039;&#039;Capable&#039;&#039; ===<br /> Saat ini &#039;&#039;website&#039;&#039; sudah mampu untuk melakukan suatu tugas tertentu yang dapat dilakukannya. Misalnya yaitu membuat sebuah aplikasi video &#039;&#039;hyper-local&#039;&#039; (cepat dan efisien) dengan menggunakan WebRTC, [[geolokasi]], dan teknologi &#039;&#039;push notification.&#039;&#039; 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 (&#039;&#039;developer&#039;&#039;) dapat memanfaatkan ekosistem lain seperti [[Bahasa C|C]], [[C++]], ataupun [[Rust]], dengan keuntungan kinerja aplikasi yang lebih baik. Misalnya yaitu [https://squoosh.app/ Squoosh.app] yang menerapkannya untuk kompresi gambar tingkat lanjut.<br /> <br /> Hingga saat ini, hanya aplikasi &#039;&#039;platform&#039;&#039; tertentu yang benar-benar dapat menerapkan hal ini. Meskipun masih ada beberapa kemampuan (&#039;&#039;capabilities&#039;&#039;) yang belum dapat diterapkan atau berada di luar jangkauan teknologi &#039;&#039;website,&#039;&#039; tetapi dengan hadirnya API baru dan yang akan datang kemungkinan dapat mengubahnya dan memperluas kemampuan (&#039;&#039;capabilites&#039;&#039;) yang dapat dilakukan sebuah &#039;&#039;website.&#039;&#039; Misalnya yaitu adanya fitur akses file sistem, kontrol media, &#039;&#039;app badging,&#039;&#039; ataupun &#039;&#039;full clipboard.&#039;&#039; Semua kemampuan tersebut dibangun dengan menerapkan konsep keamanan web (&#039;&#039;web secure&#039;&#039;) dan model data yang berpusat pada pengguna (&#039;&#039;user-centric permission model&#039;&#039;) guna memastikan bahwa &#039;&#039;website&#039;&#039; yang digunakan aman bagi pengguna.<br /> <br /> Di antara [[Application Programming Interface|API]] modern yang ada, termasuk WebAssembly dan API baru yang akan hadir, dapat memungkinkan sebuah aplikasi &#039;&#039;website&#039;&#039; memiliki kemampuan (&#039;&#039;capabilities&#039;&#039;) yang lebih baik dari sebelumnya dan dapat terus berkembang lagi.<br /> <br /> === &#039;&#039;Reliable&#039;&#039; ===<br /> Progressive Web App memiliki kinerja yang lebih cepat dan dapat diandalkan dibandingkan dengan &#039;&#039;website&#039;&#039; biasa. Bahkan dengan menerapkan Progressive Web App pengguna dapat mengakses &#039;&#039;website&#039;&#039; dalam keadaan tanpa akses internet (&#039;&#039;offline&#039;&#039;). Hal tersebut dapat terjadi karena Progressive Web App menerapkan teknologi &#039;&#039;service worker.&#039;&#039; Service worker adalah sebuah berkas JavaScript yang diproses oleh &#039;&#039;browser&#039;&#039; di latar belakang. Berkas tersebut dieksekusi secara terpisah tak seperti berkas JavaScript biasa yang membentuk sebuah &#039;&#039;website&#039;&#039;.<br /> <br /> &#039;&#039;Service worker&#039;&#039; memungkinkan menyimpan &#039;&#039;application shell&#039;&#039; (kerangka aplikasi) dan &#039;&#039;assets&#039;&#039; (CSS maupun JavaScript) dari sebuah &#039;&#039;website&#039;&#039; yang pernah diakses, lalu menyimpannya di &#039;&#039;cache storage.&#039;&#039; Sehingga ketika pengguna mengakses kembali &#039;&#039;website&#039;&#039; tersebut pengguna tidak perlu melakukan &#039;&#039;request&#039;&#039; kembali ke &#039;&#039;server,&#039;&#039; tetapi &#039;&#039;browser&#039;&#039; akan menampilkan data yang sudah disimpan di &#039;&#039;cache storage&#039;&#039; berdasarkan &#039;&#039;request&#039;&#039; yang telah dilakukan sebelumnya&#039;&#039;.&#039;&#039; Dengan demikian pengguna dapat mengakses &#039;&#039;website&#039;&#039; PWA dalam keadaan tanpa akses internet (&#039;&#039;offline&#039;&#039;).<br /> <br /> Kecepatan merupakan salah satu faktor yang sangat penting bagi kenyamanan pengguna ketika mengakses sebuah &#039;&#039;website.&#039;&#039; Berdasarkan data yang ada, kecepatan atau waktu proses memuat sebuah website (&#039;&#039;page load times&#039;&#039;) sangat berpengaruh terhadap pengguna, apabila &#039;&#039;page load times&#039;&#039; berkisar antara 1-10 detik maka kemungkinan terpentalnya (&#039;&#039;bouncing&#039;&#039;) pengunjung situs seluler meningkat sebesar 123%. Terpentalnya pengunjung merujuk pada para pengguna yang masuk ke sebuah &#039;&#039;website&#039;&#039; dan kemudian keluar dikarenakan berbagai faktor, salah satunya yaitu &#039;&#039;page load times.&#039;&#039; Dengan adanya Progressive Web App, maka masalah tersebut dapat diatasi, sehingga pengguna dapat mengakses aplikasi PWA yang merespon setiap interaksi dan selalu dapat diandalkan.<br /> <br /> === &#039;&#039;Installabe&#039;&#039; ===<br /> Salah satu keunggulan dari Progressive Web App yaitu dapat dipasang (&#039;&#039;install&#039;&#039;) pada perangkat, baik pada perangkat &#039;&#039;[[Komputer meja|desktop]]&#039;&#039; ataupun &#039;&#039;[[Peranti bergerak|mobile]]&#039;&#039;. Sehingga aplikasi PWA dapat berjalan di jendela mandiri, bukan di &#039;&#039;tab browser&#039;&#039;.<br /> <br /> == Perbedaan ==<br /> Berikut adalah beberapa perbedaan Progressive Web App dengan aplikasi &#039;&#039;native&#039;&#039;, di antaranya yaitu :<br /> <br /> * Biaya pengembangan Progressive Web App lebih murah.<br /> * Aplikasi &#039;&#039;native&#039;&#039; lebih sulit diindeks oleh [[Mesin pencari web|mesin pencari]] dan hanya dapat ditemukan melalui &#039;&#039;App/Play store.&#039;&#039; Sedangkan Progressive Web App bekerja layaknya &#039;&#039;website,&#039;&#039; sehingga dapat diindeks oleh mesin pencari. Hal tersebut membuat Progressive Web App mudah ditemukan (&#039;&#039;discoverability&#039;&#039;)<br /> <br /> == Teknologi ==<br /> Ada banyak teknologi yang digunakan dalam membuat aplikasi Progressive Web App. Sebuah aplikasi berbasis &#039;&#039;website&#039;&#039; dianggap sebagai Progressive Web App apabila memenuhi kriteria, di antaranya yaitu dapat dipasang (install) pada layar beranda perangkat, dapat diakses tanpa akses internet (&#039;&#039;offline&#039;&#039;), dan lain sebagainya. Selain itu, untuk dapat dianggap sebagai aplikasi Progressive Web App maka harus menerapkan &#039;&#039;service worker&#039;&#039; dan w&#039;&#039;eb app manifests.&#039;&#039;<br /> <br /> === Web App Manifest ===<br /> &#039;&#039;Web app manifest&#039;&#039; adalah sebuah file dalam format [[JSON]] (&#039;&#039;JavaScript Object Notation&#039;&#039;) biasanya berlabel manifest.json. Berkas tersebut merupakan tempat terpusat bagi pengembang (&#039;&#039;developer&#039;&#039;) untuk menyimpan &#039;&#039;metadata&#039;&#039; atau informasi terkait aplikasi web. Berkas manifest.json biasanya berisi informasi nama aplikasi web, ikon beserta ukuran yang digunakan, dan lain sejenisnya. Berikut adalah contoh dari file manifest.json<br /> <br /> === Service worker ===<br /> &#039;&#039;Service worker&#039;&#039; pada dasarnya bertindak sebagai &#039;&#039;server proxy&#039;&#039; yang berada di antara aplikasi web, &#039;&#039;browser,&#039;&#039; dan internet (apabila tersedia). Service worker dapat memungkinkan webuah aplikasi web dapat diakses tanpa akses internet, mencegat permintaan (&#039;&#039;request&#039;&#039;) jaringan internet dan mengambil tindakan yang sesuai berdasarkan ketersediaan jaringan internet.<br /> <br /> === Web storage ===<br /> &#039;&#039;Web storage&#039;&#039; atau juga dikenal dengan DOM &#039;&#039;storage&#039;&#039; ([[Document Object Model]] Storage) adalah web API JavaScript yang disediakan oleh [[peramban web]]. &#039;&#039;Web storage&#039;&#039; memungkinkan untuk menyimpan data secara lokal pada sisi &#039;&#039;client.&#039;&#039; Data yang disimpan pada &#039;&#039;web storage&#039;&#039; dapat bertahan lebih lama karena disimpan pada &#039;&#039;storage browser.&#039;&#039; Terdapat dua jenis &#039;&#039;web storage,&#039;&#039; yaitu &#039;&#039;local storage&#039;&#039; dan &#039;&#039;session&#039;&#039; storage.<br /> <br /> == Penerapan di industri ==<br /> Progressive Web App termasuk dalam teknologi baru, meskipun demikian sudah banyak &#039;&#039;website&#039;&#039; kelas dunia yang sudah menerapkan Progressive Web App. Berikut daftar &#039;&#039;website&#039;&#039; yang menerapkan sifat Progressive Web App, di antaranya yaitu :<br /> <br /> * [https://www.youtube.com/ YouTube]<br /> * [https://twitter.com/ Twitter]<br /> * [https://www.tokopedia.com/ Tokopedia]<br /> * [https://developers.google.com/ Google Developer]<br /> * [https://app.starbucks.com/ Starbucks]<br /> <br /> == Lihat pula ==<br /> <br /> * [[Google Lighthouse]], &#039;&#039;tools&#039;&#039; audit [[sumber terbuka]] untuk PWA yang dikembangkan oleh [[Google]]<br /> * [[Situs web|Web]]<br /> * [[HTML5]]<br /> * [[CSS]]<br /> * [[JavaScript]]<br /> * [[Node.js|NodeJS]]<br /> * [[Npm (perangkat lunak)|NPM]]<br /> <br /> == Daftar pustaka ==<br /> <br /> <br /> == Pranala luar ==<br /> <br /> * [https://web.dev/what-are-pwas/ What are Progressive Web Apps?]<br /> * [https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps Progressive web apps (PWAs)]<br /> <br /> == Sumber dan atribusi ==<br /> <br /> Artikel ini diadaptasi dalam mode teks dari<br /> [https://id.wikipedia.org/w/index.php?title=Progressive_Web_App&amp;oldid=28484112 Wikipedia bahasa Indonesia],<br /> revisi 28484112 (2025-11-14T08:40:23Z).<br /> Gambar, media, infobox, templat navigasi, dan kategori sumber<br /> tidak diimpor ke Wiki Unissula.<br /> Atribusi dan lisensi mengikuti ketentuan Creative Commons<br /> Atribusi-BerbagiSerupa (CC BY-SA) pada sumber Wikipedia.</div>

Maintenance script