ส่วนขยายขอบเขตของเว็บแอป

ตั้งแต่ Chrome 122 เป็นต้นไป คุณจะสมัครใช้ช่วงทดลองใช้แหล่งที่มาสำหรับscope_extensions สมาชิกในไฟล์ Manifest ของแอปได้ ซึ่งจะช่วยให้เว็บไซต์ที่ควบคุมโดเมนย่อยและโดเมนระดับบนสุดหลายโดเมนแสดงเป็นเว็บแอปเดียวได้ เอกสารนี้จะอธิบายเหตุผลที่ทีม Chrome เปิดตัวฟีเจอร์นี้ และเวลาที่คุณอาจต้องการใช้ฟีเจอร์นี้

Demián Renzulli

Thomas Steiner

ภาพรวม

เว็บแอปพลิเคชันบางรายการมีต้นทางหลายรายการ เช่น example.com เป็นแอปหลัก แล้วมี space_1.example.com, …, space_n.example.com ซึ่งบางครั้งรวมกับ special-example.com เป็นประสบการณ์ย่อยทั้งหมดภายใต้แอปหลัก สถาปัตยกรรมเว็บไซต์ประเภทนี้มีผลในบริบทของ Progressive Web App ข้อจำกัดรวมถึงการแชร์ Service Worker, อุปกรณ์ทุกประเภท พื้นที่เก็บข้อมูลในเครื่อง และสิทธิ์ในแหล่งที่มาต่างๆ ไม่ได้ นอกจากนี้ การไปยังส่วนต่างๆ แบบข้ามต้นทางใน PWA แบบสแตนด์อโลนจะแสดง UI ของหน้าต่าง ("แถบที่อยู่นอกขอบเขต") ซึ่งบ่งบอกว่าผู้ใช้ได้ออกจากประสบการณ์การใช้งาน PWA แล้ว คุณดูวิธีแก้ปัญหาบางอย่างได้ในบทความProgressive Web App ในเว็บไซต์แบบหลายต้นทางและการสร้าง Progressive Web App หลายรายการในโดเมนเดียวกัน

Scope Extensions API ช่วยให้เว็บแอปเอาชนะความท้าทายบางอย่างที่นโยบายต้นทางเดียวกันกำหนดไว้สำหรับสถาปัตยกรรมเว็บไซต์ประเภทนี้ได้ ซึ่งช่วยให้เว็บแอปขยายขอบเขตไปยังต้นทางอื่นๆ เพื่อมอบประสบการณ์การใช้งานที่สอดคล้องกันได้ เมื่อต้นทางหลักของเว็บแอปและต้นทางที่เกี่ยวข้องตกลงกัน

เป้าหมาย

เป้าหมายหลักของ Scope Extensions API คือการอนุญาตให้เว็บไซต์ที่ควบคุม โดเมนย่อยและโดเมนระดับบนสุดหลายรายการทํางานเป็นเว็บแอปแบบต่อเนื่อง เมื่อพูดถึง UI ของเว็บแอปและการจับลิงก์ ตัวอย่างเช่น การอนุญาตให้เว็บไซต์ example.com ที่ครอบคลุม example.com.co.uk และ support.example.com ทำงานให้เหมือนกับ เว็บแอปพลิเคชันเดียวมากที่สุด

ส่วนขยายขอบเขตช่วยให้ PWA แบบหลายต้นทางทํางานเป็นเว็บแอปที่ต่อเนื่องได้เมื่อพูดถึง UI ของเว็บแอป

ในทางปฏิบัติแล้ว สิ่งนี้จะกลายเป็นเป้าหมายที่เฉพาะเจาะจงมากขึ้น 2 อย่าง ได้แก่

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

การนำทางแบบข้ามต้นทางที่อยู่ในขอบเขต

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

แถบ "อยู่นอกขอบเขต" ที่แสดงใน Chrome เมื่อผู้ใช้ไปยังต้นทางต่างๆ ใน PWA แบบสแตนด์อโลน

