โหมดแอปพลิเคชันแบบแท็บสำหรับ PWA

ทำงานกับเอกสารมากกว่า 1 รายการพร้อมกันด้วยแท็บใน Progressive Web App

Thomas Steiner

หมายเหตุ: โหมดแอปพลิเคชันแบบแท็บเป็นส่วนหนึ่งของโปรเจ็กต์ความสามารถและพร้อมให้บริการใน ChromeOS แล้ว

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

Progressive Web App สามารถทํางานในโหมดการแสดงผลต่างๆ ซึ่งจะกําหนดโดยพร็อพเพอร์ตี้ display ในไฟล์ Manifest ของเว็บแอป ตัวเลือก ได้แก่ fullscreen, standalone, minimal-ui และ browser โหมดการแสดงผลเหล่านี้เป็นไปตามเชนโฆษณาสำรองที่กําหนดไว้อย่างชัดเจน ("fullscreen" → "standalone" → "minimal-ui" → "browser") หากเบราว์เซอร์ไม่รองรับโหมดหนึ่งๆ ระบบจะใช้โหมดการแสดงผลถัดไปในเชน เมื่อใช้พร็อพเพอร์ตี้ "display_override" นักพัฒนาแอปจะระบุเชนคำสั่งสำรองของตนเองได้หากต้องการ

โหมดแอปพลิเคชันแบบแท็บคืออะไร

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

หมายเหตุ: ฟีเจอร์นี้เกี่ยวข้องกับหน้าต่างแอปแบบสแตนด์อโลนที่มีหลายแท็บ ซึ่งมีเอกสารแยกต่างหากภายในขอบเขตของแอป ซึ่งแตกต่างจาก display: browser ที่บ่งบอกว่าแอปเปิดในแท็บเบราว์เซอร์ปกติ

กรณีการใช้งานสำหรับโหมดแอปพลิเคชันแบบแท็บ

ตัวอย่างเว็บไซต์ที่อาจใช้โหมดแอปพลิเคชันแบบแท็บ ได้แก่

• แอปเพื่อการทำงานที่อนุญาตให้ผู้ใช้แก้ไขเอกสาร (หรือไฟล์) มากกว่า 1 รายการพร้อมกัน
• แอปการสื่อสารที่อนุญาตให้ผู้ใช้สนทนาในห้องต่างๆ ต่อแท็บ
• แอปการอ่านที่เปิดลิงก์บทความในแท็บใหม่ในแอป

ความแตกต่างกับแท็บที่นักพัฒนาแอปสร้างขึ้น

การมีเอกสารในแท็บเบราว์เซอร์แยกต่างหากจะมาพร้อมกับการแยกทรัพยากร ซึ่งปัจจุบันใช้ไม่ได้บนเว็บ แท็บที่นักพัฒนาแอปสร้างขึ้นจะปรับขนาดเป็นแท็บหลายร้อยแท็บไม่ได้เหมือนแท็บเบราว์เซอร์ ฟีเจอร์ต่างๆ ของเบราว์เซอร์ เช่น ประวัติการนําทาง "คัดลอก URL ของหน้านี้" "แคสต์แท็บนี้" หรือ "เปิดหน้านี้ในเว็บเบราว์เซอร์" จะใช้กับหน้าอินเทอร์เฟซแบบแท็บที่นักพัฒนาแอปสร้างขึ้น แต่ไม่ใช้กับหน้าเอกสารที่เลือก

ความแตกต่างกับ "display": "browser"

"display": "browser" ปัจจุบันมีความหมายเฉพาะอยู่แล้ว ดังนี้

เปิดเว็บแอปพลิเคชันโดยใช้รูปแบบเฉพาะแพลตฟอร์มสำหรับการเปิดไฮเปอร์ลิงก์ใน User Agent (เช่น ในแท็บเบราว์เซอร์หรือหน้าต่างใหม่)

แม้ว่าเบราว์เซอร์จะทำสิ่งใดก็ได้เกี่ยวกับ UI แต่การทำให้ "display": "browser" หมายถึง "ทำงานในหน้าต่างแยกต่างหากสำหรับแอปพลิเคชันโดยเฉพาะโดยไม่มีสิ่งอำนวยความสะดวกของเบราว์เซอร์ แต่มีอินเทอร์เฟซเอกสารแบบแท็บ" โดยไม่บอกให้นักพัฒนาซอฟต์แวร์ทราบล่วงหน้า ย่อมเป็นการทำลายความคาดหวังของนักพัฒนาซอฟต์แวร์อย่างร้ายแรง

การตั้งค่า "display": "browser" เป็นวิธีที่คุณเลือกไม่ใช้การใส่ลงในหน้าต่างแอปพลิเคชัน

สถานะปัจจุบัน

ขั้นตอน	สถานะ
1. สร้างคำอธิบาย	เสร็จสิ้น
2. สร้างฉบับร่างแรกของข้อกําหนด	เสร็จสิ้น
3. รวบรวมความคิดเห็นและปรับปรุงการออกแบบ	เสร็จสมบูรณ์
4. ช่วงทดลองใช้จากต้นทาง	เสร็จสมบูรณ์
5. เปิดตัว	เสร็จสมบูรณ์ (ChromeOS)

