membangun aplikasi mobile dengan progressive web app (pwa) filesatu aplikasi mobile yang dapat...

dengan Progressive Web App (PWA)

CV. LOKOMEDIA

HENDRA SANTOSO

Membangun Aplikasi Mobile

ii

Membangun Aplikasi Mobile dengan Progressive Web App (PWA)Perpustakaan Nasional : Katalog Dalam Terbitan (KDT)Penulis : Hendra SantosoMembangun 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 HakimCover : Subkhan AnshoriLayout : Lukmanul Hakim

Diterbitkan pertama kali oleh :CV. LOKOMEDIAJl. Jambon, Perum. Pesona Alam Hijau 2 Kav. B-4, Kricak Yogyakarta 55242.

email : [email protected] : 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.

iii

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

[email protected]

iv

Buku ini kudedikasikan kepada pendamping hidupku,

dan kedua malaikat kecilku…

v

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

vi

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

vii

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

viii

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

BAB I

Pengenalan Progressive Web App

Aplikasi Mobile dengan Progressive Web App (PWA)2

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

Bab I. Pengenalan Progressive Web App 3

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 PWAKemunculan 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.


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


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.


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).


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 PWASebuah 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.


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


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)


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.


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:


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.


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 PWAPertama, 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.


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

Fitur PWA Hybrid App Native AppBasis Kode 1 1 Tergantung DeviceUpdate Server Side Ya Ya TidakTeknologi Web Ya Ya TerbatasDesign Responsive Ya Ya TidakGestur Sentuh Ya Ya YaSerasa App Ya Ya YaFungsi Native Ya Ya YaKinerja Cepat Cukup CepatKemampuan Offline Ya Ya YaUser Experience Cukup Cukup PenuhBiaya Pengembangan Minim Cukup TinggiProses Pengembangan Cepat Cukup LamaTingkat kesulitan Mudah Cukup TinggiDeploy ke App Store Tidak Ya Ya

Tabel 1.1 Perbandingan Fitur PWA, Hybrid App dan Native App

Fitur PWA Native AppKemampuan Offline Ya YaNavigasi secara Mobile Ya YaPush Notification Ya YaAkses Home Screen Ya YaPerlu Download Tidak YaPerlu Toko Aplikasi Tidak YaShare dengan Link YA TidakDi-Index oleh Google SEO Ya TidakUkuran aplikasi Besar Tidak YaTidak perlu update Ya Tidak

Tabel 1.2 Perbandingan Fitur PWA dan Native App

membangun aplikasi mobile dengan progressive web app (pwa) filesatu aplikasi mobile yang dapat...

Documents