ระบุ 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. วางเมาส์เหนือไอคอน (!) ถัดจากพร็อพเพอร์ตี้รหัสแอป ไอคอนเคล็ดลับเครื่องมือ (!) จะปรากฏก็ต่อเมื่อไม่ได้ระบุ id ในไฟล์ Manifest ของเว็บแอปเท่านั้น
  3. สังเกตค่า id ที่แสดงในเคล็ดลับเครื่องมือ (ดูภาพหน้าจอด้านล่าง)
  4. เพิ่มพร็อพเพอร์ตี้ id ลงในไฟล์ Manifest ของเว็บแอปโดยใช้ค่า id ที่แสดงในเคล็ดลับเครื่องมือ

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

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

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

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

การเพิ่ม id ลงในไฟล์ Manifest ของเว็บแอปช่วยให้เปลี่ยน start_url และเส้นทางไฟล์ Manifest ได้ (หากและต้นทางที่เฉพาะเจาะจงของแต่ละรายการยังคงเหมือนเดิม) เนื่องจากเบราว์เซอร์จะระบุ 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 ที่ติดตั้งเพื่อยืนยันว่ามีการอัปเดตตามที่คาดไว้

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