Secara unik mengidentifikasi PWA dengan properti ID manifes aplikasi web

Pete LePage

Saat pengguna menginstal PWA, browser memerlukan cara untuk mengidentifikasi PWA secara unik. Namun, hingga baru-baru ini, spesifikasi manifes aplikasi web tidak secara eksplisit menentukan cara untuk mengidentifikasi PWA secara unik, sehingga browser dapat menentukan dan menghasilkan implementasi yang berbeda. Di beberapa browser, start_url digunakan, sementara di browser lain, jalur ke file manifes digunakan sehingga tidak dapat memperbarui salah satu kolom tersebut.

Untuk mengatasi masalah ini, ada properti id opsional baru di spesifikasi manifes aplikasi web, yang memungkinkan Anda menentukan secara eksplisit ID yang digunakan untuk PWA Anda. Menambahkan properti id ke manifes akan menghapus dependensi pada start_url atau lokasi manifes, dan memungkinkannya diupdate di masa mendatang.

Apa fungsi properti id?

Properti id merepresentasikan identitas PWA untuk browser. Saat melihat manifes yang tidak memiliki identitas yang cocok dengan PWA yang sudah terinstal, browser akan memperlakukannya sebagai PWA baru, meskipun ditampilkan dari URL yang sama dengan PWA lain. Namun, jika Google Play mendeteksi manifes dengan identitas yang cocok dengan PWA yang sudah diinstal, aplikasi akan memperlakukannya sebagai PWA yang diinstal.

Dukungan browser

Dukungan untuk properti id tersedia di Chrome 96.

Apa yang harus saya lakukan jika memiliki aplikasi tanpa id?

Anda tidak perlu melakukan apa pun, dan tidak ada yang akan rusak jika Anda tidak menambahkan id ke manifes aplikasi web (selama start_url dan jalur manifes tetap sama). Agar PWA siap menghadapi masa depan, Anda dapat menambahkan properti id ke manifes aplikasi web Anda.

Bagaimana cara menentukan dan menyetel id saya?

Cara teraman, dan paling akurat, untuk menentukan id untuk PWA adalah dengan memeriksa nilai yang dihitung oleh Chrome.

  1. Dengan Chrome 96 atau yang lebih baru, buka panel Manifest pada panel Application di DevTools.
  2. Arahkan kursor ke ikon (!) di samping properti App ID. Ikon tooltip (!) hanya akan muncul jika id tidak ditentukan dalam file manifes aplikasi web.
  3. Perhatikan nilai id yang ditampilkan di tip alat (lihat screenshot di bawah).
  4. Tambahkan properti id ke manifes aplikasi web menggunakan nilai id yang ditampilkan dalam tooltip.

Tooltip yang menampilkan nilai 'id'.

{
  ...
  id: "/?homescreen=1",
  start_url: "/?homescreen=1",
  ...
}

Bagaimana jika saya tidak menetapkan id?

Jangan khawatir, tidak akan ada kerusakan. Mulai Chrome 96, browser akan membuat id jika belum ada kode dalam manifes berdasarkan start_url di manifes aplikasi web.

Dengan menambahkan id ke manifes aplikasi web, Anda dapat mengubah start_url dan jalur manifes (jika dan hanya jika origin khusus miliknya tetap sama, karena browser akan mengidentifikasi PWA berdasarkan id yang ditentukan, bukan start_url atau jalur manifes.

Bagaimana cara mengujinya?

Untuk menguji perilaku tersebut, ikuti langkah-langkah berikut:

  1. Instal PWA.
  2. Buka about://web-app-internals/ lalu periksa properti unhashed_app_id dan start_url untuk PWA yang diinstal.
  3. Tambahkan properti id ke manifes aplikasi web dengan mengikuti langkah-langkah dalam Cara menentukan dan menyetel id di atas.
  4. Mulai ulang browser menggunakan chrome://restart, luncurkan PWA dari about://apps, lalu tutup PWA untuk memaksa file manifes dimuat ulang.
  5. Buka about://web-app-internals/ dan periksa properti manifest_id untuk PWA yang diinstal guna memverifikasi bahwa properti tersebut tidak berubah.
  6. Ubah start_url di manifes aplikasi web.
  7. Mulai ulang browser menggunakan chrome://restart, luncurkan PWA dari about://apps, lalu tutup PWA untuk memaksa file manifes dimuat ulang.
  8. Buka about://web-app-internals/ dan periksa properti start_url untuk PWA yang diinstal guna memverifikasi bahwa properti telah diupdate seperti yang diharapkan.

Referensi tambahan