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

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

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

หากต้องการใช้โหมดแอปพลิเคชันแบบแท็บ นักพัฒนาแอปต้องเลือกใช้แอปโดยกำหนดค่าโหมด "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. คลิกลิงก์ต่างๆ ในแท็บต่างๆ

ความคิดเห็น

ทีม 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