การลงทะเบียนตัวแฮนเดิลโปรโตคอลของ 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()

เมธอด Navigator สำหรับเนื้อหาที่ปลอดภัยเท่านั้น registerProtocolHandler() ช่วยให้เว็บไซต์ลงทะเบียนความสามารถในการเปิดหรือจัดการ URL Scheme ที่เฉพาะเจาะจงได้ ดังนั้น เว็บไซต์จึงต้องเรียกใช้เมธอดในลักษณะนี้ 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