เลือกวิธีที่ลิงก์ในขอบเขตเปิด PWA ด้วยการจับภาพลิงก์ประกาศ

Thomas Steiner

การดักจับลิงก์แบบประกาศคืออะไร

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

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

Declarative Link Capturing เป็นข้อเสนอสำหรับพร็อพเพอร์ตี้ไฟล์ Manifest ของเว็บแอปที่ชื่อ "capture_links" ซึ่งช่วยให้นักพัฒนาแอปกำหนดได้โดยการประกาศว่าจะเกิดอะไรขึ้นเมื่อเบราว์เซอร์ถูกขอให้ ไปยัง URL ที่อยู่ภายในขอบเขตการนำทางของแอปพลิเคชัน จากบริบทภายนอก ขอบเขตการนำทาง ข้อเสนอนี้จะไม่มีผลหากผู้ใช้อยู่ในขอบเขตการนำทางอยู่แล้ว (เช่น หากผู้ใช้เปิดแท็บเบราว์เซอร์ที่อยู่ในขอบเขต และคลิกลิงก์ภายใน )

โดยปกติแล้ว เงื่อนไขพิเศษบางอย่าง เช่น การคลิกลิงก์ด้วยปุ่มกลาง (หรือคลิกขวาแล้วเลือก "เปิดในแท็บใหม่") จะไม่ทําให้เกิดลักษณะการทํางานของการจับภาพลิงก์ ไม่ว่าลิงก์จะเป็น target=_self หรือ target=_blank ก็ไม่สำคัญ ดังนั้นลิงก์ที่คลิกในหน้าต่างเบราว์เซอร์ (หรือหน้าต่างของ PWA อื่น) จะเปิดใน PWA แม้ว่าปกติแล้วลิงก์ดังกล่าวจะทำให้เกิดการนำทางภายในแท็บเดียวกันก็ตาม

กรณีการใช้งานที่แนะนำ

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

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

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

หากต้องการทดสอบการดักจับลิงก์แบบประกาศในเครื่องโดยไม่มีโทเค็นทดลองใช้แหล่งที่มา ให้เปิดใช้ #enable-desktop-pwas-link-capturing ใน about://flags

วิธีใช้การดักจับลิงก์แบบประกาศ

นักพัฒนาแอปสามารถกำหนดวิธีที่ควรจะจับลิงก์ได้โดยใช้ประโยชน์จากฟิลด์ไฟล์ Manifest ของเว็บแอปเพิ่มเติม "capture_links" โดยรับสตริงหรืออาร์เรย์ของสตริงเป็นค่า หากระบุอาร์เรย์ของสตริง User Agent จะเลือกรายการแรกที่รองรับในรายการ โดยค่าเริ่มต้นจะเป็น "none" ค่าที่รองรับมีดังนี้

  • "none" (ค่าเริ่มต้น): ไม่มีการจับลิงก์ ลิงก์ที่คลิกซึ่งนำไปสู่ขอบเขต PWA นี้จะไปยังส่วนต่างๆ ตามปกติโดยไม่ต้องเปิดหน้าต่าง PWA
  • "new-client": ลิงก์ที่คลิกแต่ละรายการจะเปิดหน้าต่าง PWA ใหม่ที่ URL นั้น
  • "existing-client-navigate": ลิงก์ที่คลิกจะเปิดในหน้าต่าง PWA ที่มีอยู่ (หากมี) หรือในหน้าต่างใหม่ (หากไม่มี) หากมีหน้าต่าง PWA มากกว่า 1 หน้าต่าง เบราว์เซอร์อาจเลือกหน้าต่างใดหน้าต่างหนึ่งโดยพลการ ซึ่งจะทำงานเหมือน "new-client" หากไม่มีหน้าต่างเปิดอยู่ 🚨 โปรดระมัดระวัง ตัวเลือกนี้อาจทำให้ข้อมูลสูญหาย เนื่องจากผู้ใช้สามารถออกจากหน้าเว็บได้โดยพลการ เว็บไซต์ควรทราบว่าการเลือกตัวเลือกนี้เป็นการเลือกใช้ลักษณะการทำงานดังกล่าว ตัวเลือกนี้เหมาะที่สุดสำหรับเว็บไซต์ "อ่านอย่างเดียว" ที่ไม่ได้เก็บข้อมูลผู้ใช้ไว้ในหน่วยความจำ เช่น เครื่องเล่นเพลง หากหน้าเว็บที่ผู้ใช้ออกจากมีbeforeunloadเหตุการณ์ ผู้ใช้จะเห็นข้อความแจ้งก่อนที่การนำทางจะเสร็จสมบูรณ์

สาธิต

การสาธิตการดักจับลิงก์แบบประกาศประกอบด้วยการสาธิต 2 รายการที่โต้ตอบกัน

  1. เว็บไซต์ 1
  2. ไซต์ 2

