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

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

Thomas Steiner

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

สมาชิกไฟล์ 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 บางรายการที่ PWA จำเป็นต้องจัดการ (เช่น https://🎵.example.com) แอปจำเป็นต้องยืนยันการเป็นเจ้าของต้นทางอื่นๆ เหล่านี้ กรณีนี้เกิดขึ้นในไฟล์ web-app-origin-association ที่โฮสต์ในต้นทางอื่นๆ

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

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

ด้านล่างนี้เป็นตัวอย่างไฟล์ 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 ในโฟลเดอร์ /.well-known/ ที่รูทของแอปเพื่อให้เบราว์เซอร์ค้นพบไฟล์ web-app-origin-association ได้ ชื่อไฟล์ต้องเป็น 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 ระบบ 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 สามารถใช้ FindAppUriHandlersAsync API เพื่อแจกแจงเครื่องจัดการ URL หาก PWA ลงทะเบียนเป็นตัวแฮนเดิล URL ระดับระบบปฏิบัติการใน Windows แอปพลิเคชันอื่นๆ จะเห็นการมีอยู่ของ PWA

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

ต้นทางจะแก้ไขการเชื่อมโยงกับ 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 ใน Unsplash