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

อนุญาตให้ PWA ที่ติดตั้งจัดการลิงก์ที่ใช้โปรโตคอลเฉพาะเพื่อประสบการณ์ที่ผสานรวมมากขึ้น

Thomas Steiner

ภูมิหลังเกี่ยวกับรูปแบบ (หรือโปรโตคอล)

Uniform Resource Identifier (URI) เป็นลำดับอักขระขนาดกะทัดรัดที่ระบุ ทรัพยากรทางกายภาพหรือนามธรรม URI แต่ละรายการจะขึ้นต้นด้วย ชื่อ scheme ที่อ้างถึงข้อกำหนดสำหรับ การกำหนดตัวระบุภายในรูปแบบนั้น ดังนั้น ไวยากรณ์ 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+ ตามด้วยอย่างน้อย 1 รายการหรือ ตัวอักษร ASCII ตัวพิมพ์เล็กเพิ่มเติมหลัง 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 สำหรับกลไก PWAs ในปัจจุบันเกี่ยวข้องกับการเสนอตัวแฮนเดิลโปรโตคอล การลงทะเบียนเป็นส่วนหนึ่งของการติดตั้ง 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 ที่ใช้ 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 ลิงก์ ให้คลิกอันแรกหรืออันที่ 2 (ลาเต้มัคคิอาโตหรือ อเมริกา) เบราว์เซอร์จะแสดงข้อความแจ้งและถาม ว่าคุณพอใจกับการใช้แอป ตัวแฮนเดิลโปรโตคอลสำหรับโปรโตคอล web+coffee หากคุณยอมรับ PWA จะเปิดขึ้นและแสดง กาแฟที่เลือก
  3. หากต้องการเปรียบเทียบกับขั้นตอนดั้งเดิมที่ใช้ navigator.registerProtocolHandler() ให้คลิก ปุ่มลงทะเบียนเครื่องจัดการโปรโตคอลใน PWA จากนั้นในแท็บเบราว์เซอร์ ให้คลิกลิงก์ที่สาม (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