Beberapa developer sekarang terlibat dalam meningkatkan kinerja website dengan menggunakan desain web yang responsif.
Pada April 2015, Google mengumumkan "Mobilegeddon" yang merupakan sistem baru dari Google untuk lebih memprioritaskan situs web yang responsif pada hasil mesin pencarian google di perangkat mobile.
Februari 2016, fitur AMP (Accelerated Mobile Pages) mulai hadir juga pada hasil mesin pencarian google di perangkat mobile, AMP dioptimalkan untuk penjelajahan web seluler dan dimaksudkan untuk membantu memuat halaman web lebih cepat.
Mulai tahun 2021, fitur PWA mulai mendukung pada banyak browser, seperti: Google Chrome, Apple Safari, Firefox for Android, Microsoft Edge, dan lainnya.
Ini menunjukkan bahwa teknologi web terus berkembang. Dan pada kesempatan kali ini, kita akan berkenalan sama PWA (Progressive Web Apps).
Apakah anda pernah melihat spanduk "Tambahkan ke Layar Utama" saat membuka website?
Ketika mengklik spanduk tersebut, aplikasi akan terinstal di latar belakang, dan sekarang website tersebut berubah menjadi aplikasi.
Saat membuka aplikasi tersebut, secara visual akan terasa sama seperti membuka website tersebut melalui browser, tapi kini membukanya tanpa melalui browser.
Itulah pandangan ringkas dari PWA, tapi bukan itu saja sisi terbaiknya, mari kita selami lebih jauh lagi.
Apa itu PWA?
PWA pada dasarnya hanyalah sebuah website, dibangun menggunakan HTML, CSS, JavaScript, dan WebAssembly, yang secara umumnya sudah dapat berjalan lintas platform selama memiliki browser, seperti: Windows, Linux, Android, ChromeOS, macOS, iOS.
Mungkin dibenak kalian jika mendengar kata "website" sudah pasti sifatnya harus "online", benar?
Disini PWA akan merubah cara pandang kita yang sebenarnya website itu tidak mesti online, dan bisa diakses secara offline.
Bagaimana bisa?
Inilah teknologi web baru bernama PWA (Progressive Web Apps) yang dapat memberikan pengalaman layaknya aplikasi pada umumnya.
Kenapa perlu menggunakan PWA?
Kita ambil contoh sederhana, jika saya meminta anda membuka YouTube di smartphone anda, apakah lebih memilih membuka YouTube di aplikasi asli (native) atau browser?
Saya tebak, kemungkinan anda akan lebih memilih menggunakan aplikasi native daripada melalui browser.
Dan faktanya kebanyakan pengguna lebih sering membuka aplikasi native daripada browser karena kemudahan dalam mengaksesnya.
Hadirnya PWA inilah menjadi sebuah solusi cerdas pada kasus tersebut, karena PWA seperti gabungan antara website dan aplikasi native.
Penggunaannya juga sangat mudah, anda tidak perlu mengunduh dan menginstal aplikasinya dulu, cukup akses melalui browser seperti biasa, sehingga akan lebih menghemat penyimpanan anda.
Dan jika diperlukan, anda dapat menginstalnya agar terlihat seperti aplikasi pada umumnya.
Sebagai pengguna
Ini akan memudahkan dalam mengakses website anda dengan tersedianya icon aplikasi di layar utama.
Sebagai developer
Ini akan sangat membantu dalam proses pembuatan dan pengembangan aplikasi.
Anda tidak perlu membuat program secara terpisah untuk platform Windows, Linux, Android, ChromeOS, macOS, maupun iOS.
Cukup buat saja website dan tambahkan fitur PWA, maka anda akan mendapatkan semuanya.
Sebagai pebisnis
Ini akan sangat menghemat pengeluaran dan waktu, karena anda tidak harus mengerjakan banyak developer untuk membuat aplikasi pada platform yang berbeda-beda.
Perbedaan Website, Aplikasi Native, Website + PWA?
Agar lebih mudah memahaminya, berikut perbandingan antar ketiganya :
Website
1. Dapat berjalan semua platform
2. Wajib online
3. Update otomatis
4. Fitur terbatas
5. Biaya development murah
Aplikasi Native
1. Hanya berjalan platform tertentu
2. Bisa offline
3. Update manual
4. Fitur sangat lengkap
5. Biaya development mahal
Website + PWA
1. Dapat berjalan semua platform
2. Bisa offline
3. Update otomatis
4. Fitur lebih lengkap dari Web App biasa
5. Biaya development murah
Karakteristik PWA
Setelah mengenal PWA, berikut adalah karakteristik PWA yang perlu anda ketahui :
Progresif
Sesuai namanya, P-W-A, Progressive Web Apps. PWA bersifat progresif, yang berarti dapat diakses semua user dengan mudah.
Tidak peduli user memakai perangkat apapun, dari Android? bisa, dari iOS? bisa, dari Windows? Linux? macOS? ChromeOS? semua bisa.
Dan, dari browser manapun juga bisa, hal ini karena PWA pada dasarnya sebuah website dengan fitur tambahan, jadi apapun fitur yang ada di website juga bisa dilakukan oleh PWA.
Responsif
PWA pastinya responsif, dapat tampil dengan baik di perangkat manapun dan ukuran layar berapapun. Baik dari mobile, tablet, desktop dapat bekerja sebagaimana mestinya.
Tidak tergantung koneksi internet
Dengan bantuan Service Workers, PWA dapat menyimpan atau men-cache beberapa resources atau assets agar dapat bekerja secara offline.
Hal ini dapat meningkatkan waktu pemuatan dengan menyajikan tampilan statis dan tidak perlu mengambil langsung dari server, atau bahkan memuat keseluruhan secara offline juga bisa dilakukan.
Pembaruan otomatis
Hampir mirip dengan karakteristik website pada umumnya, namun dengan cara yang berbeda.
Service Workers terdapat fitur Background Synchronization API, dengan memanfaatkan fitur ini, aplikasi PWA dapat memperbarui dirinya dengan otomatis jika perangkat terhubung jaringan internet untuk mengambil resources atau assets terbaru dari server.
Instalasi
Jika website memiliki fitur PWA, maka akan tampil notifikasi popup yang menawarkan menginstal aplikasi saat membuka website tersebut.
Sehingga tidak lagi bergantung dengan Apps Store untuk mendownload dan menginstal aplikasi.
Terasa seperti aplikasi
PWA dirancang agar dapat berperilaku layaknya aplikasi native pada umumnya, seperti gaya interaksi, navigasi, icon launcher di home screen, memiliki splash screen, bekerja secara offline, bahkan push notifications.
Linkable
PWA dapat dengan mudah dibagikan orang lain tanpa perlu repot-repot mengunduh dan memasang aplikasi dari Apps Store.
Cukup bagikan url website, maka orang lain dapat langsung menggunakannya melalui browser.
Mudah ditemukan
Dan yang paling penting, PWA dapat ditemukan di mesin pencari, tidak ada lagi kesulitan untuk mencari aplikasi PWA anda.
Hal ini karena PWA merupakan sebuah website, jadi kita dapat memanfaatkan SEO supaya tampil teratas di mesin pencari.
Komponen PWA
Untuk membangun website PWA, setidaknya memiliki 3 komponen berikut agar dapat berjalan semestinya.
Service Workers
Service Workers merupakan Javascript API yang bertindak sebagai server proxy yang berada diantara website, browser, dan jaringan.
Dengan ini, website dapat memungkinkan digunakan secara offline, menerima push notifications, dan memperbarui di latar belakang bahkan website tidak sedang dibuka.
Website juga dapat dimuat lebih cepat karena akan mengambil asset website pada cache yang tersimpan, cache disimpan ketika membuka web PWA pertama kali.
File manifest
File manifest adalah sebuah file JSON yang berisi konfigurasi dan informasi aplikasi, seperti nama aplikasi, deskripsi, warna tema, tampilan UI, icon aplikasi, dan lainnya.
HTTPS
PWA membutuhkan protokol HTTPS yang aman, digunakan Service Workers untuk mencegat permintaan jaringan dan dapat mengubah tanggapan, semua itu dilakukan pada sisi client.
Cara kerja PWA
Mari kita ambil contoh pada aplikasi native, saat kita mengunduh dan memasangnya, asset penting seperti elemen UI dan beberapa data lainnya akan disimpan pada perangkat.
Maka dari itu, aplikasi native dapat dijalankan tanpa adanya jaringan internet.
Sedangkan PWA menggunakan pendekatan yang sama, saat kita membuka website PWA di pertama kalinya, beberapa asset seperti file HTML, CSS, JS, gambar, dan lainnya akan disimpan dalam cache.
Service Workers akan menangani panggilan jaringan agar tidak perlu mengambil asset berulang pada server, dan mengambil asset pada cache yang tersimpan.
Maka dari itu, aplikasi PWA juga dapat dijalankan tanpa adanya jaringan internet.
Studi kasus web yang menggunakan PWA
JD.ID
JD.ID merupakan platform e-commerce yang telah beroperasi lebih dari 350 kota di Indonesia, menyediakan berbagai produk seperti smartphone, laptop, pakaian, aksesoris, peralatan rumah tangga, produk olahraga, dan sebagainya.
Pengguna situs web JD.ID kerap memiliki sebuah masalah jaringan internet yang cenderung tidak stabil di Indonesia. Bukan hanya itu saja, pengguna yang telah mengunjungi situs web JD.ID juga tidak mengunduh aplikasi iOS/Android yang telah tersedia, padahal pada aplikasi native JD.ID menawarkan pengalaman pengguna yang lebih baik.
Melihat dari masalah ini, tim JD.ID menggunakan praktik terbaik PWA untuk membantu membangun UX website yang lebih baik layaknya sebuah aplikasi native, selain itu untuk meningkatkan keterlibatan dan mengatasi masalah jaringan internet yang lambat bagi pengguna.
Strategi caching PWA yang mereka gunakan sebagai berikut :
- Jaringan dulu, cache kemudian
Strategi ini digunakan mereka untuk mendapatkan respon dari jaringan dulu, setelah respon diterima akan diteruskan ke browser dan disimpan pada cache.
Jika permintaan jaringan gagal akibat jaringan yang buruk misalnya, maka akan menggunakan cache terakhir yang tersimpan.
Hal ini digunakan mereka pada halaman beranda JD.ID yang bahkan dapat diakses secara offline, setidaknya pernah berkunjung sekali sebelumnya.
- Cache dulu, jaringan kemudian
Strategi ini digunakan mereka untuk selalu menggunakan cache yang telah tersimpan sebelumnya.
Jika tidak ada cache yang tersimpan, baru menggunakan jaringan untuk mendapatkan respon, ditampilkan ke browser, dan disimpan pada cache.
Hal ini digunakan mereka untuk sumber daya statis yang tidak perlu diambil berulang seperti halaman offline, file css, js, gambar, dan lainnya.
Dengan begitu, akan menghemat permintaan jaringan dan mempercepat pemuatan halaman.
- Hanya jaringan
Strategi ini digunakan mereka untuk selalu menggunakan jaringan, hal ini digunakan mereka pada halaman keranjang dan pembayaran yang membutuhkan akurasi data yang tinggi dan tidak mungkin dilakukan secara offline.
Clipchamp
Clipchamp merupakan editor video online yang telah digunakan lebih dari 12 juta pengguna di seluruh dunia, tidak perlu keahlian khusus untuk menjadi video editor di Clipchamp karena penggunaannya yang mudah
Clipchamp menawarkan solusi sederhana untuk membuat video, berawal dari pengguna yang merasa frustasi dalam mengedit video karena perangkat lunak pengeditan yang begitu kompleksnya.
Maka dari itu, Clipchamp membuat editor video online yang mudah digunakan dan tidak perlu diinstal, cukup akses melalui browser maka siap digunakan.
Namun dalam membangun Clipchamp ini terdapat suatu masalah, pemrosesan file video biasanya hingga berskala Gigabyte, mengunggah file media sebesar itu membutuhkan waktu yang lama dan memberi pengalaman yang buruk bagi pengguna.
Dari alasan tersebut dan mempertimbangkan bandwidth jaringan, Clipchamp mengesampingkan solusi berbasis cloud, dan beralih solusi sepenuhnya dalam browser menggunakan PWA yang dimana semua pemrosesan video dilakukan secara lokal.
Betapa terkejutnya, keterlibatan pengguna dalam menginstal aplikasi PWA Clipchamp ini meningkat sebesar 97% dalam waktu 5 bulan sejak peluncuran aplikasi PWA Clipchamp.
Pinterest merupakan mesin pencarian visual (foto atau gambar) untuk menemukan ide seperti resep makanan, dekorasi rumah, inspirasi gaya, dan lainnya.
Dari hasil analisis pengguna Pinterest yang melalui website, mereka menyadari pengalaman akses web Pinterest yang lambat dan hanya berhasil mengonversi 1% pengguna yang mendaftar, login, atau memasang aplikasi native.
Lebih dari 3 bulan, Pinterest mencoba membangun ulang web mereka menggunakan PWA dengan React, Redux, dan Webpack.
Pembangunan web ulang mereka memberikan peningkatan drastis terutama pada masalah kinerja.
Sebelumnya web Pinterest membutuhkan waktu 23 detik untuk sepenuhnya menjadi interaktif, dengan web baru mereka sekarang hanya membutuhkan 5,9 detik, dan pada kunjungan berulang hanya membutuhkan waktu 3,9 detik saja.
Hal ini berkat caching Service Worker dari JavaScript, CSS, asset statis, dan beberapa penyesuaian lainnya.
Kelebihan PWA
Berikut ini adalah kelebihan website menggunakan PWA.
Jangkauan pasar
Website sangat baik dalam jangkauan pasar yang dapat diakses dimana saja dan platform apa saja.
Namun terkadang website menjadi sebuah masalah bagi pengguna dengan koneksi internet yang buruk, dan PWA merupakan solusi terbaik dalam mengatasi masalah ini.
Lebih kecil dan lebih cepat
Aplikasi native biasanya membutuhkan banyak penyimpanan perangkat, semakin banyaknya aplikasi menjadikan perangkat lebih lambat.
Hal ini tidak menjadi masalah padahal perangkat high end, namun akan membuat pengguna frustasi pada perangkat low end akibat penyimpanan yang penuh.
PWA yang berbasis web ini dapat mengatasi masalah tersebut, pengguna tidak mewajibkan menginstal dulu, namun dapat diakses secara langsung melalui browser.
Dengan begitu, tidak membutuhkan banyak penyimpanan juga dapat diakses lebih cepat karena tidak perlu mengunduh dan menginstal.
Kemampuan offline
Aplikasi PWA mampu bekerja pada koneksi internet yang buruk, bahkan tanpa koneksi internet sekalipun.
Terlebih lagi, aplikasi PWA akan tetap berfungsi bahkan server sendiri itu mati, sehingga pengguna tetap dapat mengaksesnya.
Tidak tergantung Apps Store
Agar aplikasi native dapat dilihat dan didownload oleh pengguna, aplikasi native harus di publikasikan di Apps Store, sayangnya tidak semua aplikasi dapat dipublikasikan di Apps Store karena aturan yang ketat.
Bahkan jika ingin memperbarui aplikasi native di Apps Store, tetap akan ada proses peninjauan yang dapat memakan waktu berhari-hari, sehingga tidak dapat sesegera mungkin memperbarui aplikasi.
Berbeda dengan website, kamu dengan bebas mempublikasikan website di internet, tidak ada batasan untuk ini.
Dan jika kamu memperbarui website, pengguna juga langsung mendapatkan konten terbaru secara real-time.
Push Notifications
Salah satu yang menjadi nilai jual pada aplikasi native berkat adanya fitur push notifications.
Push notifications memungkinkan pengguna berinteraksi pada aplikasi dengan mudah dan cepat. Hebatnya PWA juga menyediakan fitur ini.
Kekurangan PWA
Walau PWA telah menyediakan fitur-fitur hebat seperti yang saya sebut diatas, PWA tetap tidak dapat menyaingi aplikasi native dalam aspek fitur perangkat seperti sidik jari dan lainnya, sehingga tidak dapat memaksimalkan semua fitur yang ada.
Cara membuat website PWA
Untuk memulai membangun website PWA tidaklah sulit yang dibayangkan, berikut ini saya bagikan 2 panduan yang dapat anda ikuti.
Untuk memulai cepat, anda dapat mengikuti panduan berikut untuk membangun website PWA sederhana.
Untuk mempelajari membangun website PWA yang lebih kompleks, anda dapat mengikuti panduan resmi dari Google berikut.
Apakah bisa diterapkan di blogger?
Ya, tentu bisa.
Anda dapat mengikuti panduan diatas untuk membangun blog PWA di blogger, namun ada beberapa penyesuaian yang harus dilakukan agar dapat bekerja semestinya.
Jika anda tidak mau repot, anda dapat menggunakan template blogger Theme62.
Apa itu Theme62?
Theme62 adalah website penyedia template blogger terbaik dengan fitur yang terinspirasi dari WordPress, memiliki dukungan banyak plugin dan konfigurasi template yang mudah tanpa menyentuh kode apapun.
Template blogger Theme62 memiliki fitur plugin Progressive Web Apps (PWA), sehingga anda dapat menerapkan PWA di blog anda dengan mudah dalam sekali klik.
Penutup
Teknologi web yang terus berkembang telah membantu kita dalam menangani berbagai masalah.
Salah satunya adalah PWA yang membantu kita membangun website layaknya sebuah aplikasi, mengatasi masalah jaringan internet yang lambat, menghemat biaya dan waktu proses pengembangan, dan masih banyak lainnya.
Semoga artikel ini bermanfaat, dan sampai bertemu kembali di artikel selanjutnya.
Salam hangat,
Theme62.
Referensi :
- https://en.wikipedia.org/wiki/Mobilegeddon
- https://en.wikipedia.org/wiki/Accelerated_Mobile_Pages
- https://en.wikipedia.org/wiki/Progressive_web_app
- https://developer.mozilla.org/en-US/docs/Web/API/Background_Synchronization_API
- https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
- https://developer.mozilla.org/en-US/docs/Web/Manifest
- https://www.geeksforgeeks.org/progressive-web-apps-benefits-components-and-how-it-works
- https://www.dewaweb.com/blog/progressive-web-apps
- https://web.dev/jdid
- https://web.dev/clipchamp
- https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154
- https://avengering.com/en/why-use-the-pwa-what-are-advantages-and-disadvantagesof-pwa-part-2