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

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

Thomas Steiner

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

แท็บหน้าแรก

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

ค่าที่ใช้ได้สำหรับ "home_tab" มีดังนี้

  • "auto" เพื่อให้เบราว์เซอร์ตัดสินใจว่าจะทำอย่างไร
  • "absent" เพื่อบอกให้เบราว์เซอร์ไม่แสดงแท็บหน้าแรก
  • ออบเจ็กต์ที่มีพร็อพเพอร์ตี้ย่อย 2 รายการ ได้แก่
    • "url" ที่มีค่าที่อนุญาตคือ "auto" หรือ URL เพื่อล็อกแท็บหน้าแรก
    • "icons" ที่มีค่าที่อนุญาตคือ "auto" หรืออาร์เรย์ของไอคอนเช่นเดียวกับในพร็อพเพอร์ตี้ "icons" หลัก

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

ปุ่มแท็บใหม่ (หากมี) ควรเปิดแท็บใหม่ที่ URL ที่อยู่ภายในขอบเขตของแอป แอปอาจเลือกที่จะตั้งค่า URL และไอคอนที่กำหนดเองสำหรับปุ่มนี้ เบราว์เซอร์จะเลือกวิธีจัดการการลากแท็บเหล่านี้ไปมาเพื่อสร้างหน้าต่างใหม่หรือรวมกับแท็บเบราว์เซอร์

ค่าที่ใช้ได้สำหรับ "new_tab_button" มีดังนี้

  • "auto" เพื่อให้เบราว์เซอร์ตัดสินใจว่าจะทำอย่างไร
  • "absent" เพื่อบอกให้เบราว์เซอร์ไม่แสดงปุ่มแท็บใหม่
  • ออบเจ็กต์ที่มีพร็อพเพอร์ตี้ย่อย 2 รายการ ได้แก่
    • "url" ที่มีค่าที่อนุญาตเป็น "auto" หรือ URL ที่อยู่ในขอบเขตเพื่อเปิดแท็บใหม่
    • "icons" ที่มีค่าที่อนุญาตคือ "auto" หรืออาร์เรย์ของไอคอนเช่นเดียวกับในพร็อพเพอร์ตี้ "icons" หลัก

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

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

{
  "display_override": ["tabbed"],
  "tab_strip": {
    "home_tab": {
      "url": "./home/",
      "icons": [
        {
          "src": "./home.svg",
          "sizes": "any",
          "type": "image/svg+xml"
        }
      ]
    },
    "new_tab_button": {
      "url": "./new-tab/",
      "icons": [
        {
          "src": "./new-tab.svg",
          "sizes": "any",
          "type": "image/svg+xml"
        }
      ]
    }
  }
}

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

แอปสามารถตรวจได้ว่ากำลังทำงานในโหมดแอปพลิเคชันแบบแท็บหรือไม่โดยตรวจสอบ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" การเปิดตัวแอปจะเปิดแท็บใหม่ในหน้าต่างแอปที่มีอยู่

สาธิต

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

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

ภาพหน้าจอของโหมดแอปพลิเคชันแบบแท็บใน tabbed-application-mode.glitch.me

ความคิดเห็น

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

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

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

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

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

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

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

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

ขอขอบคุณ

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