PWA เป็นตัวแฮนเดิล URL

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

Thomas Steiner

PWA เป็นแฮนเดิล URL ได้อย่างไร

สมมติว่าคุณกำลังแชทกับเพื่อนโดยใช้แอปพลิเคชันการรับส่งข้อความทันที เช่น Messages ใน macOS และคุณกำลังพูดถึงเพลง ลองจินตนาการว่าคุณทั้งคู่ได้music.example.comติดตั้ง PWA ไว้แล้วในอุปกรณ์ หากต้องการแชร์แทร็กโปรดให้เพื่อนๆ ได้ฟัง คุณสามารถส่ง Deep Link อย่างเช่น https://music.example.com/rick-astley/never-gonna-give-you-up ให้เพื่อนๆ ได้ เนื่องจากลิงก์นี้ค่อนข้างยาว นักพัฒนาแอปของ music.example.com จึงอาจตัดสินใจเพิ่มลิงก์สั้นๆ เพิ่มเติมสำหรับแต่ละแทร็ก เช่น https://🎵.example.com/r-a/n-g-g-y-u

PWA ในฐานะตัวแฮนเดิล URL ช่วยให้แอปอย่าง music.example.com ลงทะเบียนตัวเองเป็นตัวแฮนเดิล URL สำหรับ URL ที่ตรงกับรูปแบบ เช่น https://music.example.com, https://*.music.example.com หรือ https://🎵.example.com เพื่อให้ลิงก์จากภายนอก PWA เช่น จากแอปพลิเคชันการรับส่งข้อความทันทีหรือโปรแกรมรับส่งอีเมล เปิดใน PWA ที่ติดตั้งไว้แทนในแท็บเบราว์เซอร์

PWA ในฐานะตัวแฮนเดิล URL ประกอบด้วยส่วนเพิ่มเติม 2 ส่วน ได้แก่

  1. สมาชิกไฟล์ Manifest ของเว็บแอป "url_handlers"
  2. รูปแบบไฟล์ web-app-origin-association สำหรับตรวจสอบการเชื่อมโยง URL ที่อยู่ในและนอกขอบเขต

กรณีการใช้งานที่แนะนำสำหรับ PWA ในฐานะตัวแฮนเดิล URL

ตัวอย่างเว็บไซต์ที่อาจใช้ API นี้ ได้แก่

  • เว็บไซต์สตรีมมิงเพลงหรือวิดีโอเพื่อให้ลิงก์ติดตามหรือลิงก์เพลย์ลิสต์เปิดขึ้นในประสบการณ์การใช้งานโปรแกรมเล่นของแอป
  • เว็บไซต์ข่าวหรือ RSS ที่ติดตามหรือติดตามอยู่จะเปิดในโหมดโปรแกรมอ่านของแอป

วิธีใช้ PWA เป็นตัวแฮนเดิล URL

การเปิดใช้ผ่าน about://flags

หากต้องการทดสอบ PWA ในฐานะตัวแฮนเดิล URL ในเครื่องโดยไม่มีโทเค็นทดลองใช้ต้นทาง ให้เปิดใช้ Flag #enable-desktop-pwas-url-handling ใน about://flags

สมาชิกไฟล์ Manifest ของเว็บแอป "url_handlers"

