Kecepatan menjadi kunci sukses di dunia online. So, buat kalian yang bekerja sebagai desainer pembuat situs-situs website, baik yang menyasar pengguna komputer desktop maupun pengguna mobile, akses ngebut harus dimiliki, Genks. Ternyata nggak sulit, kok, mengatasi akses lemot yang bisa bikin pengunjung meninggalkan website-mu. Salah satunya dengan menggunakan Progressive Web App.
Mungkin ada beberapa dari kalian yang masih asing dengan istilah ini. Nggak perlu takut, guys, berikut kami rangkum A-to-Z tentang Progressive Web App yang sering disingkat menjadi PWA.
PWA – Progressive Web App, Apa sih, Itu?
Sumber Gambar : railsware.com
Well, PWA atau Progressive Web App adalah sebuah aplikasi yang dirancang dengan cara melakukan optimasi di sebuah situs website. Optimasi ini nggak cuma bikin website-mu lebih ngebut doang, tapi juga akan memberikan pengalaman seperti ketika kamu memakai aplikasi mobile. Jadi, kamu nggak perlu bikin aplikasi versi mobile-nya, deh.
Contoh-contoh website yang mengaplikasikan PWA seperti Twitter, Pinterest, Trivago dan OLX.
Adapun keuntungan menggunakan PWA adalah dibuat dengan mengandalkan browser dan cross platform, update-an bisa dilakukan secara otomatis, bisa berjalan meski dalam kondisi offline, UX lebih intuitif ketimbang web app dan yang penting, biaya development-nya cenderung murah.
Gimana sih, Cara untuk Membangun Progressive Web App?
Sumber Gambar : Pexels.com
Cara membangun PWA sebenarnya nggak terlalu sulit, kok, GenKs. Kamu cukup memenuhi ketentuan membuat website yang baik dan mengikuti tahapan seperti berikut:
-
Pastikan Dulu Kalau Website-mu Sudah PWA-Ready, ya!
Sumber Gambar : connectioncafe.com
Beda dengan mobile app, kamu nggak perlu menanti-nanti persetujuan dari Google atau Apple untuk mempublikasikan aplikasimu. Cukup gunakan Lighthouse agar website-mu PWA-ready. Lighthouse akan mengaudit website-mu apakah sudah sesuai dengan ketentuan penggunaan untuk Progressive Web App atau belum, guys.
Caranya adalah:
- Masuklah ke website-mu lewat browser Google Chrome
- Lalu buka Developer Tools
- Klik menu Audits
- Setelah itu, pilihlah menu Run Audits
- Jika kategori PWA berwarna hijau, artinya sudah oke
2. Buatlah Web App Manifest
Sumber Gambar : devhoz.com
Apa itu Web App Manifest? Ini adalah sebuah file JSON berisi berbagai informasi, mulai dari nama website, ikon dan ukuran yang digunakan, warna default, page awal,orientasi layar hingga splash screen. Kamu bisa menemukan banyak contoh Web App Manifest yang akan membantumu lebih mengerti, kok.
3. Tambahkan Web App Manifest ke Template
Sumber Gambar : freecodecamp.org
Langkah selanjutnya adalah menambahkan Web App Manifest ke level paling rendah dari template aplikasi buatanmu. Kenapa? Hal itu bertujuan agar browser bisa melihatnya saat proses instalasi.
4. Membuat Service Worker
Sumber Gambar : designsrock.org
Service Worker, apa itu? Service Worker adalah script yang dijalankan di balik layar dan berfungsi untuk mendengarkan berbagai event, seperti Fetch Event. Nah, kehadiran Service Worker ini memungkinkan adanya fitur yang bisa berjalan tanpa perlu interaksi dari pengguna. Misalnya, push notification, auto synchronize atau lainnya.
5. Nge-Load Service Worker
Sumber Gambar : cloudfront.net
Setelah membuat Service Worker jangan lupa me-load-nya agar bisa berjalan seperti yang seharusnya, ya, GenKs. Jika proses ini sudah selesai, pastikan untuk mengecek setiap perubahan pada log di console browser-mu.
6. Yang Terakhir, Lakukan Deploy PWA
Sumber Gambar : insights.dice.com
Nah, sebagai langkah terakhir setelah semua proses di atas sukses, sekarang hal terakhir yang perlu kamu lakukan adalah deploy PWA-mu, guys. Nggak masalah kamu mau memilih platform apa pun yang diinginkan pada tahap ini. Misalnya Heroku atau Netlify. Dan cobalah PWA-mu.
So, tunggu apa lagi, guys, sekarang waktunya kamu memanjakan para pengguna mobile dengan membuktikan website-mu jadi yang terdepan berkat akses super ngebut ditambah beragam fitur keren bermanfaat menggunakan Progressive Web App. Selamat mencoba!
