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 máy tính, cụm từ ẩn dụ về máy tính là một cụm từ ẩn dụ về 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 trực quan hơn với máy tính. Để phù hợp với phép ẩn dụ trên máy tính, các thẻ GUI được mô hình hoá theo thẻ thẻ cổ điển đượ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. Các tuỳ chọn là 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. Khi sử dụng 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 chế độ ứng dụng theo 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 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.
Sự khác biệt với thẻ do nhà phát triển tạo
Việc có 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, điều này không thể thực hiện được khi sử dụng web hiện nay. Các thẻ do nhà phát triển tạo sẽ không mở rộng được đế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 đã 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 biệt dành riêng cho ứng dụng không có cá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 | Ðã hoàn tất |
| 3. Thu thập ý kiến phản hồi và lặp lại thiết kế | Ðã hoàn tất |
| 4. Bản dùng thử theo nguyên gốc | Ðã hoàn tất |
| 5. Khởi chạy | Đã hoàn tất (ChromeOS) |
Sử dụng chế độ ứng dụng có thẻ
Để sử dụng chế độ ứng dụng theo thẻ, nhà phát triển cần chọn ứng dụng của mình bằng cách đặt giá trị chế độ "display_override" cụ thể 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ẻ. Thuộc tính này có hai tài sản phụ được phép là "home_tab" và "new_tab_button". Nếu không có thuộc tính "tab_strip", thuộc tính này sẽ mặc định là đối tượng sau:
"tab_strip": {
"new_tab_button": {
"url": <start_url>,
},
}
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 không được đ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ẻ.
Thành phần "home_tab" của đối tượng "tab_strip" chứa thông tin về một "thẻ trang chủ" đặc biệt dùng làm trình đơn cấp cao nhất cho ứng dụng. Tệp này chứa thành phần sau:
"scope_patterns": Thành phần"scope_patterns"là danh sách Mẫu URL xác định phạm vi của thẻ trang chủ so với URL tệp kê khai.
Nút thẻ mới
Thành phần "new_tab_button" của đối tượng "tab_strip" mô tả hành vi của một tính năng trên giao diện người dùng (chẳng hạn như một nút), khi được nhấp/kích hoạt, sẽ mở một ngữ cảnh ứng dụng mới trong cửa sổ ứng dụng. Lớp này có thành phần sau:
"url": Thành phần"url"là một chuỗi đại diện cho một URL tương ứng với URL tệp kê khai nằm trong phạm vi của tệp kê khai đã xử lý.
Ứng dụng có nút thẻ mới nếu thành phần "url" của thẻ new_tab_button trong tệp kê khai đã xử lý nằm ngoài phạm vi thẻ trang chủ. Nếu ứng dụng không có nút thẻ mới, trình duyệt sẽ không cung cấp khả năng "thẻ mới" cho người dùng.
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:
{
"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"
}
}
}
Phát hiện chế độ ứng dụng có thẻ
Các ứng dụng có thể phát hiện xem chúng có đang chạy ở chế độ ứng dụng theo thẻ hay không bằng cách kiểm tra tính năng đa phương tiện CSS display-mode 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ể dùng thử ứng dụng có thẻ trên ChromeOS:
- 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 trải nghiệm của bạn với chế độ ứng dụng theo thẻ.
Giới thiệu cho chúng tôi 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 tái tạo 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.
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 đó.
Hãy 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 hashtag này ở đâu và như thế nào.
Đường liên kết hữu ích
- 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. Tài liệu này đã được Joe Medley xem xét. Hình ảnh chính của Till Niermann trên Wikimedia Commons.
