Memb a n g u n A p lik a si M o b i l e

dengan Progressive Web App (PWA)

HENDRA SANTOSO

CV. LOKOMEDIA
Membangun Aplikasi Mobile dengan Progressive
Web App (PWA)
Perpustakaan Nasional : Katalog Dalam Terbitan (KDT)
Penulis : Hendra Santoso
Membangun Aplikasi Mobile dengan Progressive Web App (PWA)
- Cet. I. - Yogyakarta : Penerbit Lokomedia, 2019
200 halaman; 14 x 21 cm
ISBN : 978-602-62312-0-8

Penerbit Lokomedia,
Cetakan Pertama : Maret 2019

Editor : Lukmanul Hakim

Cover : Subkhan Anshori
Layout : Lukmanul Hakim

Diterbitkan pertama kali oleh :

CV. LOKOMEDIA
Jl. Jambon, Perum. Pesona Alam Hijau 2 Kav. B-4, Kricak
Yogyakarta 55242.

email : redaksi@bukulokomedia.com
website : www.bukulokomedia.com

Copyright © Lokomedia, 2019

Hak Cipta dilindungi oleh Undang-Undang

Dilarang memperbanyak, mencetak ataupun menerbitkan sebagian

maupun seluruh isi buku ini tanpa izin tertulis dari penerbit.

ii
 KATA PENGANTAR

Puji syukur penulis panjatkan kepada Sanghyang Adi Buddha Tuhan Yang
Maha Esa berkat pancaran sinar cinta kasih dan kasih sayang-Nya penulis dapat
menyelesaikan buku tentang “Membangun Aplikasi Mobile dengan Progressive
Web App (PWA)” ini dengan baik.
Pada kesempatan ini, penulis menghanturkan terima kasih yang tak terhingga
kepada almarhum dan almarhumah kedua orang tua yang telah membesarkanku,
kepada rekan-rekan sekerja dan semua pihak yang telah membantu selama proses
pembuatan buku ini.
Buku ini ditujukan bagi Anda yang ingin mengenal tentang teknologi web
progresif dan membangun aplikasi web layaknya aplikasi native mobile dengan
metodologi Progressive Web App (PWA).
Anda cukup mengetahui dasar pemrograman web seperti HTML, CSS dan
JavaScript. Sementara aplikasi mobile native butuh pengetahuan program java
android atau objective-c/swift untuk IOS. Dengan PWA, kita dapat membangun
satu aplikasi mobile yang dapat berjalan di berbagai platform mobile, baik
Android, IOS dan Windows Mobile.
Buku ini mencangkup pengenalan PWA, kelebihan dan kekurangan PWA,
perbedaan aplikasi mobile web dengan aplikasi mobile native, fitur dalam PWA
seperti Web App Manifest, Service Workers, Add to Home Screen (A2HS), Push
Notification dan Background Sync serta beberapa contoh kasus membuat aplikasi
mobile web berbasis PWA.
Penulis menyadari keterbatasan kemampuan dalam penyusunan buku ini,
sehingga sangat membutuhkan kritik dan saran yang bersifat membangun demi
kesempurnaan buku yang akan datang.
Dengan adanya buku ini, diharapkan dapat menjadi referensi dalam membangun
aplikasi mobile web dengan Progressive Web App (PWA). Akhirnya penulis
berharap semoga buku ini dapat bermanfaat bagi kita semua.

Tangerang, Januari 2019

Hendra Santoso
hendra@kampushendra.com

iii
Buku ini kudedikasikan kepada pendamping hidupku,
dan kedua malaikat kecilku…

iv
 DAFTAR ISI

BAB 1. Pengenalan Progressive Web App......................................................1

1.1. Latar Belakang PWA.....................................................................................2
1.2. Kelebihan dan Kekurangan PWA.................................................................3
1.3. Karakteristik PWA........................................................................................7
1.4. Fitur PWA......................................................................................................8
1.5. Teknologi Pendukung PWA........................................................................10
1.6. Mengapa Perlu Membangun Aplikasi Web Progresif?.............................11
1.7. Perbedaan Aplikasi Mobile Native, Hybrid dan PWA..............................13

BAB 2. Service Worker...................................................................................15

