Spanduk Pemasangan Aplikasi Web | Web

Matt is a contributor to WebFundamentals

Paul is a Developer Advocate

Ada dua tipe spanduk pemasangan aplikasi: spanduk pemasangan aplikasi web dan spanduk pemasangan aplikasi asli. Keduanya memungkinkan pengguna dengan cepat dan mulus menambahkan aplikasi asli atau web Anda ke layar beranda tanpa meninggalkan browser.

Mudah saja menambahkan spanduk pemasangan aplikasi; sebagian besar tugas berat tersebut ditangani Chrome. Anda perlu menyertakan file manifes aplikasi web di situs bersama detail tentang aplikasi.

Chrome kemudian menggunakan serangkaian kriteria dan heuristik frekuensi kunjungan untuk menentukan waktu yang tepat menampilkan spanduk. Baca terus untuk detail selengkapnya.

Apa kriterianya?

Chrome secara otomatis menampilkan spanduk bila aplikasi Anda memenuhi kriteria berikut:

Memiliki file manifes aplikasi web dengan:
- sebuah short_name (digunakan di layar beranda)
- sebuah name (digunakan di spanduk)
- sebuah ikon png 192x192 (deklarasi ikon harus menyertakan tipe mime dari image/png)
- sebuah start_url yang memuat
Memiliki service worker yang terdaftar di situs Anda.
Disajikan melalui HTTPS (persyaratan untuk menggunakan service worker).
Dikunjungi setidaknya dua kali, dengan jarak waktu setidaknya lima menit antar kunjungan.

Menguji spanduk pemasangan aplikasi

Setelah menyiapkan manifes aplikasi web, Anda perlu memvalidasi apakah manifes telah didefinisikan dengan benar. Anda telah memperoleh dua pendekatan yang diinginkan. Yang satu adalah manual, dan satu lagi adalah otomatis.

Untuk memicu spanduk pemasangan aplikasi secara manual:

Buka Chrome DevTools.
Masuk ke panel Application.
Masuk ke tab Manifest.
Klik Add to homescreen, yang disorot merah dalam tangkapan layar di bawah ini.

Tombol Add to homescreen di DevTools

Lihat Simulasikan kejadian Add to Homescreen untuk bantuan selengkapnya.

Untuk pengujian otomatis spanduk pemasangan aplikasi Anda, gunakan Lighthouse. Lighthouse adalah alat (bantu) pengauditan aplikasi web. Anda bisa menjalankannya sebagai Ekstensi Chrome atau sebagai modul NPM. Untuk menguji aplikasi, Anda menyediakan laman khusus untuk audit pada Lighthouse. Lighthouse menjalankan paket audit terhadap laman, kemudian menyediakan hasil laman dalam laporan.

Dua paket audit Lighthouse di tangkapan layar di bawah ini menyatakan semua pengujian yang dibutuhkan laman Anda untuk diteruskan guna menampilkan spanduk pemasangan aplikasi.

Audit pemasangan aplikasi Lighthouse

Lihat Audit Aplikasi Web dengan Lighthouse untuk memulai Lighthouse.

Kejadian spanduk pemasangan aplikasi

Chrome menyediakan mekanisme yang mudah untuk menentukan bagaimana pengguna menanggapi spanduk pemasangan aplikasi dan bahkan membatalkan atau menundanya sampai waktu yang lebih tepat.

Apakah pengguna memasang aplikasi?

Kejadian beforeinstallprompt mengembalikan promise yang disebut userChoice yang terselesaikan ketika pengguna beraksi pada prompt. Promise mengembalikan sebuah objek dengan nilai dismissed pada atribut outcome atau accepted jika pengguna menambahkan laman web ke layar beranda.

window.addEventListener('beforeinstallprompt', function(e) {
  // beforeinstallprompt Event fired

  // e.userChoice will return a Promise.
  // For more details read: https://developers.google.com/web/fundamentals/getting-started/primers/promises
  e.userChoice.then(function(choiceResult) {

    console.log(choiceResult.outcome);

    if(choiceResult.outcome == 'dismissed') {
      console.log('User cancelled home screen install');
    }
    else {
      console.log('User added to home screen');
    }
  });
});

Ini adalah alat yang baik untuk mengetahui bagaimana pengguna berinteraksi dengan peringatan pemasangan aplikasi.

Menangguhkan atau membatalkan prompt

Chrome mengatur kapan memicu prompt, tapi untuk beberapa situs, ini mungkin tidak ideal. Anda bisa menunda prompt ke lain waktu ketika aplikasi digunakan atau bahkan membatalkannya.

Ketika Chrome memutuskan untuk meminta pengguna memasang aplikasi, Anda bisa mencegah tindakan default tersebut dan menyimpan kejadian untuk digunakan di lain waktu. Kemudian ketika pengguna memiliki interaksi positif dengan situs, Anda bisa kembali memicu prompt dengan memanggil prompt() pada kejadian yang disimpan.

This causes Chrome to show the banner and all the Promise attributes such as userChoice will be available to bind to so that you can understand what action the user took.

var deferredPrompt;

window.addEventListener('beforeinstallprompt', function(e) {
  console.log('beforeinstallprompt Event fired');
  e.preventDefault();

  // Stash the event so it can be triggered later.
  deferredPrompt = e;

  return false;
});

btnSave.addEventListener('click', function() {
  if(deferredPrompt !== undefined) {
    // The user has had a postive interaction with our app and Chrome
    // has tried to prompt previously, so let's show the prompt.
    deferredPrompt.prompt();

    // Follow what the user has done with the prompt.
    deferredPrompt.userChoice.then(function(choiceResult) {

      console.log(choiceResult.outcome);

      if(choiceResult.outcome == 'dismissed') {
        console.log('User cancelled home screen install');
      }
      else {
        console.log('User added to home screen');
      }

      // We no longer need the prompt.  Clear it up.
      deferredPrompt = null;
    });
  }
});

Atau, Anda bisa membatalkan prompt dengan mencegah tindakan default.

window.addEventListener('beforeinstallprompt', function(e) {
  console.log('beforeinstallprompt Event fired');
  e.preventDefault();
  return false;
});

Native app install banners

Spanduk pemasangan aplikasi asli serupa dengan Spanduk pemasangan aplikasi web, namun sebagai ganti menambahkan ke layar beranda, spanduk ini memungkinkan pengguna memasang aplikasi asli tanpa meninggalkan situs Anda.

Kriteria untuk menampilkan spanduk

Kriterianya serupa dengan spanduk pemasangan aplikasi web hanya saja membutuhkan service worker. Situs Anda harus:

Memiliki file manifes aplikasi web dengan:
sebuah short_name
sebuah name (digunakan di prompt spanduk)
sebuah ikon png 192x192, deklarasi ikon Anda harus menyertakan tipe MIME image/png
sebuah objek related_applications bersama informasi tentang aplikasi
Disajikan melalui HTTPS
Dikunjungi oleh pengguna dua kali, pada dua hari berbeda selama kursus dua minggu.

Persyaratan manifes

Untuk mengintegrasikan ke dalam manifes, tambahkan larik related_applications bersama platform play (untuk Google Play) dan App Id.

"related_applications": [
  {
  "platform": "play",
  "id": "com.google.samples.apps.iosched"
  }
]

Jika Anda hanya ingin menawarkan pengguna kemampuan untuk memasang aplikasi Android, dan tidak menampilkan spanduk pemasangan aplikasi web, maka tambahkan "prefer_related_applications": true. Misalnya:

"prefer_related_applications": true,
"related_applications": [
  {
  "platform": "play",
  "id": "com.google.samples.apps.iosched"
  }
]