Ads by Yasya El Hakim
Pemasangan Progressive Web App: Bagian 2

Ini adalah artikel kelanjutan dari Bagian 1 dan pastikan kalian sudah membacanya.

Pada bagian ini, kita akan membuat dan memasang Progressive Web App dengan kode yang sudah saya sederhanakan. Dan juga kita akan melakukan Audit langsung melalui Tool dari Google yaitu Lighthouse, mengatasi error, dan lain sebagainya.

Berikut beberapa hal yang akan kalian lakukan:
  • Melihat bagaimana Progressive Web App dapat bekerja pada Desktop dan Mobile.
  • Melihat apa yang akan terjadi ketika tidak terhubung dengan Internet (Offline).
  • Menggunakan tool dari Chrome, dan mengujinya dengan koneksi rendah.
  • Melakukan delay pada server.

Audit melalui Lighthouse

Lighthouse merupakan tool yang bisa kita gunakan pada Chrome dan berguna untuk meningkatkan kualitas halaman Blog/Website. Lalu apa yang spesial dari tool tersebut? Lighthouse dapat kita gunakan untuk mengaudit performa, aksebilitas, Progressive Web App, dan masih banyak lagi. Kita juga bisa melihat penjelasan untuk setiap audit.

Menjalankan Lighthouse

  1. Buka Blog/Website kalian pada tab baru (Browser Chrome)
  2. Buka Chrome DevTool dengan menekan tombol CTRL + SHIFT + J lalu masuk ke tab Audits. Disana kalian akan melihat kategori audit, pastikan juga dibagian Audit sudah tercentang semua.
  3. Jalankan audit dengan menekan tombol Run Audit. Tunggu prosesnya sampai selesai, dan kita akan melihat hasil laporan dari audit yang kita jalankan.

Audit Progressive Web App

Audit PWA EL Creative Academy

Pada gambar diatas, kita melihat banyak kesalahan yang belum kita selesaikan. Beberapa hal yang harus kita perbaiki adalah:

Fast and Reliable
  1. Page load is not fast enough on mobile networks
  2. Current page does not respond with a 200 when offline
  3. start_url does not respond with a 200 when offline

Installable
  1. Does not register a service worker that controls page and start_url
  2. Web app manifest does not meet the installability requirements

PWA Optimized
  1. Is not configured for a custom splash screen
  2. Does not set an address-bar theme color

Pada bagian selanjutnya, kita akan memperbaiki semua hal diatas. Jadi, sampai jumpa pada bagian berikutnya ya.

Bagian 3: Memasang Web App Manifest untuk PWA

0Komentar

Sebelumnya Selanjutnya