หากต้องการเชื่อมโยง PWA ที่ติดตั้งไว้กับรูปแบบ URL คุณต้องระบุรูปแบบเหล่านี้ในไฟล์ Manifest ของเว็บแอป การดำเนินการนี้ดำเนินการโดยสมาชิก "url_handlers" โดยรับอาร์เรย์ของออบเจ็กต์ที่มีพร็อพเพอร์ตี้ origin ซึ่งเป็น string ที่ต้องระบุซึ่งเป็นรูปแบบสำหรับการจับคู่ต้นทาง รูปแบบเหล่านี้อนุญาตให้มีคำนำหน้าไวลด์การ์ด (*) เพื่อรวมโดเมนย่อยหลายรายการ (เช่น https://*.example.com) เว็บแอปนี้สามารถจัดการ URL ที่ตรงกับต้นทางเหล่านี้ได้ ระบบจะถือว่ารูปแบบเป็น https:// เสมอ แต่ต้องระบุไว้อย่างชัดเจน

ข้อความที่ตัดตอนมาจากไฟล์ Manifest ของเว็บแอปด้านล่างแสดงวิธีที่ตัวอย่าง PWA ของเพลงจากย่อหน้าแนะนำตั้งค่านี้ รายการที่ 2 ที่มีไวลด์การ์ด ("https://*.music.example.com") ช่วยให้มั่นใจว่าแอปจะเปิดใช้งานสําหรับ https://www.music.example.com หรือตัวอย่างอื่นๆ ที่เป็นไปได้ เช่น https://marketing-activity.music.example.com ด้วย

{
  "url_handlers": [
    {
      "origin": "https://music.example.com"
    },
    {
      "origin": "https://*.music.example.com"
    },
    {
      "origin": "https://🎵.example.com"
    }
  ]
}

ไฟล์ web-app-origin-association

เนื่องจาก PWA อยู่ในต้นทาง (music.example.com) ที่แตกต่างจาก URL บางรายการที่ต้องจัดการ (เช่น https://🎵.example.com) แอปต้องยืนยันการเป็นเจ้าของแหล่งที่มาอื่นๆ เหล่านี้ ซึ่งจะเกิดขึ้นในไฟล์ web-app-origin-association ที่โฮสต์อยู่ในต้นทางอื่นๆ

ไฟล์นี้ต้องมี JSON ที่ถูกต้อง โครงสร้างระดับบนสุดคือออบเจ็กต์ที่มีสมาชิกชื่อ "web_apps" สมาชิกนี้เป็นอาร์เรย์ของออบเจ็กต์ และออบเจ็กต์แต่ละรายการแสดงถึงรายการสําหรับเว็บแอปที่ไม่ซ้ำกัน โดยแต่ละออบเจ็กต์ประกอบด้วยข้อมูลต่อไปนี้

ช่อง คำอธิบาย ประเภท ค่าเริ่มต้น
"manifest" (ต้องระบุ) สตริง URL ของไฟล์ Manifest ของเว็บแอปของ PWA ที่เกี่ยวข้อง string ไม่มี
"details" (ไม่บังคับ) ออบเจ็กต์ที่มีอาร์เรย์ของรูปแบบ URL ที่รวมและไม่รวม object ไม่มี

ออบเจ็กต์ "details" แต่ละรายการประกอบด้วยข้อมูลต่อไปนี้

ช่อง คำอธิบาย ประเภท ค่าเริ่มต้น
"paths" (ไม่บังคับ) อาร์เรย์ของสตริงเส้นทางที่อนุญาต string[] []
"exclude_paths" (ไม่บังคับ) อาร์เรย์ของสตริงเส้นทางที่ไม่อนุญาต string[] []

ตัวอย่างไฟล์ web-app-origin-association สำหรับ PWA ของเพลงจากด้านบนมีดังนี้ ไฟล์จะโฮสต์อยู่ในต้นทาง 🎵.example.com และสร้างการเชื่อมโยงกับ PWA music.example.com ซึ่งระบุโดย URL ไฟล์ Manifest ของเว็บแอป

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

URL จะตรงกันเมื่อใด

PWA จะจับคู่ URL สำหรับจัดการในกรณีที่เป็นไปตามเงื่อนไขทั้ง 2 ข้อต่อไปนี้

  • URL ตรงกับสตริงต้นทางรายการใดรายการหนึ่งใน "url_handlers"
  • เบราว์เซอร์สามารถตรวจสอบผ่านไฟล์ web-app-origin-association ที่เกี่ยวข้องซึ่งแต่ละต้นทางยินยอมให้แอปนี้จัดการ URL ดังกล่าวได้

เกี่ยวกับการค้นพบไฟล์ web-app-origin-association

หากต้องการให้เบราว์เซอร์ค้นพบไฟล์ web-app-origin-association นักพัฒนาแอปต้องวางไฟล์ web-app-origin-association ในโฟลเดอร์ /.well-known/ ที่รูทของแอป โดยชื่อไฟล์ต้องเป็น web-app-origin-association เท่านั้น

สาธิต

หากต้องการทดสอบ PWA ในฐานะตัวแฮนเดิล URL โปรดตั้งค่า Flag ของเบราว์เซอร์ตามที่ระบุไว้ข้างต้น จากนั้นติดตั้ง PWA ที่ https://mandymsft.github.io/pwa/ เมื่อดูไฟล์ Manifest ของเว็บแอป คุณจะเห็นว่ามันจัดการ URL ที่มีรูปแบบ https://mandymsft.github.io และ https://luhuangmsft.github.io เนื่องจากแอปใน mandymsft.github.io มีต้นทาง (luhuangmsft.github.io) ที่แตกต่างจาก PWA ดังนั้น PWA ใน mandymsft.github.io จึงต้องพิสูจน์ความเป็นเจ้าของ ซึ่งทำได้ผ่านไฟล์ web-app-origin-association ที่โฮสต์ที่ https://luhuangmsft.github.io/.well-known/web-app-origin-association

หากต้องการตรวจสอบว่าการตั้งค่าใช้งานได้จริง ให้ส่งข้อความทดสอบถึงตัวเองโดยใช้แอปรับส่งข้อความทันทีที่คุณเลือกหรืออีเมลที่ดูในโปรแกรมรับส่งอีเมลที่ไม่ใช่เว็บ เช่น Mail ใน macOS อีเมลหรือ SMS ควรมีลิงก์ https://mandymsft.github.io หรือ https://luhuangmsft.github.io ทั้ง 2 รายการควรเปิดใน PWA ที่ติดตั้งไว้

แอปรับส่งข้อความด่วน Skype ของ Windows ข้าง PWA สาธิตที่ติดตั้งไว้ ซึ่งเปิดในโหมดสแตนด์อโลนหลังจากคลิกลิงก์ที่แอปจัดการในข้อความแชทของ Skype

ความปลอดภัยและสิทธิ์

ทีม Chromium ได้ออกแบบและติดตั้งใช้งาน PWA ในฐานะตัวแฮนเดิล URL โดยใช้หลักการหลักที่ระบุไว้ในการควบคุมการเข้าถึงฟีเจอร์อันทรงประสิทธิภาพของแพลตฟอร์มเว็บ ซึ่งรวมถึงการควบคุมของผู้ใช้ ความโปร่งใส และลักษณะการใช้งานที่สะดวกสบาย

การควบคุมของผู้ใช้

หาก PWA ลงทะเบียนเป็นตัวแฮนเดิล URL สําหรับรูปแบบ URL หนึ่งๆ มากกว่า 1 รายการ ระบบจะแจ้งให้ผู้ใช้เลือก PWA ที่ต้องการใช้จัดการรูปแบบนั้น (หากมี) ข้อเสนอนี้ไม่ได้จัดการการนําทางที่เริ่มต้นในแท็บเบราว์เซอร์ แต่มุ่งเน้นที่การนําทางที่เริ่มต้นนอกเบราว์เซอร์

ความโปร่งใส

หากการตรวจสอบการเชื่อมโยงที่จำเป็นไม่สำเร็จในระหว่างการติดตั้ง PWA ด้วยเหตุผลใดก็ตาม เบราว์เซอร์จะไม่ลงทะเบียนแอปเป็นตัวแฮนเดิล URL ที่ใช้งานอยู่สำหรับ URL ที่ได้รับผลกระทบ ตัวแฮนเดิล URL อาจถูกนำไปใช้ลักลอบใช้การเข้าชมเว็บไซต์ได้หากติดตั้งใช้งานอย่างไม่เหมาะสม ด้วยเหตุนี้ กลไกการเชื่อมโยงแอปจึงเป็นส่วนสำคัญของรูปแบบนี้

แอปพลิเคชันเฉพาะแพลตฟอร์มสามารถใช้ API ของระบบปฏิบัติการเพื่อแสดงรายการแอปพลิเคชันที่ติดตั้งในระบบของผู้ใช้อยู่แล้ว เช่น แอปพลิเคชันใน Windows สามารถใช้ FindAppUriHandlersAsync API เพื่อแจกแจงตัวแฮนเดิล URL หาก PWA ลงทะเบียนเป็นตัวแฮนเดิล URL ระดับระบบปฏิบัติการใน Windows แอปพลิเคชันอื่นๆ ก็จะเห็น PWA เหล่านั้น

การเก็บรักษาสิทธิ์

ต้นทางสามารถแก้ไขการเชื่อมโยงกับ PWA ได้ทุกเมื่อ เบราว์เซอร์จะพยายามตรวจสอบการเชื่อมโยงของเว็บแอปที่ติดตั้งอยู่อีกครั้งเป็นประจำ หากการลงทะเบียนตัวแฮนเดิล URL ตรวจสอบอีกครั้งไม่สำเร็จเนื่องจากข้อมูลการเชื่อมโยงมีการเปลี่ยนแปลงหรือไม่พร้อมใช้งานอีกต่อไป เบราว์เซอร์จะนำการลงทะเบียนออก

ความคิดเห็น

ทีม Chromium อยากทราบความคิดเห็นของคุณเกี่ยวกับประสบการณ์การใช้งาน PWA ในฐานะตัวแฮนเดิล URL

บอกเราเกี่ยวกับการออกแบบ API

มีสิ่งใดเกี่ยวกับ API ที่ไม่ทำงานตามที่คาดไว้ไหม หรือมีเมธอดหรือพร็อพเพอร์ตี้ที่ขาดหายไปซึ่งคุณต้องนำไปใช้กับแนวคิดของคุณ หากมีคำถามหรือความคิดเห็นเกี่ยวกับรูปแบบการรักษาความปลอดภัย แจ้งปัญหาเกี่ยวกับข้อกำหนดใน GitHub repo ที่เกี่ยวข้อง หรือแสดงความคิดเห็นในปัญหาที่มีอยู่

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

หากพบข้อบกพร่องในการใช้งาน Chromium หรือการติดตั้งใช้งานแตกต่างจากข้อมูลจำเพาะหรือไม่ ส่งข้อบกพร่องที่ new.crbug.com ตรวจสอบว่าได้ใส่รายละเอียดให้มากที่สุดเท่าที่จะเป็นไปได้ วิธีการง่ายๆ ในการสร้างอีกครั้ง และป้อน UI>Browser>WebAppInstalls ในช่องคอมโพเนนต์ ภาพ Glitch เหมาะสำหรับการแชร์ซ้ำที่ง่ายและรวดเร็ว

แสดงการสนับสนุน API

คุณวางแผนที่จะใช้ PWA เป็นตัวแฮนเดิล URL ใช่ไหม การสนับสนุนแบบสาธารณะของคุณช่วยให้ทีม Chromium จัดลําดับความสําคัญของฟีเจอร์ต่างๆ และแสดงให้เห็นว่าการสนับสนุนฟีเจอร์เหล่านี้สำคัญกับผู้ให้บริการเบราว์เซอร์รายอื่นๆ เพียงใด

ส่งทวีตถึง @ChromiumDev โดยใช้แฮชแท็ก #URLHandlers และบอกเราว่าคุณกำลังใช้ฟีเจอร์นี้ที่ไหนและอย่างไร

ลิงก์ที่มีประโยชน์

ขอขอบคุณ

Lu Huang และ Mandy Chen จากทีม Microsoft Edge เป็นผู้ระบุ PWA ให้เป็นเครื่องจัดการ URL บทความนี้ผ่านการตรวจสอบโดย Joe Medley รูปภาพหลักโดย Bryson Hammer จาก Unsplash