Progressive Web App: Perbedaan antara revisi

Jelajahi riwayat secara interaktif

← Revisi sebelumnya

Konten dihapus Konten ditambahkan

VisualTeks wiki

Revisi per 30 November 2022 00.40 sunting Syariful Msth (bicara \| kontrib) Peninjau otomatis 1.921 suntingan Tidak ada ringkasan suntingan Tag: VisualEditor ← Revisi sebelumnya		Revisi terkini sejak 10 September 2023 00.26 sunting balikkan Kuldhi (bicara \| kontrib) 109 suntingan kTidak ada ringkasan suntingan Tag: VisualEditor
(14 revisi perantara oleh 4 pengguna tidak ditampilkan)
Baris 1: ~~{{Dalam perbaikan}}~~ [[Berkas:Progressive Web Apps Logo.svg\|jmpl\|Logo Progressive Web App]] '''Progressive Web App''' (disingkat '''PWA''') adalah sebuah aplikasi web yang dirancang atau dibangun dengan melakukan optimasi pada sebuah ~~[[Website\|~~''[[website'']]''. Tiga pilar utama Progressive Web App yaitu ''capable, reliable, installable.''<ref name=":0">{{Cite web\|title=What are Progressive Web Apps?\|url=https://web.dev/what-are-pwas/\|website=web.dev\|language=en\|access-date=2022-11-29}}</ref> Aplikasi Progressive Web App merupakan ''website'' yang dibangun dengan menggunakan ''service worker, manifest,'' dan beberapa fitur pembentuk Progressive Web App lainnya.<ref name="developer.mozilla.org">{{Cite web\|title=Progressive web apps (PWAs) {{!}} MDN\|url=https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps\|website=developer.mozilla.org\|language=en-US\|access-date=2022-11-29}}</ref> Tujuan dari penerapan Progressive Web App yaitu memungkinkan para [[pengembang web]] (''web developer'') mengubah ''website'' yang sudah ada agar bisa berperilaku layaknya aplikasi ''native''.<ref name=":1">{{Cite web\|last=Indonesia\|first=Dicoding\|title=Developer Academy: Menjadi Front-End Web Developer Expert\|url=https://www.dicoding.com/academies/219\|website=Dicoding\|language=en\|access-date=2022-11-30}}</ref> 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.<ref~~>{{Cite~~ ~~web\|title~~name=~~Progressive web apps (PWAs) {{!}} MDN\|url=https://~~"developer.mozilla.org"/~~en-US/docs/Web/Progressive_web_apps\|website=developer.mozilla.org\|language=en-US\|access-date=2022-11-29}}</ref~~> == Sejarah == Istilah Progressive Web App (PWA) pertama diperkenalkan oleh [[Alex Russell\|Alex Russel]] (Senior Staff Software Engineer di Google) dan Frances Berriman (''designer'' yang bekerja untuk Google) pada tahun 2015.<ref name=":1" /><ref>{{Cite web\|title=The history of PWA development {{!}} The PWA Book\|url=https://www.divante.com/pwabook/chapter/02-the-history-of-pwas\|website=www.divante.com\|language=en\|access-date=2022-11-30}}</ref> Google mendefinisikan PWA sebagai berikut:<ref>{{Cite web\|title=Getting started with Progressive Web Apps\|url=https://developer.chrome.com/blog/getting-started-pwa/\|website=Chrome Developers\|language=en\|access-date=2022-11-30}}</ref><blockquote>''“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.”''</blockquote> == 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 [[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.<ref>{{Cite web\|title=WebAssembly Concepts - WebAssembly {{!}} MDN\|url=https://developer.mozilla.org/en-US/docs/WebAssembly/Concepts\|website=developer.mozilla.org\|language=en-US\|access-date=2022-11-30}}</ref> ~~Sampai~~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,''<ref>{{Cite web\|title=Badging for app icons\|url=https://developer.chrome.com/articles/badging-api/\|website=Chrome Developers\|language=en\|access-date=2022-11-30}}</ref> 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 [[Application Programming Interface\|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.<ref name=":0" /> === ''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'').<ref name=":0" /> 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.<ref name=":1" /> Berkas tersebut dieksekusi secara terpisah tak seperti berkas JavaScript biasa yang membentuk sebuah ''website''. ~~Aplikasi Web Progresif yang andal terasa cepat dan dapat diandalkan terlepas dari jaringannya.~~ ''Service worker'' memungkinkan menyimpan ''application shell'' (kerangka aplikasi) dan ''assets'' (CSS maupun JavaScript) dari sebuah ''website'' yang pernah diakses, lalu menyimpannya di ''cache storage.''<ref>{{Cite web\|title=Introduction to Progressive Web Apps (PWAs): Service Worker & Manifest {{!}} DigitalOcean\|url=https://www.digitalocean.com/community/tutorials/js-intro-progressive-web-apps\|website=www.digitalocean.com\|language=en\|access-date=2022-11-30}}</ref> 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'').<ref>{{Cite web\|title=Service worker overview\|url=https://developer.chrome.com/docs/workbox/service-worker-overview/\|website=Chrome Developers\|language=en\|access-date=2022-11-30}}</ref> Kecepatan sangat penting untuk membuat pengguna ''menggunakan'' pengalaman Anda. Faktanya, saat waktu muat halaman berubah dari 1 detik menjadi sepuluh detik, kemungkinan pengguna terpental meningkat sebesar 123% . Performa tidak berhenti setelah <code>onload</code>acara. Pengguna tidak boleh bertanya-tanya apakah interaksi mereka—misalnya, mengklik tombol—telah terdaftar atau belum. Pengguliran dan animasi harus terasa halus. Performa memengaruhi seluruh pengalaman pengguna, mulai dari persepsi mereka terhadap aplikasi Anda hingga performa sebenarnya. 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%.<ref>{{Cite web\|title=Page load time statistics\|url=https://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks-load-time-vs-bounce/\|website=Think with Google\|language=en\|access-date=2022-11-30}}</ref> 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.<ref name=":0" /> Terakhir, aplikasi yang andal harus dapat digunakan terlepas dari koneksi jaringan. Pengguna mengharapkan aplikasi untuk memulai pada koneksi jaringan yang lambat atau tidak stabil atau bahkan saat offline. Mereka berharap konten terbaru yang berinteraksi dengan mereka, seperti trek media atau tiket dan rencana perjalanan, akan tersedia dan dapat digunakan meskipun sulit untuk mendapatkan permintaan ke server Anda. Ketika permintaan tidak memungkinkan, mereka berharap diberi tahu bahwa ada masalah alih-alih gagal atau mogok secara diam-diam. ~~Pengguna berhak mendapatkan aplikasi yang merespons interaksi dalam sekejap mata, dan pengalaman yang dapat mereka andalkan.~~ === ''Installabe'' === Salah satu keunggulan dari Progressive Web App yaitu dapat dipasang (''install'') pada perangkat, baik pada perangkat ''[[Komputer meja\|desktop]]'' ataupun ''[[Peranti bergerak\|mobile]]''. Sehingga aplikasi PWA dapat berjalan di jendela mandiri, bukan di ''tab browser''.<ref name=":0" /> == Perbedaan == Berikut adalah beberapa perbedaan Progressive Web App dengan aplikasi ''native'', di antaranya yaitu : * Biaya pengembangan Progressive Web App lebih murah.<ref>{{Cite web\|date=2021-04-06\|title=What is a PWA? Progressive Web Apps for Beginners\|url=https://www.freecodecamp.org/news/what-are-progressive-web-apps/\|website=freeCodeCamp.org\|language=en\|access-date=2022-11-30}}</ref> * Aplikasi ''native'' lebih sulit diindeks oleh [[Mesin pencari web\|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 w''eb app manifests.''<ref>{{Cite web\|title=Progressive web apps (PWAs) {{!}} MDN\|url=https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps\|website=developer.mozilla.org\|language=en-US\|access-date=2022-11-30}}</ref><ref>{{Cite web\|title=Instant Loading Web Apps with an Application Shell Architecture\|url=https://developer.chrome.com/blog/app-shell/\|website=Chrome Developers\|language=en\|access-date=2022-11-30}}</ref> === 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.<ref>{{Cite web\|title=Web Application Manifest\|url=https://www.w3.org/TR/appmanifest/Overview.html\|website=www.w3.org\|access-date=2022-11-30}}</ref><ref>{{Cite web\|title=manifest.json - Mozilla {{!}} MDN\|url=https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json\|website=developer.mozilla.org\|language=en-US\|access-date=2022-11-30}}</ref> Berkas manifest.json biasanya berisi informasi nama aplikasi web, ikon beserta ukuran yang digunakan, dan lain sejenisnya. Berikut adalah contoh dari file manifest.json<ref>{{Cite web\|title=Add a web app manifest\|url=https://web.dev/add-manifest/\|website=web.dev\|language=en\|access-date=2022-11-30}}</ref><syntaxhighlight lang="json"> { "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" } ] } </syntaxhighlight> === 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.<ref>{{Cite web\|title=Service Worker API - Web APIs {{!}} MDN\|url=https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API\|website=developer.mozilla.org\|language=en-US\|access-date=2022-11-30}}</ref> === ~~Komponen-komponen~~Web ~~PWA~~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.<ref>{{Cite web\|date=2021-09-10\|title=Difference Between Local Storage, Session Storage And Cookies\|url=https://www.geeksforgeeks.org/difference-between-local-storage-session-storage-and-cookies/\|website=GeeksforGeeks\|language=en-us\|access-date=2022-11-30}}</ref> ~~== Keuntungan dari PWA ==~~ == 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 : * [https://www.youtube.com/ YouTube] Baris 39 ⟶ 111: == Lihat pula == * [[Google Lighthouse]], ''tools'' audit [[sumber terbuka]] untuk PWA yang dikembangkan oleh [[Google]] * [[Situs web\|Web]] * [[HTML5]] Baris 45 ⟶ 118: * [[Node.js\|NodeJS]] * [[Npm (perangkat lunak)\|NPM]] * Google Lighthouse == Daftar pustaka == <references responsive="" /> == Pranala luar == Baris 55 ⟶ 127: * [https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps Progressive web apps (PWAs)] [[Kategori:~~Website~~Situs web\|p]] [[Kategori:Teknologi]] [[Kategori:Informatika]]