Secara unik mengidentifikasi PWA dengan properti ID manifes aplikasi web

Pete LePage

Saat pengguna menginstal PWA Anda, browser membutuhkan cara untuk mengidentifikasi secara unik PWA. Namun, sampai saat ini, spesifikasi manifes aplikasi web tidak secara eksplisit menentukan cara untuk mengidentifikasi PWA secara unik, sehingga browserlah yang memutuskan dan yang mengarah ke implementasi yang berbeda. Di beberapa browser, start_url digunakan, sementara di tempat lain, jalur ke file manifes digunakan, sehingga tidak mungkin memperbarui salah satu {i>field<i} tersebut.

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

Apa fungsi properti id?

Properti id mewakili identitas PWA ke browser. Kapan browser melihat manifes yang tidak memiliki identitas yang sesuai dengan PWA yang sudah diinstal, itu akan memperlakukannya sebagai PWA baru, bahkan jika PWA ditayangkan dari URL yang sama dengan PWA lain. Namun, jika melihat manifes dengan identitas yang cocok dengan PWA yang sudah diinstal, itu akan memperlakukannya sebagai PWA yang diinstal.

Dukungan browser

Dukungan untuk properti id tersedia di Chrome 96.

Apa yang harus dilakukan jika saya memiliki aplikasi tanpa id?

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

Bagaimana cara menentukan dan menyetel id saya?

Cara paling aman dan akurat guna menentukan id untuk PWA adalah memeriksa nilai yang dihitung oleh Chrome.

  1. Menggunakan Chrome 96 atau yang lebih baru, buka Panel Manifest di panel Application di DevTools.
  2. Arahkan kursor ke ikon (!) di samping properti ID Aplikasi. Tujuan Ikon tooltip (!) hanya akan muncul jika id tidak ditentukan di 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 di tooltip.

Tooltip yang menampilkan &#39;id&#39; dengan sejumlah nilai.

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

Bagaimana jika saya tidak menyetel id?

Jangan khawatir, tidak akan ada yang rusak. Mulai Chrome 96, browser akan menghasilkan id jika belum ada dalam manifes berdasarkan start_url di manifes aplikasi web.

Menambahkan id ke manifes aplikasi web memungkinkan mengubah start_url dan jalur manifes (jika dan hanya jika origin tetap sama!), karena {i>browser<i} akan mengidentifikasi PWA berdasarkan id yang ditentukan, bukan start_url, atau .

Bagaimana cara mengujinya?

Untuk menguji perilaku, ikuti langkah-langkah berikut:

  1. Instal PWA.
  2. Buka about://web-app-internals/, lalu periksa unhashed_app_id dan start_url untuk PWA yang diinstal.
  3. Tambahkan properti id ke manifes aplikasi web dengan mengikuti langkah-langkah di 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 untuk memverifikasi bahwa PWA 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 untuk memverifikasi bahwa PWA telah diupdate seperti yang diharapkan.

Referensi lainnya