Kami berusaha menyediakan website yang berguna untuk pengetahuan para pembaca, panduan singkat dan sederhana ini semoga menjadi jalan bagi kalian yang mengalami kesulitan dalam membuat blog di dunia maya, kami mengambil sumber dari blog Panduan Blog Online.com seandainya kalian berkenan langsung mengunjungi website tersebut, selamat menikmati!
Kunci sukses online adalah kecepatan. Tak terkecuali ketika membangun sebuah website yang akan menyasar pengguna mobile. Sebab, akses yang lambat hanya akan membuat pengunjung meninggalkan website Anda.
Salah satu solusi untuk membuat akses website lebih cepat adalah PWA (Progressive Web Apps). Beberapa dari Anda mungkin baru mendengar istilah ini. Jangan khawatir. Kali ini kami akan membahas tentang PWA berikut berbagai kelebihan yang dimiliki.
PWA adalah singkatan dari Progressive Web App, sebuah aplikasi yang dibangun dengan melakukan optimasi pada sebuah website.
Optimasi yang dilakukan tidak hanya akan membuat website menjadi lebih cepat namun juga mampu memberikan pengalaman layaknya menggunakan aplikasi mobile. Selain itu, Anda juga tidak perlu membuat aplikasi mobile secara terpisah.
Beberapa contoh website yang menggunakan PWA adalah Twitter, Pinterest, OLX dan Trivago.
PWA merupakan aplikasi hybrid yang terinspirasi dari kemudahan penggunaan browser di berbagai platform dan kenyamanan menggunakan aplikasi mobile di ponsel atau tablet.
Lalu, apakah perbedaan ketiganya? Berikut ini karakteristik yang dimiliki oleh masing-masing aplikasi:
Web App
Aplikasi Mobile
PWA
Setelah mengetahui beberapa perbedaan di atas, Anda tentu lebih paham tentang PWA. Bahkan, Anda pun bisa membuat PWA sendiri. Akan kami jelaskan pada bagian selanjutnya.
Google menyebut kelebihan PWA dengan istilah FIRE (Fast, Integrated, Reliable, and Engaging). Cepat, Terintegrasi, Bisa Diandalkan dan Menarik.
Secara garis besar, memang demikian. Namun, bagaimana penjelasan lebih lengkapnya? Berikut ini kelebihan PWA dilihat dari sisi pemilik website maupun pengguna aplikasi.
Mengembangkan sebuah Progressive Web App tidak memerlukan biaya besar.
Ibarat pepatah: “sekali merengkuh dayung, dua tiga pulau terlampaui.” Anda cukup mengembangkan sebuah website dengan metode progresif yang ditawarkan PWA. Hasilnya, sebuah aplikasi yang bisa digunakan di semua perangkat dan sistem aplikasi.
Hal ini tentu akan membutuhkan biaya produksi yang lebih kecil baik saat membangun ataupun melakukan update.
Membangun PWA memungkinkan Anda untuk merancang tampilan aplikasi yang seragam di berbagai perangkat dengan berbagai ukuran layar baik ponsel maupun tablet.
Selain itu, Anda bisa mengatur fungsi yang konsisten meskipun digunakan pada sistem operasi yang berbeda, seperti iOS, Android, ataupun Windows.
Di sisi lain, pengguna juga menjadi terbiasa jika harus mengakses PWA menggunakan perangkat yang berbeda. Hal ini sangat penting. Sebab, 94% pengguna internet di Indonesia mengakses informasi melalui perangkat mobile.
Anda tidak lagi bergantung kepada AppStore seperti Google Play Store, Apple Store, dan Windows Store ketika akan mempublikasikan aplikasi Anda.
Dari sisi bisnis, hal ini cukup melegakan. Sebab, Anda tidak perlu mengeluarkan biaya untuk registrasi atau berlangganan.
Seperti Anda ketahui, biaya langganan tahunan di Apple Store adalah sebesar $99. Sementara itu, biaya registrasi seumur hidup di Google Play Store dipatok di harga $25.
Selain itu, Anda bisa lebih leluasa untuk mengembangkan aplikasi tersebut tanpa terjerat oleh persyaratan minimal yang harus dipenuhi. Jadi, Anda cukup fokus pada tampilan dan fungsi aplikasi yang optimal.
Kelebihan lain dari PWA adalah proses instalasi yang cepat.
Anda tidak membayangkan proses instalasi yang didahului dengan proses unduh, install, dan pemberian hak akses, bukan?
Ya, pengguna Anda memang tak perlu melakukan instalasi yang berbelit layaknya aplikasi mobile. Mereka cukup menambahkan website Anda ke HomeScreen. Maka, aplikasi akan terpasang otomatis.
Pengguna mobile lebih suka mengakses informasi melalui aplikasi dibanding browser. Itulah alasan jumlah aplikasi yang diunduh pengguna selalu meningkat tiap tahun.
Pada prakteknya, sangat jarang pengguna mobile mengakses YouTube maupun Maps melalui browser, bukan?
Hal ini tentu karena user experience yang ditawarkan aplikasi mobile lebih menyenangkan. Mulai dari tampilan yang atraktif hingga push notifications yang bisa memberikan update adanya informasi terbaru.
Kemampuan PWA menghadirkan pengalaman seperti aplikasi mobile sangat bermanfaat untuk meningkatkan engagement. Contohnya, OLX mencapai kenaikan engagement 250% setelah menggunakan PWA.
Sebuah PWA memiliki service workers yang bertugas mengelola cache aset website dengan efisien. Hasilnya, aplikasi berjalan dengan cepat sehingga meningkatkan kenyamaman pengguna.
Bahkan, Uber mengklaim bahwa PWA mereka mampu berjalan di jaringan 2G dan terbuka sempurna sebelum 3 detik!
Hampir semua bisnis memang berlomba menjadikan website mereka lebih baik. Sekali lagi, kecepatan akses sebuah website sangat penting. Sebab, 57% pengguna akan meninggalkan sebuah website jika loading-nya lebih dari 3 detik!
Baca Juga: Apa Itu LiteSpeed Web Server?
Saat menggunakan PWA, pengguna tidak perlu pusing tentang update aplikasi. Alasannya, PWA melakukan update secara otomatis tiap kali pengguna mengakses aplikasi.
Pengguna tentu akan merasa senang karena tidak direpotkan dengan update manual seperti pada aplikasi mobile.
Di sisi lain, Anda juga lebih mudah memastikan pengguna mengakses aplikasi menggunakan versi terbaru. Hal ini diperlukan untuk menjamin keamanan dan kenyamanan pengguna aplikasi Anda.
Dari sisi pemilik website, Anda lebih mudah dalam mengatur penggunaan versi terbaru. Bagi pengguna, update yang berjalan otomatis tentu lebih disukai.
Berbeda dengan web app biasa yang akan menampilkan gambar Dinosaurus saat offline, PWA mampu berjalan ketika offline.
Katakanlah pengunjung toko online Anda baru saja melihat beberapa katolog produk, lalu koneksi internet tiba-tiba putus. Dengan PWA, semua produk yang sudah dilihat akan disimpan di cache. Pengunjung tersebut masih bisa melihat beberapa produk yang diakses sebelumnya.
Hal ini bisa memberikan kesempatan untuk menimbang produk mana yang akan dibeli. Ketika, internet sudah aktif kembali, ia bisa melanjutkan ke pembelian.
Hal tersebut bisa bermanfaat bagi beragam jenis bisnis. Salah satunya, kesuksesan sebuah resort di Mexico saat meningkatkan conversion rate mereka menjadi 53% ketika menggunakan PWA.
Pengguna tak akan pernah ketakutan kehabisan storage saat menggunakan PWA. Alasannya, progressive web app berukuran sangat kecil jika dibandingkan dengan aplikasi mobile.
Sebagai contoh, aplikasi Pinterest hanya berukuran 688 KB saja untuk versi PWA-nya. Dengan ukuran yang kecil, tentu pengguna tidak akan ragu menggunakannya karena tidak membebani kinerja perangkat.
Berapa yang dibutuhkan untuk mengunduh aplikasi mobile Twitter? 23,5 MB. Jika menggunakan PWA, Anda hanya memerlukan 600KB saja.
Tidak hanya itu, interaksi ketika menggunakan PWA pun ramah bandwidth karena hadirnya optimasi gambar yang memangkas kebutuhan data hingga 70%.
Bahkan, Twitter juga memiliki data saver mode yang memungkinkan Anda menentukan aset website mana yang ingin diunduh dan disimpan.
Kelebihan lain PWA adalah tingkat keamanan yang tinggi berkat protokol jaringan HTTPS yang digunakan.
Seperti yang Anda ketahui, HTTPS menerapkan tiga lapis perlindungan ketika pengguna mengakses website Anda. Enkripsi data yang dilakukan juga penting untuk memastikan tidak ada penyalahgunaan informasi pribadi dari pengguna.
Hal ini tentu penting bagi website yang memproses pembayaran seperti website bisnis.
Membangun sebuah PWA tidaklah terlalu sulit. Anda cukup memenuhi ketentuan website yang baik lalu mengikuti tahapan cara membangun PWA. Berikut langkahnya:
Berbeda dengan aplikasi mobile, Anda tidak harus menunggu persetujuan Google dan Apple untuk mempublikasikan aplikasi Anda.
Untuk membuat website Anda siap digunakan sebagai PWA, Anda cukup menggunakan Lighthouse. Aplikasi ini akan mengaudit website Anda apakah sudah sesuai dengan ketentuan penggunaan untuk PWA.
Caranya sebagai berikut:
1. Akses Website Anda menggunakan Google Chrome.
2. Bukalah Developer Tools.
3. Pilih menu Audits.
4. Pilih Run Audits.
5. Hasilnya harus menunjukkan warna hijau pada kategori PWA.
Web App Manifest merupakan sebuah file JSON yang berisi berbagai informasi seperti nama website, ikon dan ukuran yang digunakan, warna default, halaman awal, orientasi layar dan splash screen.
Ada banyak contoh web app manifest yang bisa membantu Anda memahami langkah ini. Salah satunya dari website berikut.
Web App Manifest sebaiknya ditambahkan ke level terendah dari template aplikasi yang Anda buat supaya nampak oleh browser ketika proses instalasinya.
Sebagai contoh, Anda bisa menambahkan manifest tersebut pada bagian <head> template HTML Anda:
| <link rel=”manifest” href=”/static/manifest.json”> |
Service Worker adalah script yang dijalankan di balik layar. Secara fungsi, service worker bisa mendengarkan berbagai event, salah satunya Fetch Event.
Hadirnya Service Worker memungkinkan adanya fitur yang berjalan tanpa interaksi pengguna seperti push notifications, auto synchronize, dan lainnya.
Anda bisa menambahkan script service worker ke file index.html template Anda. Contohnya seperti terlihat pada website ini.
Pastikan Anda me-load service worker yang sudah Anda buat agar berjalan sebagaimana mestinya.
Caranya, tambahkan script berikut pada bagian <body> file template HTML Anda:
| <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, Anda bisa mengecek perubahan yang terjadi pada log di konsol browser Anda.
Setelah semua langkah di atas berhasil, saatnya melakukan deploy PWA Anda. Anda bebas memilih platform yang ingin Anda gunakan untuk tahapan ini, seperti Heroku atau Netlify. Setelah selesai, Anda bisa mencoba PWA yang telah dibuat.
Lalu, bagaimana sebuah PWA bekerja menghadirkan layanan layaknya aplikasi mobile?
Pada saat pertama kali pengguna mengakses website, service worker belum ada. Maka, service worker akan didaftarkan terlebih dahulu untuk menjalankan fungsi seperti dijelaskan di atas. Registrasi service worker ini secara otomatis membentuk service worker baru sekaligus mengaktifkan Event Install.
Selanjutnya, saat service worker telah terpasang, konten app shell akan ditambahkan ke cache. App shell sendiri berisi berbagai resources yang dibutuhkan ketika sedang bekerja offline. Inilah yang berfungsi mengatur navigasi dari website pada interaksi selanjutnya.
Walaupun proses di atas bisa terjadi secara otomatis, sebenarnya pengaktifan service worker baru juga bisa 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 membentuk sebuah halaman website yang lengkap.
Ketika sebuah permintaan berhasil terselesaikan, service worker akan berada dalam posisi diam (idle) hingga perintah berikutnya.
Pada prakteknya, pengguna tidak akan mengetahui proses yang berjalan tersebut karena berada di balik layar.
Kita ambil contoh penggunaan PWA Twitter. Pertama kali, pengguna akan menyentuh ikon Twitter dari home screen. Lalu, aplikasi akan menampilkan tampilan default sesuai web app manifest yaitu halaman lini masa (timeline) Twitter.
Ketika mengakses ke salah satu menu, maka service worker akan melakukan pengecekan apakah sudah ada aset berupa gambar, text dan lainnya yang sudah tersimpan di cache. Jika ada, maka akan langsung ditampilkan. Jika, tidak maka akan langsung meminta server untuk memberikan data konten yang diminta.
Setelah membuat PWA, bagaimana jika Anda ingin mengetahui status PWA pada website Anda?
Caranya sangatlah mudah. Dengan menggunakan Google Chrome, Anda bisa mengikuti langkah berikut:
1. Klik kanan pada halaman website yang ingin kamu cek, pilih Inspect:
2. Klik pada ikon tampilkan lebih lanjut (>>), pilih Application:
3. Pilih menu Service Worker, cek status apakah sudah berwarna hijau.
Jika status service worker is running dengan indikator hijau, artinya website tersebut sudah menerapkan PWA.
Namun, ada cara lain yang lebih mudah untuk memastikannya. Cukup klik menu tiga titik di pojok kanan atas. Jika sudah ada pilihan Install, maka website tersebut sudah menerapkan PWA.
Ternyata, telah banyak kemajuan teknologi yang bisa membantu Anda untuk melayani pengunjung Anda dengan lebih baik. Salah satunya adalah PWA (Progressive Web Apps).
Aplikasi yang menggabungkan kelebihan dari web app dan native app ini telah banyak digunakan oleh website terkenal di seluruh dunia. Hal ini tentu karena banyaknya manfaat yang ditawarkan, seperti telah kami ulas di atas.
Anda juga sudah memahami bagaimana cara kerja PWA dengan baik termasuk cara mengecek status PWA pada sebuah website.
Tunggu apa lagi? Jadikan website Anda yang terbaik dengan memastikan akses yang cepat namun tetap memanjakan pengguna mobile dengan beragam fitur yang bermanfaat.
Source:niagahoster.com
No comments:
Post a Comment