หน้านี้ได้รับการแปลโดย Cloud Translation API

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

ตัวแฮนเดิลโปรโตคอลในแผง 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 รูปภาพหลักโดย JJ Ying ใน Unsplash