2.1. Pengenalan Service Worker........................................................................16
2.2. Promise API................................................................................................19
2.3. Fetch API.....................................................................................................23
2.4. Siklus Hidup Service Worker.....................................................................25
2.4.1. Register Service Worker...................................................................27
2.4.2. Update Service Worker.....................................................................30
2.5. Fungsi Caching dan Offline dengan Service Worker................................32
2.6. Mekanisme Pengambilan Resources dari Cache.......................................37
2.7. Menghapus Cache yang Kadaluarsa..........................................................44
2.8. Background Sync dengan Service Worker.................................................45

BAB 3. Menyimpan Data Lokal dengan IndexedDB..................................49

3.1. Pengenalan IndexedDB..............................................................................50
3.2. Menggunakan IndexedDB API..................................................................55

v
3.3. Pembenahan Data IndexedDB...................................................................59
3.4. Menggunakan API IndexedDB Promised..................................................60
3.5. Beberapa Library IndexedDB yang Populer..............................................69

BAB 4. Pembuatan Shortcut pada Homescreen..........................................73

4.1. M emasang Aplikasi pada Homescreen.....................................................74
4.2. Membuat Web App Manifest......................................................................77
4.3. Membuat Banner AH2C.............................................................................80
4.4. Membuat PWA Splash Screen....................................................................83

BAB 5. Pembuatan Notifikasi.........................................................................85

5.1. Web Notification.........................................................................................86
5.2. Push Notification.........................................................................................94
5.2.1. Cara Kerja Web Push........................................................................96
5.2.2. Menangani Event Push di Service Worker......................................99
5.2.3. Subscribe User ke Layanan Push...................................................100
5.2.4. Unsubscribe User ke Layanan Push...............................................103
5.3. Menggunakan Firebase Cloud Messaging...............................................104

BAB 6. Pembuatan Application Shell..........................................................107

6.1. Pengenalan Arsitektur App Shell..............................................................108
6.2. Mengapa Menggunakan Arsitektur App Shell?.......................................109
6.3. Design App Shell...................................................................................... 111
6.4. Service Worker untuk pre-cache App Shell.............................................118

BAB 7. Alat Bantu Pengembangan Aplikasi PWA....................................127

7.1. Beberapa Alat Bantu Pengembangan Aplikasi PWA...............................128

vi
7.2. Menggunakan Lightbox............................................................................135
7.3. Menggunakan Workbook.........................................................................136
7.4. Debug Aplikasi PWA................................................................................140

BAB 8. Studi Kasus Pembuatan Aplikasi PWA.........................................151

8.1. Beberapa Contoh Aplikasi PWA.............................................................152
8.2. Membuat Aplikasi PWA ’Baca Berita’.....................................................154
8.3. Membuat Aplikasi PWA ’ QR Code Scanner & Generator’....................159
8.4. Membuat Blog Wordpress Menjadi PWA................................................172
8.5. Membuat Website Anda Menjadi PWA...................................................177

BAB 9. Single Page Application Ala PWA..................................................183

9.1. Pengenalan SPA........................................................................................184
9.2. Single Page Application Vs Multi Page Application...............................184
9.3. Membuat Single Page Application dengan PWA....................................188

BAB 10. Masa Depan dan Fitur Keren PWA.............................................197

10.1. Masa Depan PWA...................................................................................198
10.2. Ujicoba Fitur-Fitur Baru PWA yang Menarik........................................202
10.2.1. Media (Audio & Video) Capture................................................203
10.2.2. Advanced Camera Control.........................................................205
10.2.3. Recording Media.........................................................................207
10.2.4. Real-Time Communication........................................................210
10.2.5. Local Notification.......................................................................212
10.2.6. Push Message..............................................................................213
10.2.7. Home Screen Installation............................................................213
10.2.8. Foreground Detection.................................................................215

vii
 10.2.9. Permission...................................................................................216
