Game & Teknologi

Mengulik Progressive Web App, Rahasia Website Lebih Ngebut!

Progressive Web App

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:

  1. 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

Progressive Web App

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

Progressive Web App

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

Progressive Web App

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!

About author

Related posts
Game & Teknologi

Ini Dia Rekomendasi Template Powerpoint Bertema Profesional Biar Presentasi Kamu Menarik!

Game & Teknologi

Serunya Fitur Collaboration Instagram, Udah Coba?

Game & Teknologi

5 Situs Virtual Exhibition yang Cocok Kamu Datengin Buat Ngilangin Penat!

Game & Teknologi

Apa Itu Twitter Spaces dan Cara Menggunakannya untuk Keuntungan Bisnis?