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

ตั้งแต่ Chrome 122 เป็นต้นไป คุณสามารถสมัครใช้บริการช่วงทดลองใช้จากต้นทางสำหรับสมาชิกไฟล์ Manifest ของแอป scope_extensions ซึ่งช่วยให้เว็บไซต์ที่ควบคุมโดเมนย่อยและโดเมนระดับบนสุดหลายรายการแสดงเป็นเว็บแอปเดียวได้ เอกสารฉบับนี้จะอธิบายสาเหตุที่ทีม 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 UI ใน Chrome จะมีแถบ "อยู่นอกขอบเขต" ที่มี URL ของต้นทางใหม่ ซึ่งจะรบกวนประสบการณ์ของผู้ใช้ เนื่องจากผู้ใช้คาดหวังที่จะไปยังส่วนต่างๆ ภายในบริบทของแอปพลิเคชันเดียวกันต่อไป แต่อาจรู้สึกว่าตนกำลังออกไปใช้งาน

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

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

การบันทึกลิงก์ข้ามต้นทาง

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

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

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

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

ทดสอบการจับภาพลิงก์ข้ามต้นทาง

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

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

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

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

ความคิดเห็น

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

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

• Scope Extensions API - ช่วงทดลองใช้จากต้นทาง
• สถานะของ 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