10.2.10. Offline Mode.............................................................................219
10.2.11. Background Sync......................................................................220
10.2.12. Payment.....................................................................................221
10.2.13. Credentials.................................................................................225
10.2.14. Web Bluetooth...........................................................................229
10.2.15. Web USB...................................................................................230
10.2.16. Offline Storage..........................................................................232
10.2.17. File Access................................................................................234
10.2.18. Storage Quota............................................................................237
10.2.19. Geolocation...............................................................................237
10.2.20. Device Position.........................................................................239
10.2.21. Device Motion..........................................................................242
10.2.22. Network Type & Speed............................................................245
10.2.23. Online State...............................................................................246
10.2.24. Vibration....................................................................................246
10.2.25. Battery Status............................................................................247
10.2.26. Device Memory........................................................................249
10.2.27. Touch Gesture...........................................................................250
10.2.28. Speech Recognation.................................................................252
10.2.29. Clipboard Copy & Paste...........................................................253
10.2.30. Fullscreen..................................................................................256
10.2.31. Screen Orientation & Lock.......................................................258
10.2.32. Presentation Features................................................................262
10.3. Fitur Pengembangan PWA......................................................................262

Daftar Pustaka................................................................................................264

viii
BAB I
Pengenalan
Progressive Web App
 BAB 1
Pengenalan Progressive Web App

1.1 Latar Belakang Progressive Web App (PWA)

Teknologi pengembangan web telah berubah pesat sejak 2005 dari web statik ke
web dinamis. Terlebih sejak adanya teknik AJAX (Asynchronous JavaScript And
XML) yang memungkinkan aplikasi web dapat mengubah konten secara dinamis
tanpa perlu memuat ulang seluruh halaman.
Dengan AJAX, aplikasi web dapat mengirim dan mengambil data dari server
secara asynchronous (di background) tanpa mengganggu tampilan dan perilaku
halaman yang ada. AJAX menjadi bagian dari revolusi Web 2.0.
Beberapa tahun kemudian muncul konsep mobile first design oleh Luke
Wroblewski (tahun 2009), dimana pengembangan web selanjutnya menggunakan
framework Responsive Web Design oleh Ethan Marcote di tahun 2010, yang
memungkinkan layout dan content web tampil dengan baik di berbagai ukuran
layar baik desktop, laptop, tablet maupun smartphone. Lihat gambar 1.1.

Gambar 1.1 Responsive Web Design vs Mobile First Web Design

2 Aplikasi Mobile dengan Progressive Web App (PWA)

Di sisi lain, perkembangan aplikasi mobile (app istilah singkatnya) telah
berkembang populer sejak munculnya iPhone pertama tahun 2007 dan juga
Android. Aplikasi mobile native menawarkan berbagai fitur seperti homescreen
icon, offline availability, push notification, geolocation, dan lainnya. Pada
dasarnya, Progressive Web Application (PWA) adalah sebuah website yang
dibangun menggunakan teknologi web modern, namun dapat berlaku
seperti sebuah mobile app.
Pada tahun 2015, Google Engineer Alex Russell dan Frances Berriman
memberikan istilah Progressive Web Apps pada konsep web apps yang dapat
memberikan user experience dalam keandalan (reliability), kecepatan (speed),
dan keterlibatan pengguna (user engagement).
Google berusaha memastikan bahwa aplikasi web progresif ini dapat memberikan
pengalaman ke user seperti aplikasi native. Perbedaan aplikasi native, hybrid
mobile app dan PWA akan dijelaskan pada sub-bab berikutnya. Kata progresif
sendiri artinya menuju ke arah kemajuan secara bertingkat. PWA menggunakan
web browser modern yang akan mengikuti perkembangan fitur aplikasi native.

1.2 Kelebihan dan Kekurangan PWA

Kemunculan teknologi PWA membawa pengaruh positif pada pengembangan
aplikasi web. Namun teknologi PWA ini masih terbilang baru dan masih perlu
pengembangan lebih lanjut. Berikut ini akan dibahas kelebihan dan kekurangan
(atau keterbatasan saat ini) dari Progressive Web App.

Kelebihan PWA:
Respon seperti Mobile App
Pada PWA, semuanya di-cache didalam “App Shells” sehingga tampak seperti
aplikasi Mobile App. Application shell akan dibahas lebih lanjut pada bab
berikutnya. Dengan App Shell, Anda memiliki pilihan untuk meniru tampilan
dan nuansa aplikasi mobile reguler, lengkap dengan elemen UI, animasi seperti
yang Anda alami di aplikasi mobile yang populer. Google memastikan bahwa UI
PWA dapat dibuat benar-benar user-friendly.
Layout Responsif
PWA menggunakan responsive layout, walaupun ini bukan kelebihan utamanya.
User melakukan browsing website melalui browser yang support Service Worker
akan mengambil keuntungan dari layout PWA ini. Lihat gambar 1.2.

