การลงทะเบียนตัวแฮนเดิลโปรโตคอลของ URL สําหรับ PWA

อนุญาตให้ PWA ที่ติดตั้งจัดการลิงก์ที่ใช้โปรโตคอลที่เฉพาะเจาะจงเพื่อประสบการณ์การใช้งานที่ผสานรวมมากขึ้น

Thomas Steiner

เบื้องหลังของสคีมา (หรือโปรโตคอล)

Uniform Resource Identifier (URI) คือลำดับอักขระที่กะทัดรัดซึ่งระบุทรัพยากรที่เป็นนามธรรมหรือทางกายภาพ URI แต่ละรายการจะเริ่มต้นด้วยชื่อ สคีมาที่อ้างอิงถึงข้อกำหนดสำหรับการ กำหนดตัวระบุภายในสคีมานั้น ด้วยเหตุนี้ ไวยากรณ์ URI จึงเป็นระบบการตั้งชื่อแบบรวมและขยายได้ ซึ่งข้อกำหนดของแต่ละสคีมาอาจจำกัดไวยากรณ์และความหมายของตัวระบุที่ใช้สคีมานั้นเพิ่มเติม สคีมาเรียกอีกอย่างว่าโปรโตคอล คุณดูตัวอย่างสคีมาได้

tel:+1-816-555-1212
mailto:Jane.Doe@example.com
news:comp.infosystems.www.servers.unix
https://web.dev/

คำว่า Uniform Resource Locator (URL) หมายถึงส่วนย่อยของ URI ที่นอกเหนือจากการระบุทรัพยากรแล้ว ยังมีวิธีการค้นหาทรัพยากรโดยอธิบายกลไกการเข้าถึงหลัก (เช่น ตำแหน่งในเครือข่าย)

เบื้องหลังของเมธอด registerProtocolHandler()

เมธอด registerProtocolHandler() Navigatorที่มีเนื้อหาที่ปลอดภัยเท่านั้นช่วยให้เว็บไซต์ลงทะเบียนความสามารถในการเปิดหรือจัดการสคีมา URL ที่เฉพาะเจาะจงได้ ดังนั้น เว็บไซต์จึงต้องเรียกเมธอดดังนี้ navigator.registerProtocolHandler(scheme, url) พารามิเตอร์ 2 รายการมีคำจำกัดความดังนี้

  • scheme: สตริงที่มีโปรโตคอลที่เว็บไซต์ต้องการจัดการ
  • url: สตริงที่มี URL ของตัวแฮนเดิล URL นี้ต้องมี %s เป็นตัวยึดตำแหน่งที่จะแทนที่ด้วย URL ที่หลีกแล้วซึ่งจะได้รับการจัดการ

สคีมาต้องเป็นหนึ่งใน สคีมาที่อยู่ในรายการที่อนุญาต (เช่น mailto, bitcoin หรือ magnet) หรือเริ่มต้นด้วย web+ ตามด้วยตัวอักษร ASCII ตัวเล็กอย่างน้อย 1 ตัวขึ้นไปหลังจากคำนำหน้า web+ เช่น web+coffee

ตัวอย่างขั้นตอนการทำงานที่ชัดเจนมีดังนี้

  1. ผู้ใช้เข้าชมเว็บไซต์ที่ https://coffeeshop.example.com/ ซึ่งทำการเรียก navigator.registerProtocolHandler('web+coffee', 'coffee?type=%s')
  2. ต่อมาขณะเข้าชม https://randomsite.example.com/ ผู้ใช้คลิกลิงก์ เช่น <a href="web+coffee:latte-macchiato">All about latte macchiato</a>
  3. การดำเนินการนี้จะทำให้เบราว์เซอร์ไปยัง URL ต่อไปนี้ https://coffeeshop.example.com/coffee?type=web%2Bcoffee%3A%2F%2Flatte-macchiato จากนั้นสตริงการค้นหาที่ถอดรหัส URL แล้วจะมีลักษณะเป็น ?type=web+coffee://latte-macchiato

เกี่ยวกับการจัดการโปรโตคอล

กลไก การลงทะเบียนตัวแฮนเดิลโปรโตคอลของ URL สำหรับ PWA ในปัจจุบันมีวัตถุประสงค์เพื่อเสนอการลงทะเบียนตัวแฮนเดิลโปรโตคอลเป็นส่วนหนึ่งของการติดตั้ง PWA ผ่านไฟล์ Manifest หลังจากลงทะเบียน PWA เป็นตัวแฮนเดิลโปรโตคอลแล้ว เมื่อผู้ใช้คลิกลิงก์ไฮเปอร์ลิงก์ที่มีสคีมาที่เฉพาะเจาะจง เช่น mailto , bitcoin หรือ web+music จากเบราว์เซอร์หรือแอปที่เฉพาะเจาะจงของแพลตฟอร์ม PWA ที่ลงทะเบียนไว้จะเปิดขึ้นและรับ URL โปรดทราบว่าทั้งการลงทะเบียนตามไฟล์ Manifest ที่เสนอและการลงทะเบียน registerProtocolHandler() แบบเดิมมีบทบาทที่คล้ายกันมากในทางปฏิบัติ ขณะเดียวกันก็ยังคงเปิดโอกาสให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่เสริมกันได้

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

