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

Thomas Steiner

การบันทึกลิงก์แบบประกาศคืออะไร

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

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

การจับลิงก์แบบประกาศเป็นข้อเสนอสำหรับพร็อพเพอร์ตี้ไฟล์ 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. https://continuous-harvest-tomato.glitch.me/
  2. https://hill-glitter-tree.glitch.me/

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

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

ทีม Chromium ได้ออกแบบและติดตั้งใช้งานการจับลิงก์แบบประกาศโดยใช้หลักการหลักที่ระบุไว้ในการควบคุมการเข้าถึงฟีเจอร์ที่มีประสิทธิภาพของแพลตฟอร์มเว็บ ซึ่งรวมถึงการควบคุมของผู้ใช้ ความโปร่งใส และลักษณะการใช้งานที่สะดวกสบาย API นี้ช่วยให้เว็บไซต์มีตัวเลือกการควบคุมเพิ่มเติม ประการแรกคือการเปิดแอปที่ติดตั้งไว้โดยอัตโนมัติในหน้าต่าง ซึ่งจะใช้ UI ที่มีอยู่ แต่ทําให้เว็บไซต์ทริกเกอร์ UI นั้นโดยอัตโนมัติได้ ประการที่ 2 คือความสามารถในการโฟกัสหน้าต่างที่มีอยู่บนโดเมนของตนเองและเริ่มเหตุการณ์ที่มี 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 repo ที่เกี่ยวข้อง หรือแสดงความคิดเห็นในปัญหาที่มีอยู่

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

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

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

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

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

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

ขอขอบคุณ

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