PWA đóng vai trò là Trình xử lý URL

Cho phép các PWA đã cài đặt xử lý URL để có trải nghiệm tích hợp hơn.

Thomas Steiner

PWA làm trình xử lý URL là gì?

Hãy tưởng tượng bạn đang trò chuyện với một người bạn bằng ứng dụng nhắn tin nhanh như Tin nhắn trên macOS và bạn đang nói về âm nhạc. Hãy tưởng tượng thêm rằng cả hai bạn đều đã cài đặt PWA music.example.com trên thiết bị của mình. Nếu muốn chia sẻ bản nhạc yêu thích để bạn bè thưởng thức, bạn có thể gửi cho họ một đường liên kết sâu như https://music.example.com/rick-astley/never-gonna-give-you-up. Vì đường liên kết này khá dài, nên nhà phát triển của music.example.com có thể đã quyết định thêm một đường liên kết ngắn bổ sung cho mỗi bản nhạc, chẳng hạn như https://🎵.example.com/r-a/n-g-g-y-u.

PWA dưới dạng Trình xử lý URL cho phép các ứng dụng như music.example.com tự đăng ký làm trình xử lý URL cho các URL khớp với các mẫu như https://music.example.com, https://*.music.example.com hoặc https://🎵.example.com, để các đường liên kết từ bên ngoài PWA (ví dụ: từ một ứng dụng nhắn tin tức thời hoặc ứng dụng email) mở trong PWA đã cài đặt thay vì trong thẻ trình duyệt.

PWA dưới dạng Trình xử lý URL bao gồm hai phần bổ sung:

  1. Thành phần tệp kê khai ứng dụng web "url_handlers".
  2. Định dạng tệp web-app-origin-association để xác thực các mối liên kết URL trong và ngoài phạm vi.

Các trường hợp sử dụng đề xuất cho PWA làm Trình xử lý URL

Ví dụ về các trang web có thể sử dụng API này bao gồm:

  • Các trang web phát trực tuyến nhạc hoặc video để đường liên kết đến bản nhạc hoặc đường liên kết đến danh sách phát mở trong trình phát của ứng dụng.
  • Trình đọc tin tức hoặc RSS để các trang web được theo dõi hoặc đăng ký mở trong chế độ đọc của ứng dụng.

Cách sử dụng PWA làm Trình xử lý URL

Bật bằng about://flags

Để thử nghiệm cục bộ với PWA dưới dạng Trình xử lý URL mà không cần mã thông báo dùng thử theo nguyên gốc, hãy bật cờ #enable-desktop-pwas-url-handling trong about://flags.

Thành phần "url_handlers" của tệp kê khai ứng dụng web