เมื่อใช้ส่วนขยายขอบเขต ระบบจะไม่แสดง UI ของหน้าต่างเมื่อผู้ใช้ไปยังต้นทางที่เชื่อมโยงใดๆ เพื่อให้ PWA แสดงเป็นประสบการณ์การใช้งานแบบรวม

การบันทึกลิงก์ข้ามโดเมน

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

ส่วนของแถบที่อยู่ Chrome สำหรับแท็บใน ChromeOS ที่แสดงข้อบ่งชี้ด้วยภาพ ว่า PWA สามารถจัดการลิงก์ได้และตัวเลือกในการจดจำการตัดสินใจนั้น

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

การใช้งาน

การใช้ส่วนขยายขอบเขตต้องสร้างความสัมพันธ์ระหว่าง ต้นทางหลักกับต้นทางที่เกี่ยวข้อง

ประกาศรายการต้นทางที่เชื่อมโยง

เพิ่มสมาชิกไฟล์ Manifest ของเว็บแอป scope_extensions ลงในต้นทาง PWA หลักเพื่อ เปิดใช้เว็บแอปเพื่อขยายขอบเขตไปยังต้นทางอื่นๆ

ไฟล์ Manifest ของเว็บแอป (https://example.com)

{
  "name": "Example",
  "display": "standalone",
  "start_url": "/index.html",
  "scope_extensions": [
    { "origin": "https://*.example.com" },
    { "origin": "https://example.co.uk" },
    { "origin": "https://*.example.co.uk" }
  ]
}

ยืนยันการเชื่อมโยง

ต้นทางแต่ละรายการที่แสดงจะยืนยันการเชื่อมโยงกับเว็บแอปโดยใช้ /.well-known/web-app-origin-associationไฟล์กำหนดค่า ไฟล์นี้ต้องมีชื่อว่า web-app-origin-association และแสดงที่ตำแหน่งนี้ เนื่องจากเป็น URI ที่รู้จักกันดี

/.well-known/web-app-origin-association (ต้นทางที่เชื่อมโยง)

{
  "web_apps": [{ "web_app_identity": "https://example.com" }]
}

สาธิต

โดยเดโมประกอบด้วย 2 เว็บไซต์ ได้แก่

• PWA หลัก: PWA จริงที่ประกาศรายการต้นทางที่เชื่อมโยงผ่านสมาชิก scope_extensions ใน Web App Manifest
• ต้นทางในขอบเขตเพิ่มเติม: ต้นทางที่อยู่นอกขอบเขตของ PWA หลัก แต่เชื่อมโยงกับ PWA หลักหลังจากที่ PWA หลักแสดงเป็นต้นทางที่เชื่อมโยงและยืนยันความสัมพันธ์ผ่านไฟล์ web-app-origin-association

หากต้องการทำการทดสอบต่อไปนี้ คุณต้องเปิดใช้ฟีเจอร์ about://flags/#enable-desktop-pwas-scope-extensions (พร้อมใช้งานตั้งแต่ Chrome v115 เป็นต้นไป)

ทดสอบการนำทางแบบข้ามต้นทาง

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

PWA สาธิตที่มีลิงก์ไปยังต้นทางในขอบเขตแบบขยายและต้นทางที่ไม่ได้อยู่ในขอบเขตแบบขยาย

การไปยังส่วนต่างๆ แบบข้ามต้นทางเริ่มต้น (ไม่อยู่ในขอบเขตเพิ่มเติม)

1. คลิกลิงก์ไปยังต้นทางที่ไม่อยู่ในขอบเขตที่ขยาย ภายใน PWA แบบเต็มหน้าจอ
2. ด้วยเหตุนี้ การนำทางจึงเกิดขึ้นและแถบที่อยู่นอกขอบเขตจะแสดงขึ้น

แถบ "อยู่นอกขอบเขต" จะแสดงโดยค่าเริ่มต้นสำหรับการนำทางแบบข้ามต้นทางสำหรับ PWA ใน โหมดสแตนด์อโลน

การไปยังส่วนต่างๆ ข้ามต้นทางด้วยส่วนขยายขอบเขต (ในขอบเขตที่ขยาย)

1. กลับไปที่หน้าแรกของ PWA
2. คลิกลิงก์ไปยัง ต้นทางที่ไม่อยู่ในขอบเขตที่ขยาย
3. โดยค่าเริ่มต้น แถบ "อยู่นอกขอบเขต" ควรแสดง แต่เนื่องจากการเชื่อมโยง Scope Extensions จึงไม่แสดง

แถบ "อยู่นอกขอบเขต" ไม่แสดงในการนำทางแบบข้ามต้นทางหลังจากมีการเชื่อมโยงต้นทาง กับส่วนขยายขอบเขต

ทดสอบการจับลิงก์แบบข้ามแหล่งที่มา

1. เปิดและติดตั้ง PWA หลักในอุปกรณ์ ChromeOS
2. คลิกลิงก์ต่อไปนี้ ต้นทางที่เชื่อมโยง
3. ระบบจะเปิดลิงก์ในแท็บเบราว์เซอร์ใหม่และแสดงข้อความแจ้งให้เปิดใน PWA ที่ติดตั้ง

การคลิกลิงก์ไปยังต้นทางที่เชื่อมโยงของ PWA จะเปิดลิงก์ในแท็บใหม่และ แสดงไอคอน "เปิดในแอป" ซึ่งช่วยให้ผู้ใช้เลือกใช้การจับลิงก์อัตโนมัติได้

ช่วงทดลองใช้จากต้นทาง

หากต้องการทดสอบ API นี้ในแอปพลิเคชันของคุณในภาคสนามกับผู้ใช้จริง คุณสามารถทำได้โดยใช้การทดสอบต้นทาง Origin Trials ช่วยให้คุณทดลองใช้ฟีเจอร์ทดลองกับผู้ใช้ได้โดยรับ โทเค็นการทดสอบที่เชื่อมโยงกับโดเมนของคุณ จากนั้นคุณจะสามารถติดตั้งใช้งานแอปและ คาดหวังให้แอปทำงานในเบราว์เซอร์ที่รองรับฟีเจอร์ที่คุณกำลังทดสอบได้ (ในกรณีนี้ ฟีเจอร์นี้จะพร้อมใช้งานใน Chrome ตั้งแต่เวอร์ชัน 121 ถึง 126) หากต้องการรับโทเค็นของคุณเองเพื่อ เรียกใช้ช่วงทดลองใช้ Origin โปรดกรอกแบบฟอร์มใบสมัคร

ความคิดเห็น

ทีม Chrome กำลังมองหาความคิดเห็นเกี่ยวกับประโยชน์ของ API นี้ หากต้องการ ช่วยให้ทีมพัฒนา API นี้ต่อไปพร้อมรับความคิดเห็นเกี่ยวกับประโยชน์ของ API และ กรณีการใช้งานใหม่ๆ ที่เวอร์ชันปัจจุบันยังไม่ครอบคลุม โปรดเปิดปัญหาใน GitHub

แหล่งข้อมูลเพิ่มเติม

• Scope Extensions API - Origin Trial
• สถานะของ Chrome - ส่วนขยายขอบเขตของเว็บแอป
• คำอธิบายส่วนขยายขอบเขตสำหรับเว็บแอปพลิเคชัน
• ความตั้งใจที่จะทดสอบ
• ตำแหน่งมาตรฐานของ Mozilla
• จุดยืนด้านมาตรฐานของ Apple
• ข้อบกพร่องของ Chromium
• Progressive Web App ในเว็บไซต์แบบหลายต้นทาง
• การสร้าง Progressive Web App หลายรายการในโดเมนเดียวกัน

คำขอบคุณ

ขอขอบคุณเป็นพิเศษแก่ทีมที่อยู่เบื้องหลังการพัฒนา API นี้ ส่วนขยายขอบเขต ได้รับการระบุโดย Alan Cutter และ Lu Huang โดยมีข้อมูลจาก Matt Giuca API นี้ได้รับการติดตั้งใช้งานโดย Alan Cutter จาก Google Chrome และ Hassan Talat, Kristin Lee และ Lu Huang จาก Microsoft Edge