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

อนุญาตให้ 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

ลองดูตัวอย่างที่เป็นรูปธรรมของกระบวนการนี้เพื่อให้เข้าใจได้อย่างชัดเจนยิ่งขึ้น

  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 กรณีดังนี้

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

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

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

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

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

สาธิต

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

  1. ไปที่ https://protocol-handler.glitch.me/ ติดตั้ง PWA แล้วโหลดแอปซ้ำหลังการติดตั้ง ตอนนี้เบราว์เซอร์ได้ลงทะเบียน PWA เป็นตัวจัดการโปรโตคอล web+coffee กับระบบปฏิบัติการแล้ว
  2. คลิกลิงก์ https://protocol-handler-link.glitch.me/ ในหน้าต่าง PWA ที่ติดตั้งไว้ ซึ่งจะเปิดแท็บเบราว์เซอร์ใหม่ที่มีลิงก์ 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 ที่เกี่ยวข้อง หรือเพิ่มความคิดเห็นของคุณเกี่ยวกับปัญหาที่มีอยู่

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

หากพบข้อบกพร่องในการใช้งาน 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