Để liên kết một PWA đã cài đặt với các mẫu URL, bạn cần chỉ định các mẫu này trong tệp kê khai ứng dụng web. Điều này xảy ra thông qua thành phần "url_handlers". Phương thức này chấp nhận một mảng đối tượng có thuộc tính origin, đây là một string bắt buộc, là một mẫu để so khớp nguồn gốc. Các mẫu này được phép có tiền tố ký tự đại diện (*) để bao gồm nhiều miền con (như https://*.example.com). Các URL khớp với những nguồn này có thể được ứng dụng web này xử lý. Lược đồ luôn được giả định là https://, nhưng cần được đề cập rõ ràng.

Đoạn trích sau đây của tệp kê khai ứng dụng web cho thấy cách ví dụ về PWA nhạc trong đoạn giới thiệu có thể thiết lập điều này. Mục thứ hai có ký tự đại diện ("https://*.music.example.com") đảm bảo rằng ứng dụng cũng được kích hoạt cho https://www.music.example.com hoặc các ví dụ tiềm năng khác như https://marketing-activity.music.example.com.

{
  "url_handlers": [
    {
      "origin": "https://music.example.com"
    },
    {
      "origin": "https://*.music.example.com"
    },
    {
      "origin": "https://🎵.example.com"
    }
  ]
}

Tệp web-app-origin-association

Vì PWA nằm trên một nguồn gốc (music.example.com) khác với một số URL mà ứng dụng cần xử lý (ví dụ: https://🎵.example.com), nên ứng dụng cần xác minh quyền sở hữu các nguồn gốc khác này. Điều này xảy ra trong tệp web-app-origin-association được lưu trữ trên các nguồn gốc khác.

Tệp này phải chứa JSON hợp lệ. Cấu trúc cấp cao nhất là một đối tượng, có một thành viên tên là "web_apps". Thành phần này là một mảng các đối tượng và mỗi đối tượng đại diện cho một mục nhập cho một ứng dụng web riêng biệt. Mỗi đối tượng chứa:

Trường Mô tả Loại Mặc định
"manifest" (Bắt buộc) Chuỗi URL của tệp kê khai ứng dụng web của PWA được liên kết string Không áp dụng
"details" (Không bắt buộc) Một đối tượng chứa các mảng mẫu URL được đưa vào và bị loại trừ object Không áp dụng

Mỗi đối tượng "details" chứa:

Trường Mô tả Loại Mặc định
"paths" (Không bắt buộc) Mảng chuỗi đường dẫn được phép string[] []
"exclude_paths" (Không bắt buộc) Mảng chuỗi đường dẫn không được phép string[] []

Dưới đây là ví dụ về tệp web-app-origin-association cho ví dụ về PWA nhạc ở trên. Tệp này sẽ được lưu trữ trên nguồn gốc 🎵.example.com và thiết lập mối liên kết với PWA music.example.com, được xác định bằng URL tệp kê khai ứng dụng web.

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

Khi nào thì URL khớp?

PWA khớp với một URL để xử lý nếu đáp ứng cả hai điều kiện sau:

  • URL khớp với một trong các chuỗi gốc trong "url_handlers".
  • Trình duyệt có thể xác thực bằng tệp web-app-origin-association tương ứng mà mỗi nguồn gốc đồng ý cho phép ứng dụng này xử lý một URL như vậy.

Về việc khám phá tệp web-app-origin-association

Để trình duyệt khám phá tệp web-app-origin-association, nhà phát triển cần đặt tệp web-app-origin-association vào thư mục /.well-known/ ở thư mục gốc của ứng dụng. Để tệp này hoạt động, tên tệp phải chính xác là web-app-origin-association.

Bản minh hoạ

Để kiểm thử PWA dưới dạng Trình xử lý URL, hãy nhớ đặt cờ trình duyệt như đã nêu, sau đó cài đặt PWA tại https://mandymsft.github.io/pwa/. Bằng cách xem tệp kê khai ứng dụng web, bạn có thể thấy ứng dụng này xử lý các URL có mẫu URL sau: https://mandymsft.github.io và https://luhuangmsft.github.io. Vì trang web sau nằm trên một nguồn gốc (luhuangmsft.github.io) khác với PWA, nên PWA trên mandymsft.github.io cần chứng minh quyền sở hữu. Việc này được thực hiện bằng tệp web-app-origin-association được lưu trữ tại https://luhuangmsft.github.io/.well-known/web-app-origin-association.

Để kiểm tra xem tính năng này có thực sự hoạt động hay không, hãy gửi cho chính bạn một tin nhắn thử nghiệm bằng ứng dụng nhắn tin nhanh mà bạn chọn hoặc một email được xem trong ứng dụng email không chạy trên nền tảng web như Mail trên macOS. Email hoặc tin nhắn văn bản phải chứa một trong hai đường liên kết https://mandymsft.github.io hoặc https://luhuangmsft.github.io. Cả hai đều sẽ mở trong PWA đã cài đặt.

Ứng dụng nhắn tin tức thì Skype trên Windows bên cạnh PWA minh hoạ đã cài đặt, được mở ở chế độ độc lập sau khi nhấp vào một đường liên kết do ứng dụng này xử lý trong tin nhắn trò chuyện trên Skype.

Tính bảo mật và quyền truy cập

Nhóm Chromium đã thiết kế và triển khai PWA dưới dạng Trình xử lý URL bằng cách sử dụng các nguyên tắc cốt lõi được xác định trong phần Kiểm soát quyền truy cập vào các tính năng mạnh mẽ của nền tảng web, bao gồm cả quyền kiểm soát của người dùng, tính minh bạch và tính tiện dụng.

Quyền kiểm soát của người dùng

Nếu có nhiều PWA đăng ký làm trình xử lý URL cho một mẫu URL nhất định, thì người dùng sẽ được nhắc chọn PWA mà họ muốn xử lý mẫu đó (nếu có). Đề xuất này không xử lý các thao tác điều hướng bắt đầu trong thẻ trình duyệt, mà chỉ nhắm đến các thao tác điều hướng bắt đầu bên ngoài trình duyệt.

Sự minh bạch

Nếu không thể hoàn tất thành công quy trình xác thực mối liên kết cần thiết trong quá trình cài đặt PWA vì bất kỳ lý do gì, thì trình duyệt sẽ không đăng ký ứng dụng làm trình xử lý URL đang hoạt động cho các URL bị ảnh hưởng. Nếu không được triển khai đúng cách, trình xử lý URL có thể được dùng để chiếm đoạt lưu lượng truy cập cho các trang web. Đây là lý do cơ chế liên kết ứng dụng là một phần quan trọng của lược đồ.

Các ứng dụng dành riêng cho nền tảng đã có thể sử dụng API hệ điều hành để liệt kê các ứng dụng đã cài đặt trên hệ thống của người dùng. Ví dụ: các ứng dụng trên Windows có thể sử dụng API FindAppUriHandlersAsync để liệt kê các trình xử lý URL. Nếu PWA đăng ký làm trình xử lý URL cấp hệ điều hành trong Windows, thì các ứng dụng khác sẽ thấy sự hiện diện của PWA.

Duy trì quyền

Một nguồn gốc có thể sửa đổi mối liên kết của nguồn gốc đó với PWA bất cứ lúc nào. Trình duyệt sẽ thường xuyên cố gắng xác thực lại mối liên kết của các ứng dụng web đã cài đặt. Nếu việc đăng ký trình xử lý URL không xác thực lại được vì dữ liệu liên kết đã thay đổi hoặc không còn nữa, thì trình duyệt sẽ xoá các lượt đăng ký.

Phản hồi

Nhóm Chromium muốn lắng nghe trải nghiệm của bạn về PWA dưới dạng Trình xử lý URL.

Hãy cho chúng tôi biết về thiết kế API

Có điều gì về API không hoạt động như bạn mong đợi không? Hay có phương thức hoặc thuộc tính nào còn thiếu mà bạn cần để triển khai ý tưởng của mình không? Bạn có câu hỏi hoặc nhận xét về mô hình bảo mật? Gửi vấn đề về thông số kỹ thuật trên kho lưu trữ GitHub tương ứng hoặc thêm ý kiến của bạn vào một vấn đề hiện có.

Báo cáo vấn đề về việc triển khai

Bạn có phát hiện lỗi trong quá trình triển khai Chromium không? Hay cách triển khai khác với thông số kỹ thuật? Báo cáo 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 hiện lỗi và nhập UI>Browser>WebAppInstalls vào hộp Thành phần.

Thể hiện sự ủng hộ đối với API

Bạn có dự định sử dụng PWA làm Trình xử lý URL không? Sự ủng hộ công khai của bạn giúp nhóm Chromium ư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 đó.

Gửi một tweet đến @ChromiumDev bằng hashtag #URLHandlers và cho chúng tôi biết bạn đang sử dụng ở đâu và như thế nào.

Đường liên kết hữu ích

Xác nhận

PWA dưới dạng Trình xử lý URL được chỉ định và triển khai bởi Lu Huang và Mandy Chen thuộc nhóm Microsoft Edge. Tài liệu này đã được Joe Medley xem xét.