ระบุ PWA ที่ไม่ซ้ำกันด้วยพร็อพเพอร์ตี้รหัสไฟล์ Manifest ของเว็บแอป

Pete LePage

เมื่อผู้ใช้ติดตั้ง PWA เบราว์เซอร์จะต้องมีวิธีระบุแบบไม่ซ้ำกัน PWA แต่ก่อนหน้านี้ ข้อมูลจำเพาะของไฟล์ Manifest ของเว็บแอปไม่ได้ กำหนดวิธีระบุ PWA แบบไม่ซ้ำ ปล่อยให้เบราว์เซอร์ตัดสินใจเลือก นำไปสู่การติดตั้งใช้งานที่แตกต่างกัน ในบางเบราว์เซอร์ start_url ขณะที่ในบางกรณี จะมีการใช้เส้นทางไปยังไฟล์ Manifest ซึ่งทำให้ เลยไม่ได้อัปเดตทั้ง 2 ช่อง

มีพร็อพเพอร์ตี้ id ที่ไม่บังคับใหม่ในเว็บแอปเพื่อแก้ไขปัญหานี้ ข้อกำหนดของไฟล์ Manifest ซึ่งให้คุณกำหนดตัวระบุที่ใช้สำหรับ PWA ของคุณ การเพิ่มพร็อพเพอร์ตี้ id ลงในไฟล์ Manifest จะนำทรัพยากร Dependency ของ start_url หรือตำแหน่งที่ตั้งของไฟล์ Manifest และทำให้สามารถ จะอัปเดตในอนาคต

พร็อพเพอร์ตี้ id มีหน้าที่อะไร

พร็อพเพอร์ตี้ id แสดงข้อมูลระบุตัวตนของ PWA ต่อเบราว์เซอร์ วันและเวลา เบราว์เซอร์เห็นไฟล์ Manifest ที่ไม่มีข้อมูลระบุตัวตนตรงกับ ติดตั้ง PWA ไว้แล้ว จะถือว่าเป็น PWA ใหม่ แม้ว่าจะมีให้ใช้งาน จาก URL เดียวกับ PWA อีกรายการ แต่หากไฟล์ Manifest ที่มีข้อมูลประจำตัว ที่ตรงกับ PWA ที่ติดตั้งไว้แล้ว ระบบจะถือว่า PWA นั้นเป็น PWA ที่ติดตั้งไว้

การสนับสนุนเบราว์เซอร์

การรองรับพร็อพเพอร์ตี้ id พร้อมให้ใช้งานใน Chrome 96 แล้ว

ฉันควรทำอย่างไรหากมีแอปที่ไม่มี id

คุณไม่จำเป็นต้องดำเนินการใดๆ และไม่ต้องดำเนินการใดๆ เพิ่มเติมหาก อย่าเพิ่ม id ลงในไฟล์ Manifest ของเว็บแอป (ตราบใดที่ไฟล์ start_url และ เส้นทางของไฟล์ Manifest ยังคงเหมือนเดิม) เพื่อให้ PWA รองรับการใช้งานในอนาคต คุณอาจเพิ่ม พร็อพเพอร์ตี้ id ไปยังไฟล์ Manifest ของเว็บแอป

ฉันจะกำหนดและตั้งค่า id ได้อย่างไร

วิธีระบุ id สำหรับ PWA ที่ปลอดภัยและแม่นยำที่สุด คือการตรวจสอบค่าที่ Chrome คำนวณ

  1. หากใช้ Chrome 96 ขึ้นไป ให้เปิด แผงไฟล์ Manifest ของแผงแอปพลิเคชันในเครื่องมือสำหรับนักพัฒนาเว็บ
  2. วางเมาส์เหนือไอคอน (!) ข้างพร็อพเพอร์ตี้รหัสแอป ไอคอนเคล็ดลับเครื่องมือ (!) จะปรากฏก็ต่อเมื่อระบุ id ไม่ ใน ไฟล์ Manifest ของเว็บแอป
  3. สังเกตค่า id ที่แสดงในเคล็ดลับเครื่องมือ (ดูภาพหน้าจอด้านล่าง)
  4. เพิ่มพร็อพเพอร์ตี้ id ลงในไฟล์ Manifest ของเว็บแอปโดยใช้ค่า id ที่แสดงใน เคล็ดลับเครื่องมือ

เคล็ดลับเครื่องมือแสดง "รหัส" 

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

จะเกิดอะไรขึ้นหากฉันไม่ได้ตั้งค่า id

ไม่ต้องกังวล จะไม่มีสิ่งใดเสียหาย เริ่มตั้งแต่ Chrome 96 เป็นต้นไป เบราว์เซอร์จะสร้าง id หากไม่มีไฟล์ Manifest ตาม start_url ในไฟล์ Manifest ของเว็บแอป

การเพิ่ม id ลงในไฟล์ Manifest ของเว็บแอปทำให้เป็นไปได้ เพื่อเปลี่ยน start_url และเส้นทางไฟล์ Manifest (ถ้าและเฉพาะในกรณีที่ origin ยังคงเหมือนเดิม) เพราะเบราว์เซอร์จะ ระบุ PWA ตาม id ที่ระบุ ไม่ใช่ start_url หรือ เส้นทางไฟล์ Manifest

ฉันจะทดสอบได้อย่างไร

หากต้องการทดสอบลักษณะการทำงาน ให้ทำตาม ขั้นตอนเหล่านี้:

  1. ติดตั้ง PWA
  2. เปิด about://web-app-internals/ และตรวจสอบunhashed_app_id และ พร็อพเพอร์ตี้ start_url สำหรับ PWA ที่ติดตั้ง
  3. เพิ่มพร็อพเพอร์ตี้ id ลงในไฟล์ Manifest ของเว็บแอปโดยทำตามขั้นตอนใน ฉันจะกำหนดและตั้งค่า id ข้างต้นได้อย่างไร
  4. รีสตาร์ทเบราว์เซอร์โดยใช้ chrome://restart เปิด PWA จาก about://apps จากนั้นปิด PWA เพื่อบังคับให้ไฟล์ Manifest รีเฟรช
  5. เปิด about://web-app-internals/ และตรวจสอบพร็อพเพอร์ตี้ manifest_id สำหรับ PWA ที่ติดตั้งไว้เพื่อยืนยันว่าไม่มีการเปลี่ยนแปลง
  6. เปลี่ยน start_url ในไฟล์ Manifest ของเว็บแอป
  7. รีสตาร์ทเบราว์เซอร์โดยใช้ chrome://restart เปิด PWA จาก about://apps จากนั้นปิด PWA เพื่อบังคับให้ไฟล์ Manifest รีเฟรช
  8. เปิด about://web-app-internals/ และตรวจสอบพร็อพเพอร์ตี้ start_url สำหรับ PWA ที่ติดตั้งเพื่อยืนยันว่าได้รับการอัปเดตตามที่คาดไว้

แหล่งข้อมูลเพิ่มเติม