Trang này được dịch bởi Cloud Translation API.

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

Từ Chrome 122, bạn có thể đăng ký bản dùng thử theo nguyên gốc cho thành viên tệp kê khai ứng dụng scope_extensions. Thành viên này cho phép các trang web kiểm soát nhiều miền con 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 ra mắt 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àm ứng dụng chính và sau đó là space_1.example.com, ..., space_n.example.com, đôi khi được kết hợp với special-example.com dưới dạng trải nghiệm phụ, tất cả đều nằm dưới mái nhà của ứng dụng chính. Loại cấu trúc trang web này có ý nghĩa khi nói đến Ứng dụng web tiến bộ. Các hạn chế bao gồm không thể chia sẻ trình chạy dịch vụ, bất kỳ loại thiết bị nào, bộ nhớ cục bộ và quyền giữa các nguồn gốc. Ngoài ra, hoạt động điều hướng trên nhiều nguồn gốc trong một PWA độc lập sẽ hiển thị một giao diện người dùng cửa sổ ("thanh nằm ngoài phạm vi") cho biết rằng người dùng đã chuyển 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ộ trên các trang web nhiều nguồn gốc và Xây dựng nhiều Ứng dụng web tiến bộ trên cùng một miền.

Phạm vi API Tiện ích cho phép các ứng dụng web vượt qua một số thách thức mà chính sách cùng nguồn gốc áp dụng trên loại cấu trúc trang web này. API này cho phép ứng dụng web mở rộng phạm vi của chúng cho các nguồn gốc khác để giúp đạt được trải nghiệm hợp nhất, theo 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 quan.

Bàn thắng

Mục tiêu chính của Scope Extensions API (API Tiện ích phạm vi) 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 kề khi nói đến giao diện người dùng của ứng dụng web và tính năng lấy đường liên kết. Ví dụ: để trang web example.com trải rộng 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.

Sơ đồ cho thấy một ứng dụng web tiến bộ (PWA) chính và các trải nghiệm phụ có liên quan.

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

Trong thực tế, việc này chuyển thành hai mục tiêu cụ thể hơn:

Điều hướng trên nhiều nguồn gốc: Cho phép người dùng di chuyển trên các nguồn gốc liên quan 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 di chuyển khỏi PWA.
Thu thập đường liên kết nhiều nguồn gốc: Cho phép các ứng dụng web ghi lại các thao tác của người dùng đến trang web mà họ liên kết.

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

Theo mặc định, khi người dùng di chuyển giữa các nguồn gốc trong một PWA độc lập, họ sẽ thấy một cửa sổ giao diện người dùng cho biết 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 sẽ làm gián đoạn trải nghiệm người dùng vì người dùng mong muốn tiếp tục thao tác trong cùng một ngữ cảnh ứng dụng, nhưng có thể họ nhận thấy rằng họ đang bị đưa ra khỏi ứng dụng.

Thanh nằm ngoài phạm vi ở đầu một ứng dụng web tiến bộ (PWA) độc lập.

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

Với Tiện ích phạm vi, giao diện người dùng cửa sổ sẽ không hiển thị khi người dùng chuyển đến bất kỳ nguồn gốc nào có liên quan, vì vậy, PWA sẽ hiển thị dưới dạng trải nghiệm hợp nhất.

Thu thập đường liên kết nhiều nguồn gốc

Tính năng Thu thập đường liên kết đề cập đến khả năng của một ứng dụng chụp được các đường liên kết trong phạm vi của ứng dụng đó. Cách thức triển khai sẽ 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 PWA đã cài đặt sẽ mở ra 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ó thể xử lý các đường liên kết này, cho phép người dùng chọn sử dụng tính năng tự động lấy đường liên kết từ thời điểm đó.

Lời nhắc của Omnibar cho một ứng dụng web tiến bộ (PWA) đã cài đặt.

Mảnh trên thanh địa chỉ của Chrome cho một thẻ trong ChromeOS cho thấy chỉ báo trực quan rằng đường liên kết có thể được PWA xử lý và tuỳ 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ả cá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 coi 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 cho người dùng biết rằng có một ứng dụng có thể xử lý đường liên kết. Scope Scope Extensions API (API Tiện ích phạm vi) cho phép mở rộng phạm vi của PWA để các nguồn gốc liên kết được coi là đường liên kết trong phạm vi.

Triển khai

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

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

Thêm một thành viên trong tệp kê khai của ứng dụng web scope_extensions vào nguồn gốc PWA chính để cho phép ứng dụng web mở rộng phạm vi hoạt độ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 gốc được liệt kê sẽ xác nhận mối liên kết với ứng dụng web bằng cách sử dụ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 đúng 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ạ bao gồm hai trang web:

PWA chính: PWA thực tế khai báo danh sách các nguồn gốc có liên quan thông qua thành phần scope_extensions trong tệp kê khai ứng dụng web.
Nguồn gốc trong phạm vi mở rộng: Nguồn gốc nằm ngoài phạm vi của PWA chính nhưng có liên kết với nó sau khi được PWA chính liệt kê làm nguồn gốc 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ó trên Chrome phiên bản 115 trở đi).

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

Như một điều kiện tiên quyết của các hoạt động kiểm thử này, hãy mở PWA chính trong một trình duyệt, cài đặt dưới dạng PWA và mở để chạy ở chế độ độc lập. PWA chứa các đường liên kết đến một nguồn gốc trong phạm vi mở rộng và đến một nguồn gốc 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à phạm vi mở rộng.

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

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

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 trong PWA 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 không có thanh 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" hiển thị theo mặc định cho thành phần điều hướng trên nhiều nguồn gốc cho 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, thanh "ngoài phạm vi" sẽ hiển thị, nhưng do liên kết Tiện ích phạm vi nên thanh sẽ không hiển thị.

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

Thanh "Ngoài phạm vi" không hiển thị trong thành phần điều hướng trên nhiều nguồn gốc sau khi liên kết nguồn gốc với Tiện ích phạm vi.

Kiểm thử việc thu thập đường liên kết nhiều nguồn gốc

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à lời nhắc sẽ xuất hiện để mở đường liên kết đó trong PWA đã cài đặt.

Lời nhắc của Omnibar cho một ứng dụng web tiến bộ (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 PWA, đường liên kết sẽ mở trong một thẻ mới và hiện biểu tượng "Mở trong ứng dụng" cho phép người dùng chọn cho phép tự động chụp đườ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 với người dùng thực tế, bạn có thể thực hiện việc này bằng bản dùng thử theo nguyên gốc. Bản dùng thử theo nguyê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ã thông báo thử nghiệm liên kết với miền của bạn. Sau đó, bạn có thể triển khai ứng dụng và kỳ vọng ứng dụng đó hoạt động trong trình duyệt hỗ trợ tính năng mà bạn đang thử nghiệm (trong trường hợp này, ứng dụng có trong Chrome từ phiên bản 121 đến 126). Để lấy mã thông báo của riêng bạn nhằm chạy bản dùng thử theo nguyên gốc, hãy điền vào biểu mẫu đăng ký.

Ý kiến phản hồi

Nhóm Chrome đang mong nhận được ý kiến phản hồi về tính 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 đề cập trong phiên bản hiện tại, hãy mở một Vấn đề trên GitHub.

Tài nguyên bổ sung

Xác nhận

Xin chân thành cảm ơn đội ngũ phát triển API này. Tiện ích phạm vi được Alan Cutter và Lu Huang chỉ định, với dữ liệu đầu vào từ Matt Giuca. API này do Alan Cutter trên Google Chrome và Hassan Talat, Kristin Lee và Lu Huang từ Microsoft Edge triển khai.