Tiện ích phạm vi ứng dụng web

Từ Chrome 122, bạn có thể đăng ký dùng thử nguồn gốc cho thành phần tệp kê khai ứng dụng scope_extensions. Thành phần này cho phép các trang web kiểm soát nhiều miền phụ và miền cấp cao nhất được trình bày dưới dạng một ứng dụng web duy nhất. Tài liệu này giải thích lý do nhóm Chrome giới thiệu tính năng này và thời điểm bạn nên sử dụng tính năng này.

Demián Renzulli

Thomas Steiner

Tổng quan

Một số ứng dụng web có nhiều nguồn gốc, ví dụ: example.com là ứng dụng chính, sau đó là space_1.example.com, ..., space_n.example.com, đôi khi kết hợp với special-example.com, dưới dạng các trải nghiệm phụ, tất cả đều nằm trong ứng dụng chính. Loại cấu trúc trang web này có ý nghĩa trong bối cảnh của Ứng dụng web tiến bộ. Các hạn chế bao gồm việc không thể chia sẻ các worker dịch vụ, mọi loại thiết bị, bộ nhớ cục bộ và quyền trên các nguồn. Ngoài ra, thao tác điều hướng trên nhiều nguồn gốc trong một PWA độc lập sẽ cho thấy giao diện người dùng cửa sổ ("thanh ngoài phạm vi") cho biết rằng người dùng đã rời khỏi trải nghiệm PWA. Bạn có thể tìm hiểu cách giải quyết một số vấn đề này trong các bài viết Ứng dụng web tiến bộ trong các trang web có nhiều nguồn gốc và Tạo nhiều ứng dụng web tiến bộ trên cùng một miền.

Scope Extensions API cho phép các ứng dụng web khắc phục một số thách thức mà chính sách cùng nguồn gốc áp đặt lên loại cấu trúc trang web này. API này cho phép các ứng dụng web mở rộng phạm vi sang các nguồn gốc khác để giúp đạt được trải nghiệm thống nhất, dựa trên thoả thuận giữa nguồn gốc chính của ứng dụng web và các nguồn gốc được liên kết.

Mục tiêu

Mục tiêu chính của Scope Extensions API là cho phép các trang web kiểm soát nhiều miền con và miền cấp cao nhất hoạt động như một ứng dụng web liền mạch khi nói đến giao diện người dùng ứng dụng web và tính năng nắm bắt đường liên kết. Ví dụ: cho phép example.com của trang web trải dài trên example.com.co.uk và support.example.com hoạt động nhiều nhất có thể như một ứng dụng web duy nhất.

Sơ đồ minh hoạ một PWA chính và các trải nghiệm phụ liên quan.

Tiện ích phạm vi cho phép PWA có nhiều nguồn gốc hoạt động như một ứng dụng web liền mạch khi nói đến giao diện người dùng của ứng dụng web.

Trên thực tế, điều này chuyển thành 2 mục tiêu cụ thể hơn:

Thao tác điều hướng trên nhiều nguồn: Cho phép người dùng di chuyển giữa các nguồn liên kết mà không làm gián đoạn trải nghiệm người dùng bằng cách gọi giao diện người dùng cửa sổ để thông báo cho người dùng rằng họ đang rời khỏi PWA.
Ghi lại đường liên kết trên nhiều nguồn: Cho phép ứng dụng web ghi lại hoạt động điều hướng của người dùng đến các trang web mà họ có liên kết.

Điều hướng trong phạm vi nhiều nguồn gốc

Theo mặc định, khi di chuyển giữa các nguồn trong một PWA độc lập, người dùng sẽ thấy giao diện người dùng cửa sổ cho biết rằng họ đang di chuyển ra ngoài trải nghiệm PWA. Trong Chrome, giao diện người dùng này bao gồm một thanh "ngoài phạm vi" chứa URL của nguồn gốc mới. Điều này gây gián đoạn trải nghiệm người dùng, vì người dùng mong muốn tiếp tục điều hướng trong cùng một bối cảnh ứng dụng, nhưng họ có thể cảm thấy mình đang bị đưa ra khỏi bối cảnh đó.

Thanh ngoài phạm vi ở đầu một PWA độc lập.

