Berkenalan dengan Progressive Web Apps

Pernahkah terbayangkan olehmu aplikasi berbasis web dapat di-install atau dipasang pada suatu perangkat sehingga memiliki kemampuan layaknya aplikasi native? Hal tersebut bisa dilakukan dengan mengimplementasikan progressive web apps pada aplikasi berbasis web yang kita miliki. Apa itu? Yuk, kita bahas lebih lanjut.

Apa Itu Progressive Web Apps?

Istilah progressive web apps atau bisa disingkat menjadi PWA pertama kali diperkenalkan oleh Alex Russel pada tahun 2015. PWA adalah aplikasi web yang menawarkan fitur dan pengalaman layaknya aplikasi native (platform-specific app).

Dengan mengimplementasikan progressive web apps, aplikasi berbasis web memungkinkan untuk bisa di-install atau dipasang pada perangkat sehingga memiliki ikon pada home screen, berfungsi dengan baik secara offline, hingga melakukan push notification.

💻 Mulai Belajar Pemrograman

Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional.

Daftar Sekarang

Proses pemasangan progressive web apps pada perangkat pun sangat sederhana. Untuk mengetahui apakah web ini dapat dipasang atau tidak, coba kamu kunjungi website yang ingin dituju menggunakan browser. Lalu, coba perhatikan ikon seperti gambar di bawah ini yang dicontohkan pada salah satu e-commerce terbesar di Indonesia, yaitu Tokopedia.

Lalu, jika kita tekan tombol install, aplikasi berbasis web tersebut akan terpasang secara singkat dan langsung memiliki behavior layaknya aplikasi native, seperti gambar di bawah ini.

Menarik, bukan? Hal ini menjadi sangat menarik dan luar biasa karena kita dapat membuat aplikasi berbasis web memiliki kemampuan layaknya aplikasi native tanpa perlu merombak ulang source code dan tetap pada lingkup bahasa pemrograman JavaScript. Mari kita simak lebih lanjut.

Kelebihan dan Kekurangan Progressive Web Apps

Di mana ada kelebihan, tentu ada kekurangan. Pada bagian sebelumnya, kita sudah melihat beberapa fitur atau kemampuan yang ditawarkan oleh progressive web apps. Sekarang kita coba bahas kelebihan dan kekurangannya sehingga bisa mempertimbangkan untuk mengimplementasikan progressive web apps atau tidak.

Kelebihan

Tidak membutuhkan platform distribusi aplikasi, seperti App Store atau Play Store. Jika aplikasi native memerlukan platform distribusi, PWA tidak memerlukan hal tersebut. Pengguna cukup mengakses domain seperti biasa pada website yang ingin dituju dan nanti akan muncul opsi untuk melakukan instalasi. Dengan begitu, aplikasi berbasis web akan dipasang dan muncul ikonnya pada home screen. Mudah, bukan?

Tidak perlu melakukan update atau pembaharuan. Kalau kita menggunakan aplikasi native, biasanya akan ada update secara berkala melalui platform distribusinya masing-masing, lalu akan melakukan proses download dan pembaharuan. Nah, PWA tidak perlu melakukan hal tersebut, kita cukup membuka aplikasi web yang sudah terpasang dan lakukan refresh. Dengan begitu, aplikasi akan ter-update secara otomatis.

Bisa memanfaatkan beberapa fitur native. Seperti yang sudah dibahas sebelumnya, PWA memungkinkan kita untuk bisa memanfaatkan beberapa fitur aplikasi native, seperti home-screen installation, push notification, offline mode, background sync, dan masih banyak lagi. Untuk mengetahui kemampuan apa saja yang bisa kita manfaatkan, kamu bisa cek di laman What web can do today.

Kekurangan

Tidak semua fitur native bisa dimanfaatkan. Kemampuan progressive web apps dalam memanfaatkan fitur native tidak sebanyak dan sehebat aplikasi native itu sendiri. Ada beberapa keterbatasan dalam menggunakan beberapa fitur yang sejauh ini hanya bisa digunakan oleh aplikasi native.

Tidak didukung oleh browser lama. Progressive web apps tetap mengandalkan browser secara under the hood maka memastikan browser yang digunakan sudah mendukung PWA adalah hal penting.

Bagian-Bagian Penting dari Progressive Web Apps

Setelah memahami apa itu progressive web apps beserta kelebihan dan kekurangannya, sekarang kita coba pelajari lebih dalam terkait bagian-bagian penting dari progressive web apps. Ketika kita melakukan implementasi progressive web apps pada aplikasi web, ada beberapa bagian penting yang perlu diperhatikan. Mari kita bahas.