ใช้โหมดแอปพลิเคชันแบบแท็บ

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

{
  "display": "standalone",
  "display_override": ["tabbed"]
}

จากนั้น คุณอาจใช้พร็อพเพอร์ตี้ "tab_strip" เพื่อปรับแต่งลักษณะการทํางานของแท็บได้ โดยมีพร็อพเพอร์ตี้ย่อยที่อนุญาต 2 รายการ ได้แก่ "home_tab" และ "new_tab_button" หากไม่มีพร็อพเพอร์ตี้ "tab_strip" ระบบจะใช้ออบเจ็กต์ต่อไปนี้เป็นค่าเริ่มต้น

"tab_strip": {
  "new_tab_button": {
    "url": <start_url>,
  },
}

แท็บหน้าแรก

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

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

• "scope_patterns": สมาชิก "scope_patterns" คือรายการรูปแบบ URL ที่กำหนดขอบเขตของแท็บหน้าแรกซึ่งสัมพันธ์กับ URL ไฟล์ Manifest

ปุ่มแท็บใหม่

สมาชิก "new_tab_button" ของออบเจ็กต์ "tab_strip" อธิบายลักษณะการทํางานของสิ่งอํานวยความสะดวกของ UI (เช่น ปุ่ม) ซึ่งเมื่อคลิก/เปิดใช้งานแล้วจะเปิดบริบทแอปพลิเคชันใหม่ภายในหน้าต่างแอปพลิเคชัน โดยมีสมาชิกดังต่อไปนี้

• "url": สมาชิก "url" คือสตริงที่แสดง URL ที่เกี่ยวข้องกับ URL ไฟล์ Manifest ซึ่งอยู่ภายในขอบเขตของไฟล์ Manifest ที่ประมวลผลแล้ว

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

ตัวอย่างที่สมบูรณ์

ตัวอย่างที่สมบูรณ์ในการกําหนดค่าลักษณะการทํางานของแอปที่มีอินเทอร์เฟซแบบแท็บอาจมีลักษณะดังนี้

{
  "name": "Tabbed App Example",
  "start_url": "/",
  "display": "standalone",
  "display_override": ["tabbed"],
  "tab_strip": {
    "home_tab": {
      "scope_patterns": [
        {"pathname": "/"},
        {"pathname": "/index.html"}
      ]
    },
    "new_tab_button": {
      "url": "/create"
    }
  }
}

ตรวจหาโหมดแอปพลิเคชันแบบแท็บ

แอปสามารถตรวจได้ว่ากำลังทำงานในโหมดแอปพลิเคชันแบบแท็บหรือไม่โดยตรวจสอบdisplay-modeฟีเจอร์สื่อ CSS ใน CSS หรือ JavaScript

@media (display-mode: tabbed) {
  /* Styles to apply in tabbed application mode. */
}

const tabbedApplicationModeEnabled = window.matchMedia('(display-mode: tabbed)').matches;

การโต้ตอบกับ Launch Handler API

Launch Handler API ช่วยให้เว็บไซต์เปลี่ยนเส้นทางการเปิดแอปไปยังหน้าต่างแอปที่มีอยู่เพื่อป้องกันไม่ให้ระบบเปิดหน้าต่างซ้ำ เมื่อแอปแบบแท็บตั้งค่า "client_mode": "navigate-new" การเปิดตัวแอปจะเปิดแท็บใหม่ในหน้าต่างแอปที่มีอยู่

สาธิต

คุณลองใช้แอปพลิเคชันแบบแท็บใน ChromeOS ได้โดยทำดังนี้

1. ติดตั้งแอป tabbed-application-mode.glitch.me (ซอร์สโค้ด)
2. คลิกลิงก์ต่างๆ ในแท็บต่างๆ

ความคิดเห็น

ทีม Chrome อยากทราบความคิดเห็นของคุณเกี่ยวกับโหมดแอปพลิเคชันแบบแท็บ

บอกเราเกี่ยวกับการออกแบบ API

มีสิ่งใดเกี่ยวกับโหมดแอปพลิเคชันแบบแท็บที่ไม่ทำงานตามที่คาดไว้ไหม แสดงความคิดเห็นเกี่ยวกับปัญหาไฟล์ Manifest ของเว็บแอปที่เราสร้างขึ้น

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

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

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

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

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

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

• คำอธิบาย
• ปัญหาเกี่ยวกับข้อกำหนดของไฟล์ Manifest ของเว็บแอป
• ข้อบกพร่องของ Chromium
• คอมโพเนนต์ Blink: UI>Browser>WebAppInstalls

ขอขอบคุณ

Matt Giuca เป็นผู้สำรวจโหมดแอปพลิเคชันแบบแท็บ Alan Cutter เป็นผู้ติดตั้งใช้งานเวอร์ชันทดลองใน Chrome เอกสารนี้ผ่านการตรวจสอบโดย Joe Medley รูปภาพหลักโดย Till Niermann ใน Wikimedia Commons