Làm việc trên nhiều tài liệu cùng một lúc bằng các thẻ trong Ứng dụng web tiến bộ
Trong thế giới điện toán, cụm từ hình ảnh máy tính là một cụm từ hình ảnh giao diện, là một tập hợp các khái niệm hợp nhất mà giao diện người dùng đồ hoạ (GUI) sử dụng để giúp người dùng tương tác dễ dàng hơn với máy tính. Để phù hợp với ẩn dụ trên máy tính, các thẻ GUI được mô hình hoá theo các thẻ thẻ truyền thống được chèn vào sách, tệp giấy hoặc chỉ mục thẻ. Giao diện tài liệu dạng thẻ (TDI) hoặc thẻ là một phần tử điều khiển đồ hoạ cho phép chứa nhiều tài liệu hoặc bảng điều khiển trong một cửa sổ, sử dụng thẻ làm tiện ích điều hướng để chuyển đổi giữa các nhóm tài liệu.
Ứng dụng web tiến bộ có thể chạy ở nhiều chế độ hiển thị do thuộc tính display trong tệp kê khai ứng dụng web xác định. Ví dụ: fullscreen, standalone, minimal-ui và browser. Các chế độ hiển thị này tuân theo một chuỗi dự phòng được xác định rõ ràng ("fullscreen" → "standalone" → "minimal-ui" → "browser"). Nếu không hỗ trợ một chế độ nhất định, trình duyệt sẽ quay lại chế độ hiển thị tiếp theo trong chuỗi. Thông qua thuộc tính "display_override", nhà phát triển có thể chỉ định chuỗi dự phòng của riêng họ nếu cần.
Chế độ ứng dụng theo thẻ là gì
Cho đến nay, nền tảng này vẫn thiếu một cách để nhà phát triển PWA cung cấp cho người dùng giao diện tài liệu theo thẻ, chẳng hạn như để cho phép chỉnh sửa nhiều tệp trong cùng một cửa sổ PWA. Chế độ ứng dụng theo thẻ sẽ giúp giải quyết vấn đề này.
Các trường hợp sử dụng được đề xuất cho chế độ ứng dụng dạng thẻ
Sau đây là ví dụ về các trang web có thể sử dụng chế độ ứng dụng theo thẻ:
- Ứng dụng cải thiện hiệu suất cho phép người dùng chỉnh sửa nhiều tài liệu (hoặc tệp) cùng một lúc.
- Ứng dụng liên lạc cho phép người dùng trò chuyện trong nhiều phòng trên mỗi thẻ.
- Ứng dụng đọc mở đường liên kết đến bài viết trong thẻ mới trong ứng dụng.
Điểm khác biệt so với thẻ do nhà phát triển tạo
Việc lưu tài liệu trong các thẻ trình duyệt riêng biệt đi kèm với tính năng tách biệt tài nguyên miễn phí. Điều này hiện chưa thể thực hiện được bằng cách sử dụng web. Các thẻ do nhà phát triển tạo sẽ không mở rộng theo cách chấp nhận được lên hàng trăm thẻ như các thẻ trình duyệt. Các tính năng của trình duyệt như nhật ký điều hướng, "Sao chép URL của trang này", "Truyền thẻ này" hoặc "Mở trang này trong trình duyệt web" sẽ được áp dụng cho trang giao diện có thẻ do nhà phát triển tạo, nhưng không áp dụng cho trang tài liệu đang được chọn.
Điểm khác biệt với "display": "browser"
"display": "browser" hiện tại đã có một ý nghĩa cụ thể:
Mở ứng dụng web bằng cách sử dụng quy ước dành riêng cho nền tảng để mở siêu liên kết trong tác nhân người dùng (ví dụ: trong thẻ trình duyệt hoặc cửa sổ mới).
Mặc dù trình duyệt có thể làm bất cứ điều gì họ muốn liên quan đến giao diện người dùng, nhưng rõ ràng sẽ là một sự thay đổi lớn đối với kỳ vọng của nhà phát triển nếu "display": "browser" đột nhiên có nghĩa là "chạy trong một cửa sổ riêng dành cho ứng dụng không có tính năng của trình duyệt, nhưng có giao diện tài liệu dạng thẻ".
Việc đặt "display": "browser" là cách hiệu quả để bạn chọn không được đưa vào cửa sổ ứng dụng.
Trạng thái hiện tại
| Bước | Trạng thái |
|---|---|
| 1. Tạo video giải thích | Ðã hoàn tất |
| 2. Tạo bản nháp ban đầu của quy cách | Chưa bắt đầu |
| 3. Thu thập ý kiến phản hồi và cải tiến thiết kế | Đang tiến hành |
| 4. Bản dùng thử theo nguyên gốc | Đang tiến hành |
| 5. Khởi chạy | Chưa bắt đầu |
Sử dụng chế độ ứng dụng có thẻ
Để sử dụng chế độ ứng dụng dạng thẻ, nhà phát triển cần chọn sử dụng cho ứng dụng của họ bằng cách đặt một giá trị cụ thể cho chế độ "display_override" trong tệp kê khai ứng dụng web.
{
"display": "standalone",
"display_override": ["tabbed"]
}
Tiếp theo, bạn có thể tuỳ ý sử dụng thuộc tính "tab_strip" để tinh chỉnh hành vi của thẻ. Tài sản này có hai thuộc tính phụ được phép là "home_tab" và "new_tab_button". Nếu không có thuộc tính "tab_strip", hệ thống sẽ sử dụng các giá trị "auto" của các thuộc tính cụ thể. Trình duyệt xác định giá trị cần sử dụng cho "auto".
Thẻ Trang chủ
Thẻ trang chủ là một thẻ được ghim, nếu được bật cho một ứng dụng, thì thẻ này phải luôn xuất hiện khi ứng dụng đó mở. Thẻ này sẽ tuyệt đối không điều hướng. Các đường liên kết được nhấp vào từ thẻ này sẽ mở trong một thẻ ứng dụng mới. Ứng dụng có thể chọn tuỳ chỉnh URL mà thẻ này được khoá vào và biểu tượng hiển thị trên thẻ.
Các giá trị được phép cho "home_tab" là:
"auto"để cho phép trình duyệt xác định việc cần làm."absent"để yêu cầu trình duyệt không hiển thị thẻ trang chủ.- Một đối tượng có hai thuộc tính phụ:
"url"với các giá trị được phép là"auto"hoặc URL để khoá thẻ trang chủ."icons"với các giá trị được phép là"auto"hoặc một mảng biểu tượng như trong thuộc tính"icons"chính.
Nút thẻ mới
Nút thẻ mới (nếu có) sẽ mở một thẻ mới tại một URL nằm trong phạm vi của ứng dụng. Ứng dụng có thể chọn đặt URL và biểu tượng tuỳ chỉnh cho nút này. Trình duyệt có thể quyết định cách xử lý việc kéo các thẻ này xung quanh để tạo cửa sổ mới hoặc kết hợp với các thẻ trình duyệt.
Các giá trị được phép cho "new_tab_button" là:
"auto"để cho phép trình duyệt xác định việc cần làm."absent"để yêu cầu trình duyệt không hiển thị nút thẻ mới.- Một đối tượng có hai thuộc tính phụ:
"url"với các giá trị được phép là"auto"hoặc một URL thuộc phạm vi để mở thẻ mới."icons"với các giá trị được phép là"auto"hoặc một mảng biểu tượng như trong thuộc tính"icons"chính.
Ví dụ đầy đủ
Ví dụ đầy đủ để định cấu hình hành vi của một ứng dụng có giao diện theo thẻ có thể có dạng như sau:
{
"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"
}
]
}
}
}
Phát hiện chế độ ứng dụng dạng thẻ
Các ứng dụng có thể phát hiện xem mình có đang chạy ở chế độ ứng dụng dạng thẻ hay không bằng cách kiểm tra tính năng đa phương tiện display-mode của CSS trong CSS hoặc JavaScript:
@media (display-mode: tabbed) {
/* Styles to apply in tabbed application mode. */
}
const tabbedApplicationModeEnabled = window.matchMedia('(display-mode: tabbed)').matches;
Tương tác với API Trình xử lý khởi chạy
Launch Handler API (API Trình xử lý khởi chạy) cho phép các trang web chuyển hướng quá trình khởi chạy ứng dụng vào các cửa sổ ứng dụng hiện có để ngăn việc mở các cửa sổ trùng lặp. Khi một ứng dụng có thẻ đặt "client_mode": "navigate-new", các lần khởi chạy ứng dụng sẽ mở một thẻ mới trong cửa sổ ứng dụng hiện có.
Bản minh hoạ
Bạn có thể thử chế độ ứng dụng theo thẻ bằng cách đặt cờ trình duyệt:
- Đặt cờ
#enable-desktop-pwas-tab-strip. - Cài đặt ứng dụng tabbed-application-mode.glitch.me (mã nguồn).
- Nhấp vào các đường liên kết trên các thẻ khác nhau.
Phản hồi
Nhóm Chrome muốn biết ý kiến của bạn về trải nghiệm của bạn khi sử dụng chế độ ứng dụng dạng thẻ.
Cho chúng tôi biết về thiết kế API
Chế độ ứng dụng theo thẻ có hoạt động như mong đợi không? Bình luận về Vấn đề về tệp kê khai ứng dụng web mà chúng ta đã tạo.
Báo cáo vấn đề về việc triển khai
Bạn có phát hiện lỗi khi triển khai Chrome không? Gửi lỗi tại
new.crbug.com. Hãy nhớ cung cấp càng nhiều thông tin chi tiết càng tốt, hướng dẫn đơn giản để tái hiện lỗi và nhập UI>Browser>WebAppInstalls vào hộp Components (Thành phần).
Glitch rất phù hợp để chia sẻ các trường hợp tái hiện nhanh chóng và dễ dàng.
Hỗ trợ API
Bạn có dự định sử dụng chế độ ứng dụng theo thẻ không? Sự ủng hộ công khai của bạn giúp nhóm Chrome ưu tiên các tính năng và cho các nhà cung cấp trình duyệt khác thấy tầm quan trọng của việc hỗ trợ các tính năng đó.
Gửi một tweet đến @ChromiumDev bằng hashtag #TabbedApplicationMode và cho chúng tôi biết bạn đang sử dụng ở đâu và như thế nào.
Đường liên kết hữu ích
- Người giải thích
- Vấn đề về thông số kỹ thuật của tệp kê khai ứng dụng web
- Lỗi Chromium
- Thành phần Blink:
UI>Browser>WebAppInstalls
Lời cảm ơn
Matt Giuca đã khám phá chế độ ứng dụng có thẻ. Việc triển khai thử nghiệm trong Chrome là công việc của Alan Cutter. Bài viết này đã được Joe Medley xem xét. Hình ảnh chính của Till Niermann trên Wikimedia Commons.
