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

Thomas Steiner

การเก็บข้อมูลลิงก์เชิงประกาศคืออะไร

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

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

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

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

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

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

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

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

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

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

ย้ายข้อมูลไปยังการเปิดตัว Handler API

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

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

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

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

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

ขณะนี้การจับภาพลิงก์เป็นฟีเจอร์ที่ใช้ได้ใน ChromeOS เท่านั้น ขณะนี้ระบบกำลังรองรับ Windows, macOS และ Linux

เปิดใช้ Handler API

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

  1. ลงทะเบียนเว็บไซต์เพื่อ ทดลองใช้ช่วงทดลองใช้จากต้นทางของตัวแฮนเดิล แล้ววางคีย์ช่วงทดลองใช้จากต้นทางลงในเว็บแอป

  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 ในช่องคอมโพเนนต์ 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