Application Shell

Bagian ini biasanya merupakan kerangka dasar dari aplikasi kita, biasanya bersifat statis dan jarang terjadi perubahan, seperti navigasi, sidebar, footer, bahkan aset-aset penting yang nantinya akan disimpan pada cache.

Dengan begitu, kerangka dasar ini dapat langsung ditampilkan secara instan dan juga dapat ditampilkan ketika perangkat dalam kondisi offline. Coba kita lihat contohnya pada platform sosial media X yang sudah mengimplementasikan progressive web apps.

Jika kita lihat, perangkat sedang dalam keadaan offline, tetapi web tersebut masih bisa terbuka dan menampilkan halaman meski kontennya tidak muncul. Hal tersebut karena application shell sudah disimpan pada cache sehingga walau dalam keadaan offline, aplikasi web tetap bisa terbuka dengan baik.

Web App Manifest

Bagian ini berisi konfigurasi-konfigurasi yang akan menentukan cara aplikasi web ini tampil pada sisi perangkat pengguna. Contohnya, bagian ini menyimpan konfigurasi ikon, judul dan deskripsi aplikasi, warna, jenis display yang ingin digunakan, dan masih banyak lagi.

Service Worker

Ini bisa disebut juga menjadi salah satu bagian yang paling penting dan menjadi kunci dari progressive web apps itu sendiri. Service worker adalah script berbahasa JavaScript yang menjadi service antara network dengan perangkat dan berjalan secara background.

Ia mengatur banyak hal, mulai dari registrasi berkas HTML yang ingin dijadikan application shell hingga mengatur network strategy ketika melakukan fetching API. Agar lebih jelas, mari kita coba lihat gambaran service worker bekerja.

Nah, pada gambar tersebut kita dapat melihat bahwa service worker menjadi bagian yang mengatur flow request dan response. Salah satu kemampuan yang menarik dari service worker adalah kita mampu untuk mengatur strategi ketika berkomunikasi dengan internet.

Contohnya, kita ingin mendapatkan data dari cache terlebih dahulu. Selanjutnya, jika tidak ada baru melakukan fetching data. Pilihan lainnya adalah selalu mendapatkan data langsung dari internet. Semua itu bisa dilakukan dengan memanfaatkan strategi-strategi sebagai berikut.

Cache Only
Network Only
Cache First
Network First
Stale While Revalidate

Belajar Progressive Web Apps Mulai Dari Mana?

Bagi kamu yang penasaran sekali untuk belajar progressive web apps atau mungkin PWA merupakan solusi yang sedang dibutuhkan saat ini, tidak perlu khawatir. Mengapa? Karena Dicoding sudah memiliki susunan materi A–Z terkait PWA. Kamu akan mulai belajar dari pemahaman dasar terkait PWA hingga yang cukup kompleks, seperti memanfaatkan fitur native push notification.

Kelasnya kamu dapat temukan pada Menjadi Front-End Web Developer Expert. Dengan adanya kelas ini, kamu tidak perlu bingung dan mencari lagi materi-materi PWA. Seluruh materi sudah disusun sedemikian rupa agar bisa dipahami dengan baik dan tersusun.

Jadi tunggu apalagi? Ayo belajar kelasnya dan eksplorasi kemampuan PWA pada aplikasi berbasis web.

Kesimpulan

Jadi, PWA adalah suatu kemampuan untuk bisa mengakses fitur native dalam perangkat yang dapat kita implementasikan pada aplikasi berbasis web saat ini tanpa perlu menulis kembali kode yang ada. Dengan kata lain, ini seperti memberikan kemampuan tambahan pada aplikasi web yang ada saat ini untuk bisa mengakses fitur native dalam perangkat.

Nah, pertanyaannya apakah semua web harus memiliki kemampuan PWA? Jawabannya tidak, disesuaikan saja dengan kebutuhan aplikasi webnya, apakah memerlukan PWA atau tidak. Jika iya, maka implementasikan dan jika tidak, maka tidak perlu.

Di sisi lain, hal yang perlu diperhatikan adalah bagaimanapun PWA ini memiliki keterbatasan dalam memanfaatkan dan mengakses fitur native jika dibandingkan dengan aplikasi native yang sesungguhnya.

Jadi, PWA bersifat alternatif, bukan mengganti. Jika aplikasi native terlalu berlebihan untuk kebutuhan saat ini, kita tetap dapat menggunakan beberapa fitur native dengan adanya PWA.