Deteksi

Anda dapat mendeteksi apakah pengguna menggunakan PWA di browser atau dalam mode mandiri. Di browser berbasis Chromium (Android dan desktop), Anda juga dapat mendeteksi peristiwa berikut:

• Status dan hasil dialog undangan penginstalan.
• Penginstalan selesai.
• Transfer navigasi dari browser ke jendela PWA dan sebaliknya.
• Status penginstalan PWA.
• Aplikasi terkait yang diinstal dari app store.

Anda dapat menggunakan data ini untuk analisis, untuk memahami preferensi pengguna, dan untuk menyesuaikan pengalaman mereka. Untuk mencatat peristiwa ini, Anda dapat menggunakan alat seperti kueri media, peristiwa dari window, atau menggunakan API kemampuan yang dapat Anda temukan tercantum di sini.

Mendeteksi mode tampilan

Untuk melacak cara pengguna meluncurkan PWA, Anda dapat menggunakan matchMedia() untuk menguji kueri media display-mode.

window.addEventListener('DOMContentLoaded', () => {
  let displayMode = 'browser tab';
  if (window.matchMedia('(display-mode: standalone)').matches) {
    displayMode = 'standalone';
  }
  // Log launch display mode to analytics
  console.log('DISPLAY_MODE_LAUNCH:', displayMode);
});

Jika Anda menggunakan contoh ini, ingatlah untuk mencocokkan mode tampilan dari manifes aplikasi web Anda, misalnya, standalone, minimal-ui, atau fullscreen. Anda juga dapat mencocokkan beberapa kueri dalam string kueri media menggunakan kondisi yang dipisahkan koma.

Anda juga dapat menambahkan parameter kueri ke start_url manifes yang dapat diambil dengan analisis untuk melacak statistik terkait kapan, dengan cara apa, dan berapa banyak PWA Anda digunakan.

Penginstalan aplikasi

Saat pengguna menyetujui permintaan penginstalan di browser, peristiwa appinstalled akan diaktifkan di browser berbasis Chromium. Penggunaan yang baik untuk pengendali peristiwa ini adalah untuk menghapus promosi penginstalan dalam aplikasi yang telah Anda tambahkan.

window.addEventListener('appinstalled', () => {
  // If visible, hide the install promotion
  hideInAppInstallPromotion();
  // Log install to analytics
  console.log('INSTALL: Success');
});

Ingat, pada perangkat Android dengan WebAPK, peristiwa dipicu saat pengguna menerima dialog, bukan setelah WebAPK dibuat dan diinstal. Mungkin ada penundaan beberapa detik sebelum aplikasi diinstal sepenuhnya.

Bab Perintah Penginstalan menjelaskan cara mendeteksi apakah perintah penginstalan tersedia dan pilihan yang dibuat pengguna.

Transfer sesi

Pengguna dapat menggunakan PWA Anda dalam browser dan dalam bentuk mandiri yang diinstal. Di browser desktop, Anda dapat mentransfer navigasi saat ini antar-konteks tersebut menggunakan badge atau item menu, seperti yang terlihat pada gambar berikut.

Di Android, ada item menu yang mirip dengan yang ada di desktop dari browser yang mentransfer navigasi ke aplikasi. Dalam hal ini, URL saat ini akan dibuka tetapi ini akan menjadi navigasi halaman baru di aplikasi.

Pada gambar berikut, Anda dapat melihat item menu di Android saat aplikasi sudah diinstal.

Transfer setelah penginstalan

Dari browser desktop, navigasi saat ini akan segera ditransfer ke aplikasi saat penginstalan. Tab browser ditutup, dan aplikasi yang baru diinstal akan dibuka, melanjutkan apa yang dilakukan pengguna.

Pada browser seluler, navigasi saat ini tetap berada di browser saat Anda menginstal aplikasi. Jika pengguna ingin berpindah ke aplikasi, mereka harus membuka aplikasi secara manual, dan ini akan menjadi navigasi baru.

Mendeteksi transfer

Untuk mendeteksi transfer antara browser dan jendela, Anda dapat menggunakan kueri media:

window.addEventListener('DOMContentLoaded', () => {
  // replace standalone with your display used in manifest
  window.matchMedia('(display-mode: standalone)')
    .addEventListener('change', (evt) => {
      let displayMode = 'browser';
      if (evt.matches) {
        displayMode = 'standalone';
      }
      // Log display mode change to analytics
      console.log('DISPLAY_MODE_CHANGED', displayMode);
    });
});

Isolasi penyimpanan iOS dan iPadOS