Thanh "Ngoài phạm vi" xuất hiện trong Chrome khi người dùng di chuyển giữa các nguồn gốc khác nhau trong một PWA độc lập.

Với Scope Extensions, giao diện người dùng cửa sổ sẽ không xuất hiện khi người dùng chuyển đến bất kỳ nguồn gốc nào được liên kết, do đó, PWA sẽ xuất hiện dưới dạng một trải nghiệm hợp nhất.

Ghi nhận đường liên kết trên nhiều nguồn gốc

Tính năng ghi lại đường liên kết là khả năng ghi lại đường liên kết trong phạm vi của ứng dụng. Cách triển khai này khác nhau giữa các trình duyệt và hệ điều hành. Ví dụ: trong Chrome trên ChromeOS, theo mặc định, các đường liên kết trong phạm vi của một PWA đã cài đặt sẽ mở một thẻ trình duyệt có chỉ báo trong thanh địa chỉ cho biết có một ứng dụng có khả năng xử lý các đường liên kết này, cho phép người dùng chọn tham gia tính năng tự động nắm bắt đường liên kết từ thời điểm đó.

Lời nhắc trên thanh địa chỉ cho một PWA đã cài đặt.

Đoạn thanh địa chỉ của Chrome cho một thẻ trong ChromeOS cho thấy một chỉ báo trực quan rằng PWA có thể xử lý đường liên kết và lựa chọn ghi nhớ quyết định đó.

Nếu người dùng nhấp vào một đường liên kết nằm ngoài phạm vi của PWA (bao gồm cả đường liên kết đến miền con hoặc miền cấp cao nhất), thì họ sẽ không được nhận dạng là thuộc về PWA đó. Ví dụ: các đường liên kết sẽ được mở trong một thẻ trình duyệt mà không có bất kỳ dấu hiệu nào cho người dùng biết rằng có một ứng dụng có khả năng xử lý đường liên kết đó. Scope Extensions API cho phép mở rộng phạm vi của PWA để các nguồn gốc được liên kết được coi là các đường liên kết trong phạm vi.

Triển khai

Để triển khai các tiện ích phạm vi, bạn cần thiết lập mối quan hệ giữa nguồn gốc chính và các nguồn gốc được liên kết.

Khai báo danh sách các nguồn gốc được liên kết

Thêm thành phần scope_extensions tệp kê khai ứng dụng web vào nguồn gốc PWA chính để cho phép ứng dụng web mở rộng phạm vi của chúng sang các nguồn gốc khác.

