Kunci sukses online ialah kecepatan. Tak terkecuali ketika membangun sebuah laman yang akan menyasar pengguna mobile. Karena, akses yang lambat hanya akan membangun pengunjung meninggalkan laman Kamu.
Diantara solusi bagi membangun akses laman lebih cepat ialah PWA (Progressive Web Apps). Beberapa dari Kamu mungkin baru mendengar istilah ini. Jangan khawatir. Kali ini kami akan membahas mengenai PWA berikut bermacam-macam kelebihan yang dimiliki.
Apa Itu PWA?
PWA ialah singkatan dari Progressive Web App, sebuah program yang dibangun dengan menjalankan optimasi di sebuah laman.
Optimasi yang dilakukan tak hanya akan membangun laman menjadi lebih cepat namun pun mampu memberikan pengalaman layaknya menggunakan program mobile. Selain itu, Kamu pun tak perlu membangun program mobile secara terpisah.
Beberapa contoh laman yang menggunakan PWA ialah Twitter, Pinterest, OLX dan Trivago.
PWA adalah program hybrid yang terinspirasi dari kemudahan pemakaian browser di bermacam-macam platform dan kenyamanan menggunakan program mobile di ponsel atau tablet.
Lalu, apakah perbedaan ketiganya? Berikut ini karakteristik yang dimiliki oleh masing-masing program:
Web App
- Dibangun dengan mengandalkan browser dan cross platform
- Update berjalan otomatis
- Hanya berjalan pada kondisi online
- Fitur terbatas
- Biaya development murah
Program Mobile
- Dibangun bagi platform tertentu menggunakan bahasa khusus, seperti Swift bagi iOS dan Java bagi Android
- Update mesti dilakukan manual
- Dapat berjalan pada kondisi offline
- Fitur komplit yang menjamin kenyamanan pengguna
- Biaya development cenderung mahal
PWA
- Dibangun mengandalkan browser dan cross platform
- Update berjalan otomatis
- Dapat berjalan pada kondisi offline
- Menghadirkan UX yang lebih intuitif dari web app
- Biaya development murah
Setelah mengetahui beberapa perbedaan di atas, Kamu tentu lebih paham mengenai PWA. Pun, Kamu pun dapat membangun PWA sendiri. Akan kami jelaskan di bagian berikutnya.
Apa Saja Kelebihan PWA?
Google menyebut kelebihan PWA dengan istilah FIRE (Fast, Integrated, Reliable, and Engaging). Cepat, Terintegrasi, Dapat Diandalkan dan Menarik.
Secara garis besar, memang demikian. Namun, bagaimana penjelasan lebih lengkapnya? Berikut ini kelebihan PWA dilihat dari sisi pemilik laman maupun pengguna program.
1. Hemat Biaya Produksi
Memaksimalkan sebuah Progressive Web App tak memerlukan biaya besar.
Ibarat pepatah: “sekali merengkuh dayung, dua tiga pulau terlampaui.” Kamu lumayan memaksimalkan sebuah laman dengan sistem progresif yang ditawarkan PWA. Hasilnya, sebuah program yang dapat digunakan di seluruh perlengkapan dan program program.
Hal ini tentu akan membutuhkan biaya produksi yang lebih kecil bagus ketika membangun ataupun menjalankan update.
2. Kemudahan Digunakan di Beragam Bahan
Membangun PWA memungkinkan Kamu bagi menyusun tampilan program yang seragam di bermacam-macam perlengkapan dengan bermacam-macam ukuran layar bagus ponsel maupun tablet.
Selain itu, Kamu dapat mengatur manfaat yang konsisten meskipun digunakan di program operasi yang berbeda, seperti iOS, Android, ataupun Windows.
Di sisi lain, pengguna pun menjadi terbiasa seandainya mesti mengakses PWA menggunakan perlengkapan yang berbeda. Hal ini amat urgen. Karena, 94% pengguna internet di Indonesia mengakses informasi via perlengkapan mobile.
3. Tak Bergantung App Store
Kamu tak lagi bergantung kepada AppStore seperti Google Play Store, Apple Store, dan Windows Store ketika akan mempublikasikan program Kamu.
Dari sisi bisnis, hal ini lumayan melegakan. Karena, Kamu tak perlu mengeluarkan biaya bagi registrasi atau berlangganan.
Seperti Kamu ketahui, biaya langganan tahunan di Apple Store ialah sebesar $99. Dan juga, biaya registrasi seumur hidup di Google Play Store dipatok di harga $25.
Selain itu, Kamu dapat lebih leluasa bagi memaksimalkan program tersebut tanpa terjerat oleh persyaratan minimal yang mesti dipenuhi. Jadi, Kamu lumayan fokus di tampilan dan manfaat program yang optimal.
4. Instalasi Cepat
Kelebihan lain dari PWA ialah proses instalasi yang cepat.
Kamu tak membayangkan proses instalasi yang didahului dengan proses unduh, install, dan pemberian hak akses, bukan?
Ya, pengguna Kamu memang tak perlu menjalankan instalasi yang berbelit layaknya program mobile. Mereka lumayan menambahkan laman Kamu ke HomeScreen. Karenanya, program akan terpasang otomatis.
5. Berfungsi Layaknya Program Mobile
Pengguna mobile lebih suka mengakses informasi via program dibanding browser. Seperti itulah alasan jumlah program yang diunduh pengguna selalu meningkat tiap tahun.
Di prakteknya, amat jarang pengguna mobile mengakses YouTube maupun Maps via browser, bukan?
Hal ini tentu karena user experience yang ditawarkan program mobile lebih menyenangkan. Mulai dari tampilan yang atraktif hingga push notifications yang dapat memberikan update adanya informasi terbaru.
Kemampuan PWA menghadirkan pengalaman seperti program mobile amat bermanfaat bagi meningkatkan engagement. Contohnya, OLX mencapai kenaikan engagement 250% setelah menggunakan PWA.
6. Performa Apik
Sebuah PWA mempunyai service workers yang bertugas mengelola cache aset laman dengan efisien. Hasilnya, program berjalan dengan cepat sehingga meningkatkan kenyamaman pengguna.
Pun, Uber mengklaim bahwa PWA mereka mampu berjalan di jaringan 2G dan terbuka sempurna sebelum 3 detik!
Hampir seluruh bisnis memang berlomba menjadikan laman mereka lebih bagus. Sekali lagi, kecepatan akses sebuah laman amat urgen. Karena, 57% pengguna akan meninggalkan sebuah laman seandainya loading-nya lebih dari 3 detik!
Baca Pun: Apa Itu LiteSpeed Web Server?
7. Update Otomatis
Ketika menggunakan PWA, pengguna tak perlu pusing mengenai update program. Alasannya, PWA menjalankan update secara otomatis tiap kali pengguna mengakses program.
Pengguna tentu akan merasa senang karena tak direpotkan dengan update manual seperti di program mobile.
Di sisi lain, Kamu pun lebih gampang memastikan pengguna mengakses program menggunakan versi terbaru. Hal ini diperlukan bagi menjamin keamanan dan kenyamanan pengguna program Kamu.
Dari sisi pemilik laman, Kamu lebih gampang pada mengatur pemakaian versi terbaru. Untuk pengguna, update yang berjalan otomatis tentu lebih disukai.
8. Dapat Berjalan Tanpa Jaringan Internet
Berbeda dengan web app lazim yang akan menampilkan gambar Dinosaurus ketika offline, PWA mampu berjalan ketika offline.
Katakanlah pengunjung toko online Kamu baru saja melihat beberapa katolog produk, lalu koneksi internet tiba-tiba putus. Dengan PWA, seluruh produk yang telah dilihat akan disimpan di cache. Pengunjung tersebut masih dapat melihat beberapa produk yang diakses sebelumnya.
Hal ini dapat memberikan kesempatan bagi menimbang produk mana yang akan dibeli. Ketika, internet telah aktif kembali, ia dapat melanjutkan ke pembelian.
Hal tersebut dapat bermanfaat untuk beragam jenis bisnis. Salah satunya, kesuksesan sebuah resort di Mexico ketika meningkatkan conversion rate mereka menjadi 53% ketika menggunakan PWA.
9. Ramah Storage
Pengguna tak akan pernah ketakutan kehabisan storage ketika menggunakan PWA. Alasannya, progressive web app berukuran amat kecil seandainya dibandingi dengan program mobile.
Selaku contoh, program Pinterest hanya berukuran 688 KB saja bagi versi PWA-nya. Dengan ukuran yang kecil, tentu pengguna tak akan ragu menggunakannya karena tak membebani performa perlengkapan.
10. Ramah Bandwidth
Berapa yang dibutuhkan bagi mengunduh program mobile Twitter? 23,5 MB. Jikalau menggunakan PWA, Kamu hanya memerlukan 600KB saja.
Tak hanya itu, interaksi ketika menggunakan PWA pun ramah bandwidth karena dengan adanya optimasi gambar yang memangkas keperluan data hingga 70%.
Pun, Twitter pun mempunyai data saver mode yang memungkinkan Kamu menentukan aset laman mana yang ingin diunduh dan disimpan.
11. Keamanan yang Terjamin
Kelebihan lain PWA ialah tingkat keamanan yang tinggi berkat protokol jaringan HTTPS yang digunakan.
Seperti yang Kamu ketahui, HTTPS menggunakan tiga lapis perlindungan ketika pengguna mengakses laman Kamu. Enkripsi data yang dilakukan pun urgen bagi memastikan tak ada penyalahgunaan informasi pribadi dari pengguna.
Hal ini tentu urgen untuk laman yang memproses pembayaran seperti laman bisnis.
Bagaimana Membangun Sebuah PWA?
Membangun sebuah PWA tidaklah terlalu sulit. Kamu lumayan memenuhi ketentuan laman yang bagus lalu mengikuti tahapan cara membangun PWA. Berikut langkahnya:
1. Memastikan Situs Kamu PWA-Ready
Berbeda dengan program mobile, Kamu tak mesti menunggu persetujuan Google dan Apple bagi mempublikasikan program Kamu.
Bagi membangun laman Kamu siap digunakan selaku PWA, Kamu lumayan menggunakan Lighthouse. Program ini akan mengaudit laman Kamu apakah telah sesuai dengan ketentuan pemakaian bagi PWA.
Caranya selaku berikut:
1. Akses Situs Kamu menggunakan Google Chrome.
2. Bukalah Developer Tools.
3. Pilih fitur Audits.
4. Pilih Run Audits.
5. Hasilnya mesti menunjukkan warna hijau di kategori PWA.
2. Membangun Web App Manifest
Web App Manifest adalah sebuah file JSON yang berisi bermacam-macam informasi seperti nama laman, ikon dan ukuran yang digunakan, warna default, halaman awal, orientasi layar dan splash screen.
Ada banyak contoh web app manifest yang dapat menolong Kamu memahami langkah ini. Salah satunya dari website berikut.
3. Menambahkan Web App Manifest ke Tema
Web App Manifest sebaiknya ditambahkan ke level terendah dari tema program yang Kamu bikin supaya nampak oleh browser ketika proses instalasinya.
Selaku contoh, Kamu dapat menambahkan manifest tersebut di bagian <head> tema HTML Kamu:
| <link rel=”manifest” href=”/static/manifest.json”> |
4. Membangun Service Worker
Service Worker ialah script yang dijalankan di balik layar. Secara manfaat, service worker dapat mendengarkan bermacam-macam event, salah satunya Fetch Event.
Dengan adanya Service Worker memungkinkan adanya fitur yang berjalan tanpa interaksi pengguna seperti push notifications, auto synchronize, dan lainnya.
Kamu dapat menambahkan script service worker ke file index.html tema Kamu. Contohnya seperti terlihat di website ini.
5. Me-load Service Worker
Pastikan Kamu me-load service worker yang telah Kamu bikin agar berjalan dari yang mestinya.
Caranya, tambahkan script berikut di bagian <body> file tema HTML Kamu:
| <script> if (!navigator.serviceWorker.controller) { navigator.serviceWorker.register(“/sw.js”).then(function(reg) { console.log(“Service worker has been registered for scope: ” + reg.scope); }); } </script> |
Setelah proses ini, Kamu dapat mengecek perubahan yang terjadi di log di konsol browser Kamu.
6. Menjalankan Deploy PWA
Setelah seluruh langkah di atas berhasil, saatnya menjalankan deploy PWA Kamu. Kamu bebas memilih platform yang ingin Kamu gunakan bagi tahapan ini, seperti Heroku atau Netlify. Setelah selesai, Kamu dapat mencoba PWA yang telah dikerjakan.
Bagaimana Cara Kerja PWA?
Lalu, bagaimana sebuah PWA bekerja menghadirkan layanan layaknya program mobile?
Di ketika pertama-tama kali pengguna mengakses laman, service worker belum ada. Karenanya, service worker akan didaftarkan terlebih dahulu bagi menjalankan manfaat seperti diterangkan di atas. Registrasi service worker ini secara otomatis menyusun service worker baru sekaligus mengaktifkan Event Install.
Berikutnya, ketika service worker telah terpasang, konten app shell akan ditambahkan ke cache. App shell sendiri berisi bermacam-macam resources yang dibutuhkan ketika sedang bekerja offline. Inilah yang berfungsi mengatur navigasi dari laman di interaksi berikutnya.
Walaupun proses di atas dapat terjadi secara otomatis, sesungguhnya pengaktifan service worker baru pun dapat dilakukan secara manual, menggunakan developer tool atau Service Worker API.
Lalu, setiap kali ada permintaan (request) setelah service worker terpasang, sebuah Fetch Event akan aktif dan lalu menampilkan konten yang diminta. App shell dengan resource lokal ditambah dengan konten dinamis akan menyusun sebuah halaman laman yang komplit.
Ketika sebuah permintaan berhasil terselesaikan, service worker akan berada pada posisi diam (idle) hingga petunjuk berikutnya.
Di prakteknya, pengguna tak akan mengetahui proses yang berjalan tersebut karena berada di balik layar.
Kita ambil contoh pemakaian PWA Twitter. Pertama-tama kali, pengguna akan menyentuh ikon Twitter dari home screen. Lalu, program akan menampilkan tampilan default sesuai web app manifest yaitu halaman lini lama (timeline) Twitter.
Ketika mengakses ke diantara fitur, karenanya service worker akan menjalankan pengecekan apakah telah ada aset berupa gambar, text dan lainnya yang telah tersimpan di cache. Jikalau ada, karenanya akan seketika ditampilkan. Jikalau, tak karenanya akan seketika meminta server bagi memberikan data konten yang diminta.
Cara Cek Status PWA di Sebuah Situs
Setelah membangun PWA, bagaimana seandainya Kamu ingin mengetahui status PWA di laman Kamu?
Caranya sangatlah gampang. Dengan menggunakan Google Chrome, Kamu dapat mengikuti langkah berikut:
1. Klik kanan di halaman laman yang ingin kamu cek, pilih Inspect:
2. Klik di ikon tampilkan lebih lanjut (>>), pilih Application:
3. Pilih fitur Service Worker, cek status apakah telah berwarna hijau.
Jikalau status service worker is running dengan indikator hijau, artinya laman tersebut telah menggunakan PWA.
Namun, ada cara lain yang lebih gampang bagi memastikannya. Lumayan klik fitur tiga titik di pojok kanan atas. Jikalau telah ada alternatif Install, karenanya laman tersebut telah menggunakan PWA.
Penutup
Ternyata, telah banyak kemajuan teknologi yang dapat menolong Kamu bagi melayani pengunjung Kamu dengan lebih bagus. Salah satunya ialah PWA (Progressive Web Apps).
Program yang menggabungkan kelebihan dari web app dan native app ini telah banyak digunakan oleh laman terkenal di seluruh dunia. Hal ini tentu karena banyaknya manfaat yang ditawarkan, seperti telah kami ulas di atas.
Kamu pun telah memahami bagaimana cara kerja PWA dengan bagus termasuk cara mengecek status PWA di sebuah laman.
Tunggu apa lagi? Jadikan laman Kamu yang terbaik dengan memastikan akses yang cepat namun tetap memanjakan pengguna mobile dengan beragam fitur yang bermanfaat.
Sumber https://niagahoster.co.id/