การลงทะเบียนตัวแฮนเดิลโปรโตคอลของ 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 ที่ใช้ Escape เพื่อจัดการ

รูปแบบดังกล่าวต้องเป็นหนึ่งในรูปแบบที่ปลอดภัย (เช่น 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 ที่เริ่มต้นโดยผู้ใช้

Use Case

  • ใน PWA สำหรับการประมวลผลคำ ผู้ใช้ในเอกสารจะเห็นลิงก์ไปยังงานนำเสนอ เช่น web+presentations://deck2378465 เมื่อผู้ใช้คลิกลิงก์ PWA ของงานนำเสนอจะเปิดขึ้นโดยอัตโนมัติในขอบเขตที่ถูกต้องและแสดงชุดสไลด์
  • ในแอปแชทเฉพาะแพลตฟอร์ม ผู้ใช้ในข้อความแชทจะได้รับลิงก์ไปยัง URL ของ magnet เมื่อคลิกลิงก์ ไฟล์ Torrent PWA ที่ติดตั้งไว้จะเปิดขึ้นและเริ่มดาวน์โหลด
  • ผู้ใช้ติดตั้ง PWA สำหรับสตรีมมิงเพลงไว้แล้ว เมื่อเพื่อนแชร์ลิงก์ไปยังเพลงอย่างเช่น web+music://songid=1234&time=0:13 และผู้ใช้คลิกเพลงนั้น PWA สตรีมมิงเพลงจะเปิดในหน้าต่างแบบสแตนด์อโลนโดยอัตโนมัติ

วิธีใช้การลงทะเบียนตัวแฮนเดิลโปรโตคอล URL สำหรับ PWA

API สำหรับการลงทะเบียนตัวแฮนเดิลโปรโตคอล URL สร้างขึ้นอย่างใกล้เคียงกับของ navigator.registerProtocolHandler() เฉพาะคราวนี้จะมีการส่งข้อมูลผ่านไฟล์ Manifest ของเว็บแอปในพร็อพเพอร์ตี้ใหม่ที่ชื่อ "protocol_handlers" ซึ่งรับอาร์เรย์ของออบเจ็กต์ที่มีคีย์ "protocol" และ "url" ที่จำเป็นต้องใช้ 2 คีย์ ข้อมูลโค้ดด้านล่างแสดงวิธีลงทะเบียน web+tea และ web+coffee ค่าเหล่านี้เป็นสตริงที่มี URL ของตัวแฮนเดิลที่มีตัวยึดตำแหน่ง %s ที่จำเป็นสำหรับ URL ที่ใช้ Escape

{
  "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 รายการ คลิกที่ 1 หรือ 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 ส่งทวีตไปที่ @ChromiumDev โดยใช้แฮชแท็ก #ProtocolHandler และแจ้งให้เราทราบว่าคุณใช้แฮชแท็กนั้นที่ไหนและอย่างไร

ข้อความแสดงการยอมรับ

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