วิดีโอหน้าจอด้านล่างแสดงให้เห็นว่าทั้ง 2 อย่างทำงานร่วมกันอย่างไร โดยแสดงลักษณะการทำงานที่แตกต่างกัน 2 แบบ ได้แก่ "new-client" และ "existing-client-navigate" อย่าลืมทดสอบแอปในสถานะต่างๆ โดยเรียกใช้ในแท็บหรือ เป็น PWA ที่ติดตั้งไว้ เพื่อดูความแตกต่างของลักษณะการทำงาน

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

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

ย้ายข้อมูลไปยัง Launch Handler API

Declarative Link Capturing API ช่วงทดลองใช้จากต้นทาง หมดอายุเมื่อวันที่ 30 มีนาคม 2022 สำหรับ Chromium 97 และต่ำกว่า โดยจะแทนที่ด้วยชุดฟีเจอร์และ API ใหม่ใน Chromium 98 ขึ้นไป ซึ่งรวมถึงการจับลิงก์ที่ผู้ใช้เปิดใช้และ Launch Handler API

ใน Chromium 98 การจับลิงก์อัตโนมัติจะกลายเป็นลักษณะการทำงานที่ผู้ใช้เลือกใช้แทนที่จะได้รับเมื่อติดตั้งเว็บแอป หากต้องการเปิดใช้การจับลิงก์ ผู้ใช้ต้องเปิดแอปที่ติดตั้งจากเบราว์เซอร์โดยใช้เปิดด้วย แล้วเลือกจดจำตัวเลือกของฉัน

ตัวอย่างการตั้งค่า "เปิดด้วย" ของแอปที่ติดตั้งโดยเปิดใช้ตัวเลือก "จดจำตัวเลือกของฉัน"

หรือผู้ใช้จะเปิดหรือปิดการจับลิงก์สำหรับเว็บแอปที่เฉพาะเจาะจงในหน้าการตั้งค่าการจัดการแอปก็ได้

ตัวอย่างหน้าการตั้งค่าของแอปที่ติดตั้ง

ปัจจุบันการจับลิงก์เป็นฟีเจอร์สำหรับ ChromeOS เท่านั้น และเรากำลังดำเนินการเพื่อรองรับ Windows, macOS และ Linux

Launch Handler API

การควบคุมการนำทางขาเข้าจะย้ายข้อมูลไปยัง Launch Handler API ซึ่งช่วยให้เว็บแอปตัดสินใจได้ว่าจะเปิดเว็บแอปอย่างไรในสถานการณ์ต่างๆ เช่น การจับลิงก์ เป้าหมายการแชร์ หรือการจัดการไฟล์ เป็นต้น หากต้องการย้ายข้อมูลจาก Declarative Link Capturing API ไปยัง Launch Handler API ให้ทำดังนี้

  1. ลงทะเบียนเว็บไซต์สำหรับช่วงทดลองใช้ Launch Handler จากต้นทาง และวางคีย์ช่วงทดลองใช้จากต้นทางลงในเว็บแอป

  2. เพิ่มรายการ "launch_handler" ลงในไฟล์ Manifest ของเว็บไซต์

    • หากต้องการใช้ "capture_links": "new-client" ให้เพิ่ม"launch_handler": { "route_to": "new-client" }
    • หากต้องการใช้ "capture_links": "existing-client-navigate" ให้เพิ่ม "launch_handler": { "route_to": "existing-client-navigate" }
    • หากต้องการใช้ "capture_links": "existing-client-event" (ซึ่งไม่เคยมีการใช้งาน ในการทดลองใช้ต้นทางของการดักจับลิงก์แบบประกาศ) ให้เพิ่ม "launch_handler": { "route_to": "existing-client-retain" } ตัวเลือกนี้จะทำให้หน้าเว็บในขอบเขตของแอปไม่นำทางโดยอัตโนมัติอีกต่อไปเมื่อมีการจับภาพการนำทางของลิงก์ คุณต้องจัดการ LaunchParams ใน JavaScript โดยเรียกใช้ window.launchQueue.setConsumer() เพื่อเปิดใช้การนำทาง

capture_linksฟิลด์และการลงทะเบียนช่วงทดลองใช้การจับลิงก์แบบประกาศจะใช้งานได้จนถึงวันที่ 30 มีนาคม 2022 ซึ่งจะช่วยให้ผู้ใช้ใน Chromium 97 และเวอร์ชันต่ำกว่ายังคงเปิดเว็บแอปได้ที่ลิงก์ที่บันทึกไว้

ดูรายละเอียดเพิ่มเติมได้ที่ควบคุมวิธีเปิดแอป

ความคิดเห็น

ทีม Chromium อยากทราบประสบการณ์การใช้งานการจับลิงก์แบบประกาศของคุณ

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

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

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

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

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

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

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

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

คำขอบคุณ

Declarative Link Capturing ได้รับการระบุโดย Matt Giuca โดยมีข้อมูลจาก Alan Cutter และ Dominick Ng API นี้ได้รับการติดตั้งใช้งานโดย Alan Cutter บทความนี้ได้รับการตรวจสอบโดย Joe Medley, Matt Giuca, Alan Cutter และ Shunya Shishido รูปภาพหลักโดย Zulmaury Saavedra ใน Unsplash