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, phép ẩn dụ cho máy tính là một phép ẩn dụ giao diện, tập hợp các khái niệm thống 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 phép ẩn dụ trên máy tính, các thẻ GUI được mô hình hoá dựa trên 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ẻ. Thẻ hoặc giao diện tài liệu dạng thẻ (TDI) là một thành phần điều khiển đồ hoạ cho phép đưa nhiều tài liệu hoặc bảng điều khiển vào trong một cửa sổ, sử dụng các 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 xác định trong tệp kê khai ứng dụng web. 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õ ("fullscreen" → "standalone" → "minimal-ui" → "browser"). Nếu trình duyệt 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 được gắn thẻ là gì
Cho đến nay, nền tảng vẫn còn thiếu một số tính năng là một cách để nhà phát triển PWA cung cấp cho người dùng một giao diện tài liệu dạng 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 dạng thẻ sẽ thu hẹp khoảng cách này.
Các trường hợp sử dụng đề 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 dạng 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.
- Cá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ẻ.
- Đọc những ứng dụng mở đường liên kết đến bài viết trong các thẻ mới trong ứng dụng.
Sự khác biệt với các 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 miễn phí. Đây là điều không thể thực hiện 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 tới hàng trăm thẻ như các thẻ trình duyệt. Các thuộc tính cho trình duyệt như nhật ký điều hướng, "Sao chép URL 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 thẻ do nhà phát triển tạo, nhưng không áp dụng cho trang tài liệu hiện được chọn.
Điểm khác biệt với "display": "browser"
"display": "browser" hiện tại đã có
ý nghĩa cụ thể:
Mở ứng dụng web bằ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ù các 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à sự khác biệt lớn so 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ổ dành riêng cho ứng dụng không có thành phần trình duyệt mà chỉ 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 đư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 thông báo giải thích | Ðã hoàn tất |
| 2. Tạo bản nháp ban đầu của quy cách | Not started |
| 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. Launch | Not started |
Sử dụng chế độ ứng dụng dạng 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ị 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ể dùng thuộc tính "tab_strip" để tinh chỉnh hành vi của thẻ. Lớp này có 2 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 giá trị "auto" của các thuộc tính cụ thể. Trình duyệt xác định những giá trị cần sử dụng cho "auto".
Thẻ Trang chủ
Thẻ trang chủ là một thẻ được ghim mà nếu bạn bật một ứng dụng, thì thẻ này phải luôn hiển thị khi ứng dụng đang mở. Thẻ này sẽ tuyệt đối không chuyển hướng. Các đường liên kết được nhấp vào từ thẻ này sẽ mở trong thẻ ứng dụng mới. Các ứng dụng có thể chọn tuỳ chỉnh URL cố định thẻ này 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ị"auto"được phép hoặc một URL để khoá thẻ trang chủ."icons"với các giá trị"auto"được phép 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 URL 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ị"auto"được cho phép hoặc một URL thuộc phạm vi để mở các thẻ mới."icons"với các giá trị"auto"được phép hoặc một mảng biểu tượng như trong thuộc tính"icons"chính.
Ví dụ đầy đủ
Sau đây là ví dụ đầy đủ về việc định cấu hình hành vi của một ứng dụng có giao diện dạng thẻ:
{
"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 chúng 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 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 Launch Handler API
API Trình xử lý khởi chạy cho phép các trang web chuyển hướng ứng dụng chạy 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 dạng thẻ đặt "client_mode": "navigate-new", các lần chạy ứng dụng sẽ mở một thẻ mới trong
một cửa sổ ứng dụng hiện có.
Bản minh hoạ
Bạn có thể thử chế độ ứng dụng dạng 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 đường liên kết trên từng thẻ.
Ý kiến phản hồi
Nhóm Chrome muốn biết 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ế của API
Có vấn đề nào về chế độ ứng dụng dạng thẻ không hoạt động như bạn mong đợi không? Nhận xét về Vấn đề về tệp kê khai ứng dụng web mà chúng ta đã tạo.
Báo cáo sự cố với quá trình triển khai
Bạn có phát hiện thấy 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 tạo rồi nhập UI>Browser>WebAppInstalls vào hộp Components (Thành phần).
Tính năng nhiễu sóng rất hữu ích khi chia sẻ các trường hợp tái tạo nhanh chóng và dễ dàng.
Hỗ trợ API
Bạn có định sử dụng chế độ ứng dụng dạng thẻ không? Sự hỗ trợ 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 biết tầm quan trọng của việc hỗ trợ các tính năng đó.
Hãy gửi một dòng tweet đến @ChromiumDev kèm theo hashtag
#TabbedApplicationMode
và cho chúng tôi biết vị trí cũng như cách bạn đang sử dụng bài đăng này.
Đường liên kết hữu ích
- Thông tin giải thích
- Vấn đề về quy cách của tệp kê khai ứng dụng web
- Lỗi Chromium
- Thành phần nhấp nháy:
UI>Browser>WebAppInstalls
Xác nhận
Matt Giuca đã khám phá chế độ ứng dụng dạng thẻ. Quá trình triển khai thử nghiệm trong Chrome là sản phẩm của Alan Cutter. Bài viết này đã được Joe Medley đánh giá. Hình ảnh chính của Till Nierman trên Wikimedia Commons.
