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

Pete LePage

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

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

พร็อพเพอร์ตี้ id ทํางานอย่างไร

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

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

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

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

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

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

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

  1. หากใช้ Chrome 96 ขึ้นไป ให้เปิดแผงไฟล์ Manifest ของแผงแอปพลิเคชันในเครื่องมือสำหรับนักพัฒนาเว็บ
  2. หมายเหตุใต้พร็อพเพอร์ตี้ Computed App Id จะปรากฏขึ้นเมื่อไม่ได้ระบุ 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 ได้ (หากต้นทางของ id นั้นไม่เปลี่ยนแปลง) เนื่องจากเบราว์เซอร์จะระบุ PWA ตาม id ที่ระบุ ไม่ใช่ start_url หรือเส้นทางไฟล์ Manifest

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

หากต้องการทดสอบลักษณะการทํางาน ให้ทําตามขั้นตอนต่อไปนี้

  1. ติดตั้ง PWA
  2. เปิด about://web-app-internals/ แล้วตรวจสอบพร็อพเพอร์ตี้ manifest_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 ที่ติดตั้งเพื่อยืนยันว่ามีการอัปเดตตามที่คาดไว้

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