Bab I. Pengenalan Progressive Web App 3

 Gambar 1.2 Layout Responsif

Tersedia di Mode Offline

Setelah Anda membuka PWA di web browser Anda, maka cache situs web akan
disimpan secara otomatis di web browser Anda. Itu berarti Anda nantinya dapat
dengan mudah membuat beberapa halaman web dalam mode offline, tentu
dengan konten yang dimuat sebelumnya pada saat online, namun tanpa tampilan
“downasaur webpage” seperti pada gambar 1.3.

Gambar 1.3 Downasaur webpage

4 Aplikasi Mobile dengan Progressive Web App (PWA)

Add To Home Screen (A2HS)
Seperti bookmark page di web browser, Anda dapat menambahkan PWA ke layar
Home Anda untuk akses cepat. Anda pasti berpikir fitur ini sudah tersedia dalam
bentuk bookmark, so apa yang spesial dari A2HS? Nah yang spesial adalah PWA
bisa bekerja offline juga, mirip seperti Mobile App. Lihat gambar 1.4.

Gambar 1.4 Add To Home Screen (A2HS) Instagram

Push Notification
Setelah Anda membuka PWA di web browser Anda, maka Anda akan diminta
untuk mengijinkan pemberitahuan “Allow Push Notification” yang akan
memungkinkan Anda untuk mendapatkan pesan dan peringatan cepat dari
situs web. Ini biasanya digunakan untuk memasarkan situs web Anda dan juga
menawarkan akses cepat ke pengguna. Lihat gambar 1.5.

Bab I. Pengenalan Progressive Web App 5

 Gambar 1.5 Allow Push Notification

Keterbatasan PWA:
Perlu HTTPS.
Untuk menjalankan push notification dan “in prompt build”, aplikasi web
membutuhkan koneksi jaringan yang aman (secured TL connection/SSL).

6 Aplikasi Mobile dengan Progressive Web App (PWA)

Dukungan Web Browser Modern.
Saat ini PWA baru berjalan sempurna di Chrome dan Opera. Sedangkan Firefox
baru sebagian fitur PWA yang berjalan baik. Microsoft Edge dan Apple Safari
dikabarkan baru akan menyusul.
Dukungan Pengguna.
PWA di-design untuk mendapatkan perhatian banyak orang, namun masih perlu
banyak dukungan lagi dari pengguna aplikasi web maupun native.
PWA masih menjadi trend ke depan. Ada pergeseran aplikasi web dari pengguna
yang menginstall aplikasi native mobile phone ke aplikasi web progresif.
Dari segi biaya, pengembangan aplikasi web progresif jauh lebih efisien
dibandingkan aplikasi native. Bagi penerbit aplikasi (App Publisher), keuntungan
terbesarnya adalah penghematan biaya pengembangan dan pemeliharaan aplikasi.
Tapi, biaya perolehan pelanggan rata-rata di aplikasi native mungkin sepuluh kali
lebih besar dibandingkan dengan aplikasi web progresif.

1.3 Karakteristik PWA

Sebuah website maupun aplikasi web yang memiliki peningkatan progresif
akan menggunakan web browser modern yang telah mendukung kemampuan
PWA. Berdasarkan Google Developers, sebuah aplikasi web progresif memiliki
karakteristik sebagai berikut:
 Progressive. Bekerja di semua user, tanpa melihat web browser yang dipakai,
karena telah memiliki peningkatan progresif pada prinsipnya.
 Responsive. Cocok di segala bentuk device, (desktop, mobile, tablet, lainnya).
 Connectivity independent. Ditingkatkan dengan service worker untuk
bekerja secara offline atau pada jaringan internet kualitas rendah.
 App-like. Terasa seperti app, karena model App Shell akan memisahkan
fungsionalitas aplikasi dari kontennya.
 Fresh.Selalu up-to-date berkat adanya proses update service worker.
 Safe. Dilayani melalui HTTPS untuk mencegah pengintaian (snooping) dan
memastikan konten tidak dirusak.
 Discoverable. Teridentifikasi sebagai “Application” berkat manifest W3C
dan registrasi service worker, sehingga memungkinkan search engine untuk
mengenalinya.

Bab I. Pengenalan Progressive Web App 7

  Re-engageable. Memudahkan keterlibatan user dengan fitur push notification.
 Installable. Memungkinkan user untuk menambahkan apps yang sering