กรณีการใช้งาน

  • ใน PWA สำหรับประมวลผลคำ ผู้ใช้ในเอกสารจะเห็นลิงก์ไปยังงานนำเสนอ เช่น web+presentations://deck2378465 เมื่อผู้ใช้คลิกลิงก์ PWA สำหรับงานนำเสนอจะเปิดขึ้นโดยอัตโนมัติในขอบเขตที่ถูกต้องและแสดงชุดสไลด์
  • ในแอปแชทที่เฉพาะเจาะจงของแพลตฟอร์ม ผู้ใช้ในข้อความแชทจะได้รับลิงก์ไปยัง URL magnet เมื่อคลิกลิงก์ PWA สำหรับ Torrent ที่ติดตั้งไว้จะเปิดขึ้นและเริ่มดาวน์โหลด
  • ผู้ใช้ได้ติดตั้ง PWA สำหรับการสตรีมเพลงไว้ เมื่อเพื่อนแชร์ลิงก์ไปยังเพลง เช่น web+music://songid=1234&time=0:13 และผู้ใช้คลิกลิงก์ดังกล่าว PWA สำหรับการสตรีมเพลงจะ เปิดขึ้นโดยอัตโนมัติในหน้าต่างแบบสแตนด์อโลน

วิธีใช้การลงทะเบียนตัวแฮนเดิลโปรโตคอลของ URL สำหรับ PWA

API สำหรับการลงทะเบียนตัวแฮนเดิลโปรโตคอลของ URL ได้รับการออกแบบตาม navigator.registerProtocolHandler() อย่างใกล้ชิด เพียงแต่ครั้งนี้ข้อมูลจะถูกส่งผ่านแบบประกาศโดยใช้ ไฟล์ Manifest ของเว็บแอปในพร็อพเพอร์ตี้ใหม่ที่เรียกว่า "protocol_handlers" ซึ่งรับอาร์เรย์ของ ออบเจ็กต์ที่มีคีย์ที่จำเป็น 2 รายการ ได้แก่ "protocol" และ "url" ข้อมูลโค้ดต่อไปนี้แสดงวิธีลงทะเบียน web+tea และ web+coffee ค่าจะเป็นสตริงที่มี URL ของตัวแฮนเดิลพร้อมตัวยึดตำแหน่ง %s ที่จำเป็นสำหรับ URL ที่หลีกแล้ว

{
  "protocol_handlers": [
    {
      "protocol": "web+tea",
      "url": "/tea?type=%s"
    },
    {
      "protocol": "web+coffee",
      "url": "/coffee?type=%s"
    }
  ]
}

แอปหลายแอปที่ลงทะเบียนสำหรับโปรโตคอลเดียวกัน

หากแอปพลิเคชันหลายแอปพลิเคชันลงทะเบียนตัวเองเป็นตัวแฮนเดิลสำหรับสคีมาเดียวกัน เช่น โปรโตคอล mailto ระบบปฏิบัติการจะแสดงตัวเลือกให้ผู้ใช้และให้ผู้ใช้ตัดสินใจว่าจะใช้ตัวแฮนเดิลที่ลงทะเบียนไว้ตัวใด

แอปเดียวกันที่ลงทะเบียนสำหรับโปรโตคอลหลายรายการ

แอปเดียวกันสามารถลงทะเบียนตัวเองสำหรับโปรโตคอลหลายรายการได้ ดังที่แสดงในตัวอย่างโค้ด

การอัปเดตแอปและการลงทะเบียนตัวแฮนเดิล

การลงทะเบียนตัวแฮนเดิลจะซิงค์กับไฟล์ Manifest เวอร์ชันล่าสุดที่แอปให้มา โดยมี 2 กรณีดังนี้

  • การอัปเดตที่เพิ่มตัวแฮนเดิลใหม่จะทริกเกอร์การลงทะเบียนตัวแฮนเดิล (แยกจากการติดตั้งแอป)
  • การอัปเดตที่นำตัวแฮนเดิลออกจะทริกเกอร์การยกเลิกการลงทะเบียนตัวแฮนเดิล (แยกจากการถอนการติดตั้งแอป)

การแก้ไขข้อบกพร่องของตัวแฮนเดิลโปรโตคอลในเครื่องมือสำหรับนักพัฒนาเว็บ

