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 scope_extensions Thành viên tệp kê khai ứng dụng cho phép các trang web kiểm soát nhiều miền con và phần trên cùng được trình bày dưới dạng một ứng dụng web đơn lẻ. Tài liệu này giải thích lý do nhóm Chrome sẽ giới thiệu tính năng này và thời điểm bạn có thể muốn sử dụng.

Demián Renzulli

Thomas Steiner

Tổng quan

Một số ứng dụng web có nhiều origins, cho ví dụ: example.com làm ứng dụng chính, sau đó là space_1.example.com, ..., space_n.example.com, đôi khi được kết hợp với special-example.com, như những trải nghiệm phụ, tất cả đều nằm trong ứng dụng chính. Loại trang web này cấu trúc có ý nghĩa quan trọng trong bối cảnh của các Ứng dụng web tiến bộ. Các hạn chế bao gồm việc 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à các quyền trên các nguồn gốc. Ngoài ra, điều hướng trên nhiều nguồn gốc trong một PWA độc lập hiển thị giao diện người dùng dạng cửa sổ (thanh "nằm ngoài phạm vi") cho biết rằng người dùng đã di 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ố những vấn đề này trong các bài viết Ứng dụng web tiến bộ trong 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.

Scope Extensions API cho phép các ứng dụng web vượt qua một số thách thức mà thời gian chính sách cùng nguồn gốc áp dụng cho loại kiến trúc trang web này. Hộp cát về quyền riêng tư cho phép các ứng dụng web mở rộng phạm vi đối với các nguồn gốc khác để giúp đạt được trải nghiệm thống nhất, thoả thuận nhất định giữa nguồn gốc chính và nguồn gốc tương ứng.

Bàn thắng

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 kề khi nói đến giao diện người dùng của ứng dụng web và việc thu thập đường liên kết. Ví dụ: cho phép trang web example.com mở rộng example.com.co.uk và support.example.com hoạt động như nhiều nhất có thể như một ứng dụng web đơn lẻ.

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 ứng dụng web tiến bộ (PWA) nhiều nguồn gốc hoạt động như một ứng dụng web liền kề khi đó là về giao diện người dùng của ứng dụng web.

Trong thực tế, điều 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ọ sẽ rời khỏi PWA.
Thu thập 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 di chuyển của người dùng mà các cookie đó 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, hiển thị giao diện người dùng cửa sổ 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 phần "ngoài phạm vi" thanh 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 muốn tiếp tục điều hướng bên trong cùng một bối cảnh của ứng dụng, nhưng họ có thể nhận thấy chúng sẽ bị khai thác khỏi không gian đó.

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

"Ngoài phạm vi hỗ trợ" thanh hiển thị trong Chrome khi người dùng điều hướng qua 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 xuất hiện khi người dùng di chuyển đến bất kỳ của các nguồn gốc được liên kết để PWA được trình bày dưới dạng trải nghiệm hợp nhất.

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

Chụp liên kết đề cập đến khả năng một ứng dụng chụp các liên kết bên trong phạm vi. Cách triển khai tính năng này sẽ khác nhau giữa các trình duyệt và hệ điều hành hệ thống. Trong Chrome trên ChromeOS (ví dụ: đường liên kết trong phạm vi một bản cài đặt) Theo mặc định, PWA sẽ mở một thẻ trình duyệt có chỉ báo trong thanh địa chỉ có một ứng dụng có thể xử lý nhữ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 chụp liên kết từ thời điểm đó.

Lời nhắc Omnibar cho một PWA đã cài đặt.

Một đoạn của thanh địa chỉ Chrome cho một thẻ trong ChromeOS cho thấy chỉ báo trực quan 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 liên kết đến miền con hoặc miền cấp cao nhất), thì chúng sẽ không được coi là thuộc về vào ứng dụng. Ví dụ: đường liên kết sẽ được mở trong một thẻ trình duyệt mà không có bất kỳ chỉ báo nào cho người dùng biết rằng có một ứng dụng có thể xử lý đường liên kết. Phạm vi API Tiện ích cho phép mở rộng phạm vi của PWA để các tiện ích nguồn gốc được coi là đường liên kết trong phạm vi.

Triển khai

Việc triển khai tiện ích phạm vi yêu cầu thiết lập mối quan hệ giữa nguồn gốc chính và nguồn gốc có liên quan.

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

Thêm một thành phần của tệp kê khai ứng dụng web scope_extensions vào nguồn gốc chính của PWA để cho phép ứng dụng web mở rộng phạm vi 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ục vụ tại vị trí chính xác này, là đó là một URI phổ biến.

/.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 2 trang web:

PWA chính: PWA thực tế mà khai báo danh sách các nguồn gố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 gốc ở phạm vi mở rộng: Một 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 liệt kê thông qua PWA chính làm nguồn gốc đượ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 thử nghiệm sau đây, bạn phải bật Cờ about://flags/#enable-desktop-pwas-scope-extensions (có sẵn từ Chrome phiên bản 115 trở đi).

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

Điều kiện tiên quyết cho những thử nghiệm này là mở PWA chính trong trình duyệt, cài đặt nó làm PWA và mở tệp đó để chạy ở chế độ độc lập. PWA chứa các đường liên kết đến một Gốc ở 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 có trong phạm vi và phạm vi mở rộng.

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

Điều hướng trên 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 bên trong PWA toàn màn hình.
Do đó, quá trình điều hướng sẽ diễn ra và thanh nằm ngoài phạm vi sẽ hiển thị.

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

"Ngoài phạm vi hỗ trợ" thanh hiển thị theo mặc định cho hoạt động điều hướng trên nhiều nguồn gốc cho PWA trong 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 để nguồn gốc không nằm trong phạm vi mở rộng.
Theo mặc định, trường "ngoài phạm vi" thanh sẽ được hiển thị, nhưng do Phạm vi Liên kết tiện ích, không phải.

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

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

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

Mở và cài đặt PWA chính trong một Thiết bị ChromeOS.
Nhấp vào đường liên kết sau: nguồn gố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 trong đó PWA đã cài đặt.

Lời nhắc Omnibar cho một ứng dụng web tiến bộ (PWA) đã cài đặt có phạm vi mở rộng.

Khi bạn 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 ứng dụng web tiến bộ (PWA), đường liên kết đó sẽ mở ra trong một thẻ mới và hiển thị thông báo "Open in App" (Mở trong ứng dụng) biểu tượng cho phép người dùng chọn liên kết tự động chụp ảnh.

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

Nếu bạn muốn thử nghiệm API này trong ứng dụng của mình ở ngoài môi trường thực tế người dùng, bạn có thể làm như vậ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 thu thập 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 của mình và mong đợi nó hoạt động trong trình duyệt hỗ trợ tính năng bạn đang thử nghiệm (trong trường hợp, nó có trong Chrome từ 121 đến 126). Cách nhận mã thông báo của riêng bạn cho chạy bản dùng thử theo nguyên gốc, điền vào biểu mẫu đăng ký.

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. Người nhận 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à trường hợp sử dụng mới không 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

Xác nhận

Đặc biệt cảm ơn đội ngũ 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 nhập từ Matt Giuca. API này được triển khai bởi Alan Cutter từ Google Chrome và Hassan Talat, Kristin Lee và Lu Huang trong Microsoft Edge.