Di iOS dan iPadOS, tidak ada navigasi atau transfer URL antara browser dan ikon yang diinstal. Meskipun PWA yang sama, setiap ikon PWA yang diinstal pengguna akan memiliki penyimpanannya sendiri, yang diisolasi dari tab Safari dan ikon lainnya. Saat pengguna membuka ikon yang terinstal, tidak ada penyimpanan yang dibagikan dengan Safari. Jika PWA Anda memerlukan login, pengguna harus login lagi. Jika aplikasi ditambahkan ke layar utama beberapa kali, pengguna memiliki sesi yang berbeda untuk setiap instance PWA.

Aplikasi terkait

Situs web menunjukkan hubungan dengan aplikasi melalui manifes. Untuk melakukannya, gunakan anggota related_applications dari spesifikasi Manifes Aplikasi Web. Kunci related_applications adalah array objek yang mewakili setiap aplikasi terkait. Setiap entri berisi platform, url, dan id opsional.

Berikut adalah beberapa kemungkinan nilai platform:

• chrome_web_store: Google Chrome Web Store.
• play: Aplikasi Google Play (Android dan ChromeOS).
• chromeos_play: ChromeOS Play.
• webapp: Aplikasi web.
• windows: Microsoft Store (Windows 10 dan 11).
• f-droid: F-droid.
• amazon: Amazon AppStore (FireOS).

Lebih suka aplikasi terkait

Saat pengguna menginstal aplikasi, Anda dapat mengalihkan pengguna ke aplikasi terkait jika menetapkan kolom prefer_related_applications ke true dalam manifes. Dengan penyiapan ini, alur penginstalan tidak akan menginstal PWA pada browser yang kompatibel; sebagai gantinya, pemicu akan memicu penginstalan store dari url atau id yang Anda tentukan dalam entri related_applications.

Aplikasi terkait dapat menjadi PWA Anda dan akan diinstal melalui app store. Salah satu keuntungan dari konfigurasi ini adalah, untuk saat ini, hanya aplikasi yang diinstal melalui app store yang dipulihkan dengan cadangan atau ketika Anda beralih ke perangkat baru.

{
  ...
  "related_applications:" [
     {
       "platform": "play",
       "url": "https://play.google.com/..."
     }
  ],
  "prefer_related_applications": true
}

Spanduk Apple Smart App

Safari tidak mendukung anggota related_applications, tetapi menawarkan Banner Aplikasi Cerdas untuk aplikasi di App Store. Jadi, jika ingin mempromosikan PWA atau aplikasi lain yang telah Anda publikasikan di App Store, Anda dapat menyertakan tag meta di HTML PWA untuk mengundang pengguna menginstal aplikasi (lihat link yang baru saja disediakan), atau mentransfer navigasi jika sudah diinstal.

Mendeteksi aplikasi terinstal terkait

Metode getInstalledRelatedApps() memungkinkan situs Anda memeriksa apakah aplikasi iOS/Android/desktop atau PWA diinstal di perangkat pengguna.

Memeriksa apakah aplikasi terkait telah diinstal akan membantu Anda menerapkan fitur seperti menyembunyikan perintah yang diinstal khusus atau mengalihkan pengguna langsung ke aplikasi yang diinstal, alih-alih membuka situs tujuan umum. Untuk menggunakan metode getInstalledRelatedApps(), baik aplikasi terinstal dan situs harus mengonfigurasi koneksi satu sama lain. Setiap aplikasi, bergantung pada platformnya, menyertakan metadata untuk mengenali situs dan situs akan menyertakan aplikasi terinstal yang diharapkan di kolom related_applications dalam manifesnya.

Alat seperti BubbleWrap atau PWA Builder, yang memungkinkan Anda memublikasikan PWA ke app store, sudah menambahkan metadata yang diperlukan sehingga situs Anda dapat langsung menggunakan getInstalledRelatedApps(). Untuk mendeteksi apakah PWA sudah diinstal menggunakan getInstalledRelatedApps(), tentukan webapp di kolom related_applications manifes dengan URL ke manifes Anda:

...
"related_applications": [{
   "platform": "webapp",
   "url": "https://example.com/manifest.json",
}],
...

getInstalledRelatedApps() menampilkan array objek aplikasi. Jika array kosong, aplikasi terkait tidak diinstal.

const relatedApps = await navigator.getInstalledRelatedApps();
const PWAisInstalled = relatedApps.length > 0;

Mendeteksi penginstalan dari luar cakupan PWA

Dari Chrome di Android 89, Anda dapat mendeteksi apakah PWA sudah diinstal, bahkan dari luar cakupan PWA. PWA Anda harus menetapkan file JSON dalam folder /.well-known/, yang memberikan izin ke cakupan lain, seperti yang dijelaskan dalam artikel ini.

Resource

• Apakah aplikasi Anda sudah diinstal? getInstallTerkaitApps() akan memberi tahu Anda.
• MDN: Aplikasi Terkait
• MDN: Peristiwa AppMenginstal
• Apple: Mempromosikan Aplikasi dengan Banner Aplikasi Cerdas