ควบคุมวิธีเปิดตัวแอป
Launch Handler API ช่วยให้คุณควบคุมวิธีเปิดแอปได้ เช่น จะใช้หน้าต่างที่มีอยู่หรือหน้าต่างใหม่ และจะนำทางหน้าต่างที่เลือกไปยัง URL ของการเปิดหรือไม่ เช่นเดียวกับ File Handling API การดำเนินการนี้จะจัดคิวออบเจ็กต์ LaunchParams ใน window.launchQueue ของหน้าที่เปิดด้วย
สถานะปัจจุบัน
| ขั้นตอน | สถานะ |
|---|---|
| 1. สร้างวิดีโออธิบาย | เสร็จสมบูรณ์ |
| 2. สร้างร่างข้อกำหนดเบื้องต้น | เสร็จสมบูรณ์ |
| 3. รวบรวมความคิดเห็นและทำซ้ำการออกแบบ | เสร็จสมบูรณ์ |
| 4. ช่วงทดลองใช้จากต้นทาง | เสร็จสมบูรณ์ |
| 5. เปิดตัว | เสร็จสมบูรณ์ |
ใช้ Launch Handler API
การสนับสนุนเบราว์เซอร์
อินเทอร์เฟซ
Launch Handler API กำหนดอินเทอร์เฟซใหม่ 2 รายการ
LaunchParams : ออบเจ็กต์ที่มี targetURL ที่ผู้ใช้จะจัดการ LaunchQueue : คิวจะเปิดตัวจนกว่าผู้บริโภคที่ระบุจะจัดการ
launch_handler สมาชิกในไฟล์ Manifest
หากต้องการระบุลักษณะการเปิดแอปโดยใช้การประกาศ ให้เพิ่มlaunch_handlerสมาชิก Manifest ลงในไฟล์ Manifest โดยมีฟิลด์ย่อย 1 รายการชื่อ client_mode ซึ่งช่วยให้คุณควบคุมได้ว่าจะเปิดไคลเอ็นต์ใหม่หรือไคลเอ็นต์ที่มีอยู่ และควรนำทางไคลเอ็นต์นี้หรือไม่ ตัวอย่างต่อไปนี้ แสดงไฟล์ที่มีค่าตัวอย่างซึ่งจะกำหนดเส้นทางการเปิดตัวทั้งหมดไปยังไคลเอ็นต์ใหม่เสมอ
{ "launch_handler": { "client_mode": "navigate-new" } } หากไม่ได้ระบุไว้ launch_handler จะใช้ {"client_mode": "auto"} เป็นค่าเริ่มต้น ค่าที่ใช้ได้สำหรับ ฟิลด์ย่อยมีดังนี้
client_mode:navigate-new: ระบบจะสร้างบริบทการเรียกดูใหม่ในหน้าต่างเว็บแอปเพื่อโหลด URL เป้าหมายของการเปิดตัวnavigate-existing: ระบบจะนำบริบทการเรียกดูที่มีการโต้ตอบล่าสุดในหน้าต่างเว็บแอปไปยัง URL เป้าหมายของการเปิดตัวfocus-existing: ระบบจะเลือกบริบทการท่องเว็บที่มีการโต้ตอบล่าสุดในหน้าต่างเว็บแอป เพื่อจัดการการเปิดตัว ระบบจะจัดคิวออบเจ็กต์LaunchParamsใหม่ที่มีtargetURLตั้งค่าเป็น URL การเปิดตัวในwindow.launchQueueของเอกสารauto: ลักษณะการทำงานขึ้นอยู่กับ User Agent ที่จะตัดสินใจว่าอะไรเหมาะกับแพลตฟอร์มมากที่สุด ตัวอย่างเช่น อุปกรณ์เคลื่อนที่รองรับเฉพาะไคลเอ็นต์เดียวและจะใช้existing-clientส่วนอุปกรณ์เดสก์ท็อปรองรับหลายหน้าต่างและจะใช้navigate-newเพื่อหลีกเลี่ยงการสูญเสียข้อมูล
พร็อพเพอร์ตี้ client_mode ยังยอมรับรายการ (อาร์เรย์) ของค่าด้วย โดยจะใช้ค่าแรกที่ถูกต้อง เพื่ออนุญาตให้เพิ่มค่าใหม่ลงในข้อกำหนดได้โดยไม่ทำให้การใช้งานที่มีอยู่ไม่สามารถใช้งานร่วมกับเวอร์ชันก่อนหน้าได้ กับการใช้งานที่มีอยู่
เช่น หากมีการเพิ่มค่าสมมติ "focus-matching-url" เว็บไซต์จะระบุ "client_mode": ["focus-matching-url", "navigate-existing"] เพื่อควบคุมลักษณะการทำงานของเบราว์เซอร์เวอร์ชันเก่าที่ไม่รองรับ "focus-matching-url" ต่อไป
ใช้ window.launchQueue
ในโค้ดต่อไปนี้ ฟังก์ชัน extractSongID() จะดึง songID จาก URL ที่ส่งเมื่อเปิดตัว ใช้เพื่อเล่นเพลงใน PWA ของเครื่องเล่นเพลง
if ('launchQueue' in window) { launchQueue.setConsumer((launchParams) => { if (launchParams.targetURL) { const songID = extractSongId(launchParams.targetURL); if (songID) { playSong(songID); } } }); } สาธิต
คุณดูการสาธิตการทำงานของ Launch Handler API ได้ใน การสาธิต Launch Handler ของ PWA อย่าลืมดูซอร์สโค้ดของแอปพลิเคชันเพื่อดูวิธีที่แอปใช้ Launch Handler API
- ติดตั้งแอป Musicr 2.0
- ส่งลิงก์ในแอปพลิเคชันแชทของแบบฟอร์มให้ตัวเอง
https://mdn.github.io/dom-examples/launch-handler/?track=https://example.com/music.mp3(คุณปรับแต่งhttps://example.com/music.mp3สำหรับ URL ที่ชี้ไปยังไฟล์เสียงได้ เช่นhttps://mdn.github.io/dom-examples/launch-handler/?track=https://huggingface.co/spaces/VIDraft/PHI4-Multimodal/resolve/main/examples/harvard.wav) - คลิกลิงก์ในแอปแชท แล้วดูว่า Musicr 2.0 เปิดและเล่นแทร็กอย่างไร
- คลิกลิงก์ในแอปแชทอีกครั้ง แล้วคุณจะเห็นว่าคุณจะไม่ได้รับอินสแตนซ์ที่ 2 ของ Musicr 2.0
ความคิดเห็น
ทีม Chromium ต้องการทราบความคิดเห็นของคุณเกี่ยวกับประสบการณ์การใช้งาน Launch Handler API
บอกเราเกี่ยวกับการออกแบบ API
มีสิ่งใดเกี่ยวกับ API ที่ทำงานไม่เป็นไปตามที่คุณคาดหวังไว้หรือไม่ หรือมีเมธอด หรือพร็อพเพอร์ตี้ที่ขาดหายไปซึ่งคุณต้องใช้เพื่อนำแนวคิดไปใช้ไหม หากมีคำถามหรือความคิดเห็นเกี่ยวกับโมเดลความปลอดภัย แจ้งปัญหาเกี่ยวกับข้อกำหนดในที่เก็บ GitHub ที่เกี่ยวข้อง หรือแสดงความคิดเห็นในปัญหาที่มีอยู่
รายงานปัญหาเกี่ยวกับการติดตั้งใช้งาน
หากพบข้อบกพร่องในการใช้งาน Chromium หรือการติดตั้งใช้งานแตกต่างจากข้อกำหนด รายงานข้อบกพร่องที่ new.crbug.com โปรดใส่รายละเอียดให้มากที่สุดเท่าที่จะทำได้ วิธีการจำลองปัญหา และป้อน Blink>AppManifest ในช่องคอมโพเนนต์
แสดงการสนับสนุน API
คุณวางแผนที่จะใช้ Launch Handler API ไหม การสนับสนุนแบบสาธารณะของคุณจะช่วยให้ทีม Chromium จัดลําดับความสําคัญของฟีเจอร์และแสดงให้ผู้ให้บริการเบราว์เซอร์รายอื่นๆ เห็นว่าการสนับสนุนฟีเจอร์เหล่านี้มีความสําคัญเพียงใด
ส่งทวีตถึง @ChromiumDev โดยใช้แฮชแท็ก #LaunchHandler และ แจ้งให้เราทราบว่าคุณใช้ฟีเจอร์นี้ที่ใดและอย่างไร