digunakan di layar home screen tanpa harus ke app store.
 Linkable. Share aplikasi dengan mudah melalui URL, tanpa repot-repot
menginstalnya.
Aplikasi PWA tidak dikemas (packaged) dan disebarkan (deployed) melalui toko
aplikasi, melainkan sebuah aplikasi web yang di-share melalui link website
yang dapat ditambahkan ke Home Screen Anda dengan persetujuan Anda,
begitu juga ijin untuk menerima notifikasi dari Web App tersebut.

1.4 Fitur PWA

Gambar 1.6 Fitur Progressive Web App

Web browser modern yang popular saat ini sudah banyak mendukung fitur-fitur
pada aplikasi web progresif, sehingga PWA dapat berlaku seperti aplikasi mobile
native. Seperti yang dideskripsikan oleh Developer Google ada 4 fitur utama
pengalaman pengguna (UX/User Experience) pada (PWA), yaitu:
 Fast. Memberikan respon yang cepat pada interaksi user dengan animasi yang
halus tanpa scrolling yang tidak perlu.
 Integrated. User tidak perlu mengakses browser, PWA memanfaatkan

8 Aplikasi Mobile dengan Progressive Web App (PWA)

 kemampuan penuh dari perangkat untuk menciptakan pengalaman yang nyata.
 Reliable. Memuat secara instan dan andal, tidak pernah menampilkan
downasaur (halaman tidak tersedia), meski kondisi jaringan yang tidak stabil.
 Engaging. Membuat user kembali lagi ke aplikasi dengan pengalaman yang
dirancang dengan indah yang terlihat dan terasa alami.
Aplikasi web progresif memberikan pengalaman pengguna yang telah
menggunakan web, merasakan beberapa hal berikut:
 Kehandalan (Reliability). Tidak peduli kondisi jaringan bagaimanapun,
PWA akan dimuat seketika. Service Worker, yang ditulis dalam JavaScript,
bertanggung jawab atas pekerjaan ini.
 Kecepatan (Speed). Selain pemuatan instan, pengguna juga mendapatkan
interaksi yang cepat. Pengguliran monoton atau animasi slow-motion tidak
dapat diterima.
 Keterlibatan (Engagement). Aplikasi web progresif benar-benar terlihat
seperti aplikasi mobile native, jadi akan alami dalam hal pengalaman
pengguna mobile. Web App Manifest menawarkan banyak opsi untuk aplikasi
Anda seperti tampilan ikon home screen, orientasi layar, halaman yang harus
dimuat pertama, dan lainnya.
Anda akan melihat bahwa PWA sangat mirip dengan aplikasi mobile native, lalu
dimana perbedaannya? Beberapa fitur native dasar bisa dilakukan oleh PWA.
Harapannya akan ada lebih banyak fitur lagi nantinya.
Berikut fitur native dasar yang dapat digunakan oleh PWA saat ini:
 Installable
 Full screen
 Offline mode
 Splash screen
 Push notification
Fitur native yang saat ini masih dalam pengembangan untuk digunakan PWA:
 Akses ke Phonebook & SMS
 Akses ke sensor hardware (NFC, Bluetooth, Proximity and Ambient Light
Censor, dan lainnya)
 Akses ke setting sistem (Alarm, Zona Waktu, dan lainnya)

Bab I. Pengenalan Progressive Web App 9

 1.5 Teknologi Pendukung PWA
Teknologi yang umum digunakan pada PWA meliputi Web App Manifest, Service
Worker, App Shell yang semuanya memerlukan web browser modern terbaru.

Web App Manifest

Web app manifest merupakan W3C specification yang mendefinisikan JSON-
based manifest untuk memberikan developer tempat untuk meletakkan
metadata dari aplikasi web, terdiri dari:
 Nama aplikasi web
 Link ke icon atau obyek gambar web app
 Target URL untuk membuka (launch) web app
 Data konfigurasi web app seperti display, orientasi, dan lainnya
Dengan setting file web manifest, developer memungkinkan pengguna untuk
menciptakan pengalaman seperti aplikasi mobile native melalui aplikasi web
progresif. Pembahasan detail tentang web app manifest akan dibahas tersendiri.