ไปที่ส่วนตัวแฮนเดิลโปรโตคอล โดยใช้แผงแอปพลิเคชัน > ไฟล์ Manifest คุณสามารถดูและทดสอบโปรโตคอลที่มีทั้งหมดได้ที่นี่

ตัวแฮนเดิลโปรโตคอลในแผง Manifest

ข้อควรพิจารณาด้านความปลอดภัย

เนื่องจากการติดตั้ง PWA ต้องใช้บริบทที่ปลอดภัย การจัดการโปรโตคอลจึงสืบทอดข้อจำกัดนี้ ระบบจะไม่เปิดเผยรายการตัวแฮนเดิลโปรโตคอลที่ลงทะเบียนไว้บนเว็บในทุกกรณี จึงไม่สามารถใช้เป็นเวกเตอร์การระบุตัวตนได้

ความพยายามในการนำทางที่ผู้ใช้ไม่ได้เริ่ม

ความพยายามในการนำทางที่ผู้ใช้ไม่ได้เริ่ม แต่เป็นแบบเป็นโปรแกรมอาจไม่เปิดแอป URL โปรโตคอลที่กำหนดเองจะใช้ได้ในบริบทการท่องเว็บระดับบนสุดเท่านั้น แต่ใช้ไม่ได้ เช่น เป็น URL ของ iframe

รายการที่อนุญาตของโปรโตคอล

เช่นเดียวกับ registerProtocolHandler() มีรายการที่อนุญาตของโปรโตคอลที่แอปสามารถลงทะเบียนเพื่อจัดการได้

เมื่อเปิด PWA เป็นครั้งแรกเนื่องจากมีการเรียกใช้โปรโตคอล ผู้ใช้จะเห็นกล่องโต้ตอบการขอสิทธิ์ กล่องโต้ตอบนี้จะแสดงชื่อแอปและต้นทางของแอป และถามผู้ใช้ว่าอนุญาตให้แอปจัดการลิงก์จากโปรโตคอลได้หรือไม่ หากผู้ใช้ปฏิเสธกล่องโต้ตอบการขอสิทธิ์ ระบบปฏิบัติการจะละเว้นตัวแฮนเดิลโปรโตคอลที่ลงทะเบียนไว้ หากต้องการยกเลิกการลงทะเบียนตัวแฮนเดิลโปรโตคอล ผู้ใช้ต้องถอนการติดตั้ง PWA ที่ลงทะเบียนตัวแฮนเดิล นอกจากนี้ เบราว์เซอร์จะยกเลิกการลงทะเบียนตัวแฮนเดิลโปรโตคอลด้วยหากผู้ใช้เลือก "จดจำตัวเลือกของฉัน" และเลือก "ไม่อนุญาต"

ความคิดเห็น

ทีม Chromium อยากทราบความคิดเห็นของคุณเกี่ยวกับประสบการณ์การใช้งานการลงทะเบียนตัวแฮนเดิลโปรโตคอลของ URL สำหรับ PWA

บอกเราเกี่ยวกับการออกแบบ API

มีบางอย่างเกี่ยวกับ API ที่ไม่ทำงานตามที่คุณคาดไว้ไหม หรือมีเมธอดหรือพร็อพเพอร์ตี้ที่ขาดหายไปซึ่งคุณต้องใช้เพื่อนำแนวคิดไปใช้ไหม หากมีคำถามหรือความคิดเห็นเกี่ยวกับโมเดลความปลอดภัย โปรดแจ้งปัญหาเกี่ยวกับข้อกำหนดในที่เก็บ GitHub ที่เกี่ยวข้อง หรือเพิ่มความคิดเห็นของคุณลงในปัญหาที่มีอยู่

รายงานปัญหาเกี่ยวกับการใช้งาน

คุณพบข้อบกพร่องในการใช้งาน Chromium ไหม หรือการใช้งานแตกต่างจากข้อกำหนดไหม โปรดแจ้งข้อบกพร่องที่ new.crbug.com อย่าลืมใส่รายละเอียดให้มากที่สุดเท่าที่จะทำได้ รวมถึงวิธีการจำลองปัญหา และป้อน UI>Browser>WebAppInstalls ในช่องคอมโพเนนต์

แสดงการสนับสนุน API

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

แชร์วิธีที่คุณวางแผนจะใช้ฟีเจอร์นี้ในเธรด WICG Discourse ส่งทวีตไปที่ @ChromiumDev โดยใช้แฮชแท็ก #ProtocolHandler และบอกให้เราทราบว่าคุณใช้ฟีเจอร์นี้ที่ใดและอย่างไร

คำขอบคุณ

การลงทะเบียนตัวแฮนเดิลโปรโตคอลของ URL สำหรับ PWA ได้รับการใช้งานและระบุโดย Fabio Rocha, Diego González, Connor Moody และ Samuel Tang จากทีม Microsoft Edge เอกสารนี้ได้รับการตรวจสอบโดย Joe Medley และ Fabio Rocha