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

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

Demián Renzulli

Thomas Steiner

ภาพรวม

เว็บแอปพลิเคชันบางแอป origins สำหรับ ตัวอย่างเช่น example.com เป็นแอปหลัก ตามด้วย space_1.example.com ... space_n.example.com ซึ่งบางครั้งรวมกับ special-example.com เป็น ประสบการณ์ย่อยทั้งหมดของแอปหลัก เว็บไซต์ประเภทนี้ จะมีผลต่อบริบทของ Progressive Web App ข้อจำกัดต่างๆ รวมถึงการไม่สามารถแชร์โปรแกรมทำงานของบริการ อุปกรณ์ประเภทใดก็ตาม พื้นที่เก็บข้อมูลในเครื่อง และสิทธิ์ในต้นทางต่างๆ รวมถึงการนำทางแบบข้ามต้นทางใน 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 จะทํางานเป็น มากที่สุดเท่าที่จะเป็นไปได้สำหรับเว็บแอปพลิเคชัน 1 รายการ

ส่วนขยายขอบเขตช่วยให้ PWA หลายต้นทางทํางานเป็นเว็บแอปแบบต่อเนื่องเมื่อ UI ของเว็บแอป

ในทางปฏิบัติ การกระทำนี้จะหมายถึงเป้าหมายที่เฉพาะเจาะจงมากขึ้นอีก 2 เป้าหมาย ดังนี้

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

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

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

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

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

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

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

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

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

/.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 นี้ ถึง ช่วยทีมพัฒนา API นี้ด้วยการแสดงความคิดเห็นเกี่ยวกับประโยชน์ของ API และ กรณีการใช้งานใหม่ที่ไม่รวมอยู่ในเวอร์ชันปัจจุบัน ให้เปิด ปัญหาเกี่ยวกับ GitHub

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

• 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