อนุญาตให้ PWA ที่ติดตั้งจัดการลิงก์ที่ใช้โปรโตคอลที่เฉพาะเจาะจงเพื่อให้ได้รับประสบการณ์การใช้งานแบบผสานรวมมากขึ้น
ข้อมูลเบื้องต้นเกี่ยวกับรูปแบบ (หรือที่เรียกว่าโปรโตคอล)
Uniform Resource Identifier (URL) คือลำดับอักขระขนาดกะทัดรัดที่ระบุทรัพยากรทางกายภาพหรือนามธรรม 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
ลองดูตัวอย่างที่เป็นรูปธรรมของกระบวนการนี้เพื่อให้เข้าใจได้อย่างชัดเจนยิ่งขึ้น
- ผู้ใช้เข้าชมเว็บไซต์ที่
https://coffeeshop.example.com/
ซึ่งทําการเรียกใช้ต่อไปนี้navigator.registerProtocolHandler('web+coffee', 'coffee?type=%s')
- ต่อมาขณะเข้าชม
https://randomsite.example.com/
ผู้ใช้คลิกลิงก์ เช่น<a href="web+coffee:latte-macchiato">All about latte macchiato</a>
- ซึ่งจะทำให้เบราว์เซอร์ไปยัง 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 กรณีดังนี้
- การอัปเดตที่เพิ่มตัวแฮนเดิลใหม่จะทริกเกอร์การลงทะเบียนตัวแฮนเดิล (แยกจากการติดตั้งแอป)
- การอัปเดตที่นำตัวแฮนเดิลออกจะทริกเกอร์การยกเลิกการลงทะเบียนตัวแฮนเดิล (แยกจากการถอนการติดตั้งแอป)
การแก้ไขข้อบกพร่องของตัวแฮนเดิลโปรโตคอลในเครื่องมือสำหรับนักพัฒนาเว็บ
ไปที่ส่วน Protocol Handlers ผ่านแผงแอปพลิเคชัน > Manifest คุณสามารถดูและทดสอบโปรโตคอลทั้งหมดที่ใช้ได้ได้ที่นี่
เช่น ติดตั้ง PWA เดโมนี้ ในส่วน Protocol Handlers ให้พิมพ์ "americano" แล้วคลิก Test Protocol เพื่อเปิดหน้ากาแฟใน PWA
สาธิต
คุณดูการสาธิตการลงทะเบียนตัวแฮนเดิลโปรโตคอลของ URL สําหรับ PWA ได้ใน Glitch
- ไปที่ https://protocol-handler.glitch.me/ ติดตั้ง PWA แล้วโหลดแอปซ้ำหลังการติดตั้ง ตอนนี้เบราว์เซอร์ได้ลงทะเบียน PWA เป็นตัวจัดการโปรโตคอล
web+coffee
กับระบบปฏิบัติการแล้ว - คลิกลิงก์ https://protocol-handler-link.glitch.me/ ในหน้าต่าง PWA ที่ติดตั้งไว้ ซึ่งจะเปิดแท็บเบราว์เซอร์ใหม่ที่มีลิงก์ 3 รายการ ให้คลิกอันแรกหรืออันที่ 2 (ลาเต้มัคคิอาโตหรืออเมริกา) ตอนนี้เบราว์เซอร์จะแสดงข้อความแจ้งและถามว่าคุณอนุญาตให้แอปเป็นตัวแฮนเดิลโปรโตคอลสำหรับโปรโตคอล
web+coffee
หรือไม่ หากคุณยอมรับ PWA จะเปิดขึ้นและแสดงกาแฟที่เลือก - หากต้องการเปรียบเทียบกับขั้นตอนแบบดั้งเดิมที่ใช้
navigator.registerProtocolHandler()
ให้คลิกปุ่มลงทะเบียนตัวแฮนเดิลโปรโตคอลใน PWA จากนั้นในแท็บเบราว์เซอร์ ให้คลิกลิงก์ที่ 3 (chai) การดำเนินการนี้จะแสดงข้อความแจ้งด้วยเช่นกัน แต่ระบบจะเปิด PWA ในแท็บ ไม่ใช่ในหน้าต่างเบราว์เซอร์ - ส่งข้อความถึงตัวเองในแอปพลิเคชันเฉพาะแพลตฟอร์ม เช่น Skype ใน Windows พร้อมลิงก์ เช่น
<a href="web+coffee://americano">Americano</a>
แล้วคลิกลิงก์นั้น แล้วก็ควรเปิด PWA ที่ติดตั้ง
ข้อควรพิจารณาด้านความปลอดภัย
เนื่องจากการติดตั้ง PWA กำหนดให้บริบทต้องปลอดภัย การจัดการโปรโตคอลจึงรับข้อจำกัดนี้มา รายการเครื่องจัดการโปรโตคอลที่ลงทะเบียนไว้จะไม่แสดงบนเว็บไม่ว่าในทางใดก็ตาม จึงไม่สามารถใช้เป็นเวกเตอร์ลายนิ้วมือได้
ความพยายามในการไปยังส่วนต่างๆ ที่ไม่ได้เริ่มต้นโดยผู้ใช้
ความพยายามในการไปยังส่วนต่างๆ ที่ไม่ได้เริ่มต้นโดยผู้ใช้ แต่เป็นการดำเนินการแบบเป็นโปรแกรม จะไม่สามารถเปิดแอปได้ URL โปรโตคอลที่กำหนดเองใช้ได้เฉพาะในบริบทการท่องเว็บระดับบนสุดเท่านั้น แต่ไม่สามารถใช้เป็น URL ของ iframe ได้
รายการที่อนุญาตของโปรโตคอล
เช่นเดียวกับ registerProtocolHandler()
รายการที่อนุญาตของโปรโตคอลที่แอปสามารถลงทะเบียนเพื่อจัดการได้
ข้อความแจ้งความยินยอม
เมื่อเปิดใช้งาน PWA ครั้งแรกเนื่องจากโปรโตคอลที่เรียกใช้ ระบบจะแสดงกล่องโต้ตอบสิทธิ์แก่ผู้ใช้ กล่องโต้ตอบนี้จะแสดงชื่อแอปและต้นทางของแอป รวมถึงจะถามผู้ใช้ว่าอนุญาตให้แอปจัดการลิงก์จากโปรโตคอลหรือไม่ หากผู้ใช้ปฏิเสธกล่องโต้ตอบสิทธิ์ ระบบปฏิบัติการจะไม่สนใจตัวแฮนเดิลโปรโตคอลที่ลงทะเบียนไว้ หากต้องการยกเลิกการลงทะเบียนเครื่องมือจัดการโปรโตคอล ผู้ใช้จะต้องถอนการติดตั้ง PWA ที่ลงทะเบียนไว้ นอกจากนี้เบราว์เซอร์จะยกเลิกการลงทะเบียนตัวแฮนเดิลโปรโตคอลด้วยหากผู้ใช้เลือก "จดจำตัวเลือกของฉัน" และเลือก "ไม่อนุญาต"
ความคิดเห็น
ทีม Chromium ต้องการทราบประสบการณ์ของคุณเกี่ยวกับการลงทะเบียนตัวแฮนเดิลโปรโตคอล URL สำหรับ PWA
บอกเราเกี่ยวกับการออกแบบ API
มีสิ่งใดเกี่ยวกับ API ที่ไม่ทำงานตามที่คาดไว้ไหม หรือยังไม่มีวิธีการหรือคุณสมบัติ ที่คุณต้องใช้เพื่อนำไอเดียของคุณไปปฏิบัติ หากมีคำถามหรือความคิดเห็นเกี่ยวกับรูปแบบการรักษาความปลอดภัย แจ้งปัญหาเกี่ยวกับที่เก็บ GitHub ที่เกี่ยวข้อง หรือเพิ่มความคิดเห็นของคุณเกี่ยวกับปัญหาที่มีอยู่
รายงานปัญหาเกี่ยวกับการติดตั้งใช้งาน
หากพบข้อบกพร่องในการใช้งาน 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