PWA – Add To Home Screen

Fitur PWA Add to Home Screen, atau sering disebut juga web app install prompt, memudahkan user untuk menginstal Progressive Web App pada mobile device. Setelah user menyetujui, PWA akan ditambahkan pada launcher dan akan berjalan seperti installed app.

Agar user dapat menginstal PWA pada mobile device mereka, harus memenuhi beberapa kriteria berikut:

• Web App tersebut belum pernah diinstal.
• property prefer_related_applications tidak diset atau diset false (file manifest.json).
• Memiliki file manifest.json dengan property berikut harus didefinisikan:
  • short_name atau name
  • icon dengan ukuran 192px dan 512px
  • start_url
  • display, dengan option fullscreen, standalone atau minimal-ui
• Menggunakan HTTPS (pada production, jika pada localhost development server chrome akan mengabaikan aturan ini).
• Service worker yang teregistrasi dengan fetch event handler.

Untuk lebih lengkap tentang file manifest.json, click PWA manifest.json

Menampilkan Banner Add To Home Screen

Setelah kriteria diatas dipenuhi, kita dapat menampilkan banner add to home screen pada user dan dapat diatur kapan akan ditampilkan kepada user. Contohnya, banner add to home screen akan ditampilkan setelah user menekan tombol +

Agar bisa melihat jalannya program (perintah console.log), kami menggunakan remote debugging android device. Untuk setup remote debugging kunjungi disini.

Agar kita bisa mengatur kapan banner ditampilkan, kita harus cegah chrome browser menampilkan banner add to home screen. Code tersebut dapat kita tambahkan pada app.js (jika Anda menggunakan file proyek yang kami sediakan).

//tambahkan code berikut pada app.js

window.addEventListener('beforeinstallprompt', function(event){
    console.log('before add to home screen');
    event.preventDefault();
    promptInstall = event;
    return false;
});

Berikutnya kita tambahkan code dibawah pada feed.js pada fungsi openCreateModal(), fungsi yang dipanggil setelah button + ditekan.

// file feed.js
// dalam block function openCreatePostModal()

function openCreatePostModal() {
  createPostArea.style.display = 'block';

  // tambahkan kode ini untuk menampilkan banner add to home screen
  if(promptInstall){
    promptInstall.prompt()
    promptInstall.userChoice.then(function(choiceResult){
      console.log(choiceResult.outcome);

      if(choiceResult.outcome==='dismissed'){
        console.log('user cancelled installation');
      }else{
        console.log('user add to home screen');
      }
    });
    promptInstall = null;
  }
  // end of code

}

Dapat dilihat pada console log, ‘before add to home screen’, terjadi saat chrome berusaha menampilkan banner add to home screen.

Lalu log ‘accepted’ dan ‘user add to home screen’, setelah user menekan tombol tambah, dan memilih Add to home screen pada banner prompt instalasi.