การลงทะเบียนตัวแฮนเดิลโปรโตคอลของ 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 ที่เฉพาะเจาะจงได้ ดังนั้น เว็บไซต์จึงต้องเรียกใช้เมธอดดังนี้ 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 ของงานนำเสนอจะเปิดขึ้นโดยอัตโนมัติในขอบเขตที่ถูกต้องและแสดงชุดสไลด์
  • ในแอปแชทเฉพาะแพลตฟอร์ม ผู้ใช้ในข้อความแชทจะได้รับลิงก์ไปยัง magnet URL เมื่อคลิกลิงก์ 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 คุณสามารถดูและทดสอบโปรโตคอลทั้งหมดที่ใช้ได้ได้ที่นี่

เช่น ติดตั้ง PWA เดโมนี้ ในส่วนตัวแฮนเดิลโปรโตคอล ให้พิมพ์ "americano" แล้วคลิกทดสอบโปรโตคอลเพื่อเปิดหน้ากาแฟใน PWA

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

สาธิต

คุณดูการสาธิตการลงทะเบียนตัวแฮนเดิลโปรโตคอลของ URL สําหรับ PWA ได้ใน Glitch

  1. ไปที่ https://protocol-handler.glitch.me/ ติดตั้ง PWA และโหลดแอปอีกครั้งหลังจากติดตั้ง ตอนนี้เบราว์เซอร์ได้ลงทะเบียน PWA เป็นตัวจัดการโปรโตคอล web+coffee กับระบบปฏิบัติการแล้ว
  2. ในหน้าต่าง PWA ที่ติดตั้ง ให้คลิกลิงก์ https://protocol-handler-link.glitch.me/ ซึ่งจะเปิดแท็บเบราว์เซอร์ใหม่ที่มีลิงก์ 3 รายการ คลิกรายการแรกหรือรายการที่ 2 (ลาเต้มาคิยาโตหรืออเมริกาโน) ตอนนี้เบราว์เซอร์จะแสดงข้อความแจ้งและถามว่าคุณอนุญาตให้แอปเป็นตัวแฮนเดิลโปรโตคอลสำหรับโปรโตคอล web+coffee หรือไม่ หากคุณยอมรับ PWA จะเปิดขึ้นและแสดงกาแฟที่เลือก
  3. หากต้องการเปรียบเทียบกับขั้นตอนแบบดั้งเดิมที่ใช้ navigator.registerProtocolHandler() ให้คลิกปุ่มลงทะเบียนตัวแฮนเดิลโปรโตคอลใน PWA จากนั้นในแท็บเบราว์เซอร์ ให้คลิกลิงก์ที่ 3 (chai) การดำเนินการนี้จะแสดงข้อความแจ้งด้วยเช่นกัน แต่ระบบจะเปิด PWA ในแท็บ ไม่ใช่ในหน้าต่างเบราว์เซอร์
  4. ส่งข้อความถึงตัวเองในแอปพลิเคชันเฉพาะแพลตฟอร์ม เช่น Skype ใน Windows ที่มีลิงก์อย่างเช่น <a href="web+coffee://americano">Americano</a> แล้วคลิกลิงก์นั้น และควรเปิด PWA ที่ติดตั้งไว้ด้วย

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

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

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

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

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

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

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

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

ความคิดเห็น

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

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

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

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

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

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

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

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

ขอขอบคุณ

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