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

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

Thomas Steiner

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

PWA ในฐานะตัวแฮนเดิล URL คืออะไร

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

ข้อควรระวัง: การรองรับฟีเจอร์ PWA เป็นเครื่องมือจัดการ URL จะจำกัดไว้เฉพาะเบราว์เซอร์เริ่มต้นตามการตั้งค่าของระบบปฏิบัติการ ตัวอย่างเช่น คุณสามารถตั้งค่า Chrome เป็นเบราว์เซอร์เริ่มต้นได้โดยทำตามวิธีการเหล่านี้

สมาชิกไฟล์ 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"
    }
  ]
}

หมายเหตุ: ในสถานการณ์ออนไลน์ โดยปกติแล้วลิงก์แบบสั้นจาก https://🎵.example.com จะเปลี่ยนเส้นทางไปยัง https://music.example.com การเปลี่ยนเส้นทางการนำทางดังกล่าวไม่ใช่ทางเลือกที่ดีในสถานการณ์ออฟไลน์ ดังนั้นแอปจึงต้องลงทะเบียนสำหรับทั้ง 2 ต้นทาง

ไฟล์ web-app-origin-association

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

หมายเหตุ: แอปที่ต้องการจัดการ URL ที่อยู่ในต้นทางเดียวกันกับ PWA จะต้องระบุกฎการจัดการในไฟล์ 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/*"]
      }
    }
  ]
}

หมายเหตุ: ไฟล์ web-app-origin-association คล้ายกับ ไฟล์โดเมนที่เชื่อมโยงของ Apple, ไฟล์ assetlinks.json ของ Android และ ไฟล์ windows-app-web-link ของ Windows สิ่งที่แตกต่างคือไฟล์ web-app-origin-association จะไม่อ้างอิง PWA โดยใช้รหัสแอปเฉพาะแพลตฟอร์ม แต่จะอ้างอิงโดยใช้ URL ของไฟล์ Manifest ของเว็บแอป

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 Handler โปรดตั้งค่า Flag ของเบราว์เซอร์ตามที่ระบุไว้ แล้วติดตั้ง PWA ที่ https://mandymsft.github.io/pwa/ เมื่อดูไฟล์ Manifest ของเว็บแอป คุณจะเห็นว่าแอปจัดการ URL ที่มีรูปแบบ URL ต่อไปนี้ https://mandymsft.github.io และ https://luhuangmsft.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 ที่ติดตั้งไว้

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

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

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

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

ความโปร่งใส

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

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

ความคงอยู่ของสิทธิ์

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

ความคิดเห็น

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

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

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

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

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

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

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

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

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

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

การรับทราบ

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