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.
- Dengan Chrome 96 atau yang lebih baru, buka panel Manifest pada panel Application di DevTools.
- Arahkan kursor ke ikon
(!)
di samping properti App ID. Ikon tooltip(!)
hanya akan muncul jikaid
tidak ditentukan dalam file manifes aplikasi web. - Perhatikan nilai
id
yang ditampilkan di tip alat (lihat screenshot di bawah). - Tambahkan properti
id
ke manifes aplikasi web menggunakan nilaiid
yang ditampilkan dalam tooltip.
{
...
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:
- Instal PWA.
- Buka
about://web-app-internals/
lalu periksa propertiunhashed_app_id
danstart_url
untuk PWA yang diinstal. - Tambahkan properti
id
ke manifes aplikasi web dengan mengikuti langkah-langkah dalam Cara menentukan dan menyetelid
di atas. - Mulai ulang browser menggunakan
chrome://restart
, luncurkan PWA dariabout://apps
, lalu tutup PWA untuk memaksa file manifes dimuat ulang. - Buka
about://web-app-internals/
dan periksa propertimanifest_id
untuk PWA yang diinstal guna memverifikasi bahwa properti tersebut tidak berubah. - Ubah
start_url
di manifes aplikasi web. - Mulai ulang browser menggunakan
chrome://restart
, luncurkan PWA dariabout://apps
, lalu tutup PWA untuk memaksa file manifes dimuat ulang. - Buka
about://web-app-internals/
dan periksa propertistart_url
untuk PWA yang diinstal guna memverifikasi bahwa properti telah diupdate seperti yang diharapkan.