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

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

Thomas Steiner

PWA เป็นตัวแฮนเดิล URL คืออะไร

ลองจินตนาการว่าคุณกำลังแชทกับเพื่อนโดยใช้แอปพลิเคชัน Instant Messenger เช่น Messages ใน macOS แต่คุณกำลังพูดถึงเพลง สมมติว่าคุณทั้งคู่ได้ติดตั้ง PWA ของ music.example.com แล้ว บนอุปกรณ์ของคุณ หากคุณต้องการแบ่งปันแทร็กโปรดให้เพื่อนฟัง คุณสามารถส่ง 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 เช่น จากแอปพลิเคชัน Instant Messenger หรืออีเมล ให้เปิดใน PWA ที่ติดตั้งไว้แทนที่จะเปิดในแท็บเบราว์เซอร์

PWA เป็นเครื่องจัดการ URL ประกอบด้วยการเพิ่ม 2 รายการดังนี้

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

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

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

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

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

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

หากต้องการทดสอบโดยใช้ PWA เป็นเครื่องจัดการ URL ภายในเครื่องโดยไม่มีโทเค็นการทดลองใช้ต้นทาง ให้เปิดใช้ การแจ้งว่าไม่เหมาะสม #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" สมาชิกนี้คืออาร์เรย์ของออบเจ็กต์ และแต่ละออบเจ็กต์แสดงแทนรายการของรายการที่ไม่ซ้ำกัน เว็บแอป แต่ละออบเจ็กต์ประกอบด้วย

ออบเจ็กต์ "details" แต่ละรายการประกอบด้วย

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

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

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

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

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

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

ความโปร่งใส

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

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

ความต่อเนื่องของสิทธิ์

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

ความคิดเห็น

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

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

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

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

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

แสดงการรองรับ API

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

ส่งทวีตไปยัง @ChromiumDev โดยใช้แฮชแท็ก #URLHandlers และให้ ให้เราทราบสถานที่และวิธีที่คุณใช้งาน

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

• คำอธิบายแบบสาธารณะ
• การสาธิต | แหล่งที่มาของการสาธิต
• ข้อบกพร่องในการติดตาม Chromium
• รายการ ChromeStatus.com
• คอมโพเนนต์กะพริบ: UI>Browser>WebAppInstalls
• ตรวจสอบแท็ก
• เอกสารประกอบของ Microsoft

กิตติกรรมประกาศ

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