Service Worker
Aplikasi mobile native memberikan pengalaman yang kaya dan kinerja tinggi,
namun membutuhkan ruang penyimpanan (ROM), kurangnya real-time update,
dan visibilitas mesin pencari yang rendah. Sementara aplikasi web tradisional
tidak membutuhkan native compiled executable (seperti .exe di Windows, .apk di
Android atau .ips di IOS), namun sangat tergantung pada koneksi jaringan yang
tidak dapat diandalkan dan berpotensi lambat. Disinilah service worker berperan
untuk memberikan aplikasi web progresif yang terbaik. Pembahasan lebih lanjut
tentang service worker akan dijelaskan pada bab selanjutnya.

Arsitektur Application Shell

PWA menggunakan pendekatan arsitektur yang dinamakan App Shell Model.
Supaya loading web cepat, service worker menyimpan antarmuka pengguna dasar
(basic UI) atau “shell” dari aplikasi web desain responsif. Shell ini menyediakan
bingkai statis di awal, tata letak (layout) atau arsitektur di mana konten dimuat
secara progresif serta dinamis. Ini memungkinkan user untuk terlibat dengan
aplikasi dalam kondisi jaringan web bagaimanapun.

10 Aplikasi Mobile dengan Progressive Web App (PWA)

Secara teknis, shell adalah bundel kode yang disimpan secara lokal di cache
browser perangkat mobile. Pembahasan lebih lanjut tentang application shell
ini akan dijelaskan pada bab selanjutnya.

Web Browser Modern

Web browser popular saat ini, seperti Google Chrome, Mozilla Firefox, Opera,
Samsung Internet, Apple Safari dan Microsoft Edge sudah mulai mendukung
teknologi web progresif. Di website Jake Archibald11 https://jakearchibald.github.
io/isserviceworkerready/ Anda dapat melihat versi web browser apa saja yang
dapat menjalankan PWA dengan sempurna. Untuk ini sebaiknya Anda selalu
melakukan update versi web browser Anda. Lihat gambar 1.7.

Gambar 1.7 Website isserviceworkerready

1.6 Kenapa Perlu Membangun Aplikasi Web Progresif?

Dari sejumlah fitur PWA yang telah dijelaskan di atas, Anda pasti akan memilih
untuk membangun aplikasi mobile dengan PWA. Berikut ini beberapa alasan
mengapa Anda perlu membangun aplikasi web progresif:

Bab I. Pengenalan Progressive Web App 11

 Anda tidak perlu repot melakukan integrasi ke App Store
Apa yang biasanya dilakukan oleh developer saat berurusan dengan app stores?
Tentu banyak langkah-langkah yang harus disiapkan. Membangun PWA dapat
menghindari urusan ini, cukup fokus pada kualitas produk yang dihasilkan. Yang
perlu Anda lakukan adalah hosting produk Anda ke web server.
Anda pernah mendengar tentang aturan-aturan yang dibuat oleh iOS dan Android
untuk proses approval, membangun PWA tidak ada aturan itu. Jadi, Anda akan
dapat merilis produk Anda dengan lebih cepat.

Aplikasi Anda tidak akan memiliki batas perangkat

Solusi mobile-friendly saat ini menjadi sorotan penting diluar keterbatasan
website. Namun di PWA, hal terpenting adalah dapat bekerja seperti mobile app
di semua perangkat, baik itu smartphone, PC desktop, laptop atau tablet. Fitur ini
tidak hanya memberikan pengalaman mobile app ke semua user Anda tetapi juga
membantu merek Anda tetap konsisten dalam lingkungan web.

PWA tidak butuh banyak ruang penyimpanan di perangkat

Dengan semua penawaran dari App Store, jumlah aplikasi di perangkat Anda bisa
jadi semakin banyak. Mempertimbangkan hal ini, produk PWA Anda memiliki
keuntungan yang sangat besar, tidak akan memakan banyak ruang penyimpanan
saat dihosting di server web. Jika pengguna ingin menginstal aplikasi Anda di
home screen, itu tidak memerlukan penyimpanan sebesar aplikasi App Store dan
juga tidak memerlukan pembaruan rutin.

Anda tidak akan kesulitan membagikan Aplikasi Anda