Tệp kê khai ứng dụng web (https://example.com)

{
  "name": "Example",
  "display": "standalone",
  "start_url": "/index.html",
  "scope_extensions": [
    { "origin": "https://*.example.com" },
    { "origin": "https://example.co.uk" },
    { "origin": "https://*.example.co.uk" }
  ]
}

Xác nhận mối liên kết

Mỗi nguồn được liệt kê đều xác nhận mối liên kết với ứng dụng web bằng tệp cấu hình /.well-known/web-app-origin-association. Tệp này cần được đặt tên là web-app-origin-association và được phân phát tại chính xác vị trí này, vì đây là một URI đã biết.

/.well-known/web-app-origin-association (nguồn gốc được liên kết)

{
  "web_apps": [{ "web_app_identity": "https://example.com" }]
}

Bản minh hoạ

Bản minh hoạ này bao gồm 2 trang web:

PWA chính: PWA thực tế khai báo danh sách các nguồn gốc được liên kết thông qua thành phần scope_extensions trong tệp kê khai ứng dụng web.
Nguồn trong phạm vi mở rộng: Một nguồn bên ngoài phạm vi của PWA chính nhưng được liên kết với PWA đó sau khi được PWA chính liệt kê là một nguồn liên kết và xác nhận mối quan hệ thông qua tệp web-app-origin-association.

Để thực hiện các kiểm thử sau, bạn phải bật cờ about://flags/#enable-desktop-pwas-scope-extensions (có từ Chrome phiên bản 115 trở lên).

Kiểm thử thao tác điều hướng nhiều nguồn gốc

Là điều kiện tiên quyết cho các kiểm thử này, hãy mở PWA chính trong một trình duyệt, cài đặt PWA đó và mở để chạy ở chế độ độc lập. PWA chứa các đường liên kết đến một nguồn trong phạm vi mở rộng và đến một nguồn không nằm trong phạm vi mở rộng.

Cửa sổ PWA chính có các đường liên kết trong phạm vi và ngoài phạm vi.

PWA minh hoạ có các đường liên kết đến nguồn trong phạm vi mở rộng và nguồn không nằm trong phạm vi mở rộng.

Điều hướng mặc định trên nhiều nguồn (không thuộc phạm vi mở rộng)

Nhấp vào đường liên kết đến nguồn không nằm trong phạm vi mở rộng bên trong PWA ở chế độ toàn màn hình.
Do đó, quá trình điều hướng sẽ diễn ra và thanh ngoài phạm vi sẽ xuất hiện.

Cửa sổ PWA chính có thanh ngoài phạm vi sau khi nhấp vào đường liên kết ngoài phạm vi.

Thanh "Ngoài phạm vi" xuất hiện theo mặc định cho một thao tác điều hướng trên nhiều nguồn gốc đối với một PWA ở chế độ độc lập.

Điều hướng trên nhiều nguồn gốc bằng Tiện ích phạm vi (trong phạm vi mở rộng)

Quay lại trang chủ của PWA.
Nhấp vào đường liên kết đến nguồn gốc không nằm trong phạm vi mở rộng.
Theo mặc định, một thanh "ngoài phạm vi" sẽ xuất hiện, nhưng do mối liên kết ScopeExtensions nên thanh này không xuất hiện.

Cửa sổ PWA chính không có thanh ngoài phạm vi sau khi nhấp vào đường liên kết phạm vi mở rộng.

Thanh "Ngoài phạm vi" không xuất hiện trong thao tác điều hướng trên nhiều nguồn gốc sau khi mối liên kết nguồn gốc được thiết lập bằng Tiện ích phạm vi.

Kiểm thử tính năng ghi nhận đường liên kết từ nhiều nguồn

Mở và cài đặt PWA chính trong thiết bị ChromeOS.
Nhấp vào đường liên kết sau: nguồn gốc được liên kết.
Đường liên kết sẽ mở trong một thẻ trình duyệt mới và một lời nhắc sẽ xuất hiện để mở đường liên kết đó trong PWA đã cài đặt.

Lời nhắc trên thanh địa chỉ cho một PWA đã cài đặt có phạm vi mở rộng.

Khi nhấp vào một đường liên kết đến nguồn gốc được liên kết của một PWA, đường liên kết đó sẽ mở ra trong một thẻ mới và cho thấy biểu tượng "Mở trong ứng dụng", cho phép người dùng chọn tham gia tính năng tự động nắm bắt đường liên kết.

Bản dùng thử theo nguyên gốc

Nếu muốn kiểm thử API này trong ứng dụng của mình với người dùng thực tế, bạn có thể thực hiện việc này bằng thử nghiệm nguồn gốc. Thử nghiệm nguồn gốc cho phép bạn dùng thử các tính năng thử nghiệm với người dùng bằng cách lấy một mã thông báo thử nghiệm được liên kết với miền của bạn. Sau đó, bạn có thể triển khai ứng dụng và dự kiến ứng dụng sẽ hoạt động trong một trình duyệt hỗ trợ tính năng mà bạn đang kiểm thử (trong trường hợp này, tính năng này có trong Chrome từ phiên bản 121 đến 126). Để nhận mã thông báo riêng nhằm chạy thử nghiệm nguồn gốc, hãy điền vào biểu mẫu đăng ký.

Phản hồi

Nhóm Chrome đang tìm kiếm ý kiến phản hồi về mức độ hữu ích của API này. Để giúp nhóm phát triển API này dựa trên ý kiến phản hồi về tính hữu ích của API và các trường hợp sử dụng mới chưa có trong phiên bản hiện tại, hãy mở một Vấn đề trên GitHub.

Tài nguyên khác

Lời cảm ơn

Xin chân thành cảm ơn nhóm đã phát triển API này. Tiện ích phạm vi được chỉ định bởi Alan Cutter và Lu Huang, với thông tin đầu vào từ Matt Giuca. API này được Alan Cutter của Google Chrome và Hassan Talat, Kristin Lee và Lu Huang của Microsoft Edge triển khai.

Tiện ích phạm vi ứng dụng web Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.