โหมดแอปพลิเคชันแบบแท็บสำหรับ 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"
        }
      ]
    }
  }
}

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

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

ข้อมูลประชากร

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

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

ความคิดเห็น

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

บอกให้เราทราบเกี่ยวกับการออกแบบ API

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

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

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

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

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

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

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

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

ข้อความแสดงการยอมรับ

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