Manfaat ini dimungkinkan berkat penyimpanan server web. User tidak perlu
pergi ke App Store untuk mencari aplikasi Anda di sana, lalu men-download
atau meng-install-nya agar aplikasi dapat dipakai, user cukup membutuhkan satu
alamat URL. Jadi, aplikasi Anda akan tersebar lebih cepat, karena orang-orang
dapat membagikan alamat ini melalui perangkat apapun.

PWA memiliki kemampuan SEO

Untuk keperluan promosi, aplikasi web progresif memiliki kemampuan SEO.

12 Aplikasi Mobile dengan Progressive Web App (PWA)

PWA dapat di indeks lebih detail daripada aplikasi native tradisional. Menurut
laporan yang diberikan oleh Connexity, hampir 60% pencarian dilakukan
melalui perangkat mobile. Jadi, produk PWA Anda memiliki kelebihan
untuk optimasi SEO daripada aplikasi mobile native.

1.7 Perbedaan Aplikasi Mobile Native, Hybrid dan PWA

Pertama, mari kita lihat definisi dari Aplikasi Native. Menurut Techopedia,
Aplikasi mobile native adalah aplikasi smartphone yang dibuat dalam
bahasa pemrograman tertentu, seperti Swift dan Objective C untuk iOS,
Java untuk Android atau .Net untuk platform Windows.
Aplikasi mobile native memberikan kinerja cepat dan tingkat keandalan yang
tinggi. Aplikasi mobile native juga memiliki akses ke berbagai perangkat
smartphone, seperti kamera, address book dan lainnya. Selain itu, user dapat
menggunakan beberapa aplikasi tanpa koneksi internet.
Namun, jenis aplikasi ini mahal untuk dikembangkan, karena terikat pada satu
jenis sistem operasi, sehingga perusahaan umumnya membuat versi duplikat dari
aplikasi native yang berfungsi pada platform lain. Sebagian besar aplikasi video
game untuk perangkat mobile adalah aplikasi mobile native.
Hybrid Mobile App adalah jenis aplikasi mobile yang memiliki kemampuan
cross-platform, dapat berjalan di berbagai jenis perangkat, baik iOS,
Android, Windows, atau sistem operasi lainnya. Aplikasi Mobile Hybrid di
download dari App Store, sama seperti Aplikasi Mobile Native.
Pemrograman aplikasi hybrid menggunakan teknologi web, seperti HTML, CSS,
Javascript yang berjalan di webview (engine browser yang berjalan di dalam
aplikasi mobile).
Untuk mengakses ke perangkat smartphone, seperti kamera, address book dan
lainnya, aplikasi hybrid menggunakan plugin native atau library sesuai dengan
jenis perangkatnya.
Library framework Cordova, Ionic, Xamarin, dan sejenisnya banyak digunakan
untuk membuat Hybrid Mobile Apps.
Progressive Web App seperti telah dijelaskan sebelumnya, merupakan aplikasi
web dengan karakteristik seperti aplikasi mobile native.

Bab I. Pengenalan Progressive Web App 13

 Berikut ini ringkasan perbandingan antara Native Apps, Hybrid Apps dan PWA:

Fitur PWA Hybrid App Native App

Basis Kode 1 1 Tergantung Device
Update Server Side Ya Ya Tidak
Teknologi Web Ya Ya Terbatas
Design Responsive Ya Ya Tidak
Gestur Sentuh Ya Ya Ya
Serasa App Ya Ya Ya
Fungsi Native Ya Ya Ya
Kinerja Cepat Cukup Cepat
Kemampuan Offline Ya Ya Ya
User Experience Cukup Cukup Penuh
Biaya Pengembangan Minim Cukup Tinggi
Proses Pengembangan Cepat Cukup Lama
Tingkat kesulitan Mudah Cukup Tinggi
Deploy ke App Store Tidak Ya Ya

Tabel 1.1 Perbandingan Fitur PWA, Hybrid App dan Native App

Fitur PWA Native App

Kemampuan Offline Ya Ya
Navigasi secara Mobile Ya Ya
Push Notification Ya Ya
Akses Home Screen Ya Ya
Perlu Download Tidak Ya
Perlu Toko Aplikasi Tidak Ya
Share dengan Link YA Tidak
Di-Index oleh Google SEO Ya Tidak
Ukuran aplikasi Besar Tidak Ya
Tidak perlu update Ya Tidak

Tabel 1.2 Perbandingan Fitur PWA dan Native App

14 Aplikasi Mobile dengan Progressive Web App (PWA)