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