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

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

Thomas Steiner

PWA là gì là Trình xử lý URL?

Hãy tưởng tượng bạn đang trò chuyện với bạn bè qua ứng dụng nhắn tin tức thì 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 các thiết bị của mình. Nếu muốn chia sẻ bản nhạc yêu thích của mình để 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 các 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 vào mỗi kênh, 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, chẳng hạn như từ một ứng dụng nhắn tin tức thì 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 viên trong 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 phạm vi và ngoài phạm vi.

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

Ví dụ về những 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 để các đường liên kết theo dõi hoặc đường liên kết đến danh sách phát mở ra trong trải nghiệm trình phát của ứng dụng.
  • Trình đọc tin tức hoặc RSS có thể mở các trang web đã đăng ký hoặc theo dõi trong chế độ đọc của ứng dụng.

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

Bật thông qua about://flags

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

Thành viên trong tệp kê khai ứng dụng web "url_handlers"

Để 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. Quá trình này diễn ra thông qua thành viên "url_handlers". Phương thức này chấp nhận một mảng các đối tượng có thuộc tính origin. Đây là string bắt buộc, là mẫu để khớp với các nguồn gốc. Những mẫu này được phép có tiền tố ký tự đại diện (*) để bao gồm nhiều miền phụ (chẳng hạn như https://*.example.com). Ứng dụng web này có thể xử lý các URL khớp với những nguồn gốc này. Giao thức này luôn được giả định là https://, nhưng cần được đề cập rõ ràng.

Phần trích dẫn tệp kê khai ứng dụng web bên dưới cho thấy cách thức thiết lập PWA âm nhạc trong đoạn giới thiệu. Mục nhập 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 hoạt động trên một nguồn gốc (music.example.com) khác với một số URL mà PWA cần xử lý (ví dụ: https://🎵.example.com), ứng dụng cần xác minh quyền sở hữu đối với các nguồn gốc này. Quá trình này diễn 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 phầ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 duy nhất. Mỗi đối tượng chứa:

Trường Nội dung 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) Đối tượng chứa các mảng mẫu URL được bao gồm và bị loại trừ object Không áp dụng

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

Trường Nội dung mô tả Loại Mặc định
"paths" (Không bắt buộc) Mảng các chuỗi đường dẫn được phép string[] []
"exclude_paths" (Không bắt buộc) Mảng các 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 âm nhạc ở trên. Dữ liệu này sẽ được lưu trữ trên 🎵.example.com gốc và thiết lập mối liên kết với PWA music.example.com, được xác định bằng URL của 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 một URL khớp?

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

  • URL này 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 thông qua tệp web-app-origin-association tương ứng rằng mỗi điểm gốc đồng ý cho phép ứng dụng này xử lý URL như vậy.

Về tính năng khám phá tệp web-app-origin-association

Để trình duyệt phát hiện 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. Để làm được việc này, 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 ở trên, sau đó cài đặt PWA tại https://mandymsft.github.io/pwa/. Khi xem tệp kê khai ứng dụng web, bạn có thể thấy tệp này xử lý các URL có các mẫu URL sau: https://mandymsft.github.io và https://luhuangmsft.github.io. Vì tệp sau đây có 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 diễn ra thông qua 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 email đó 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 email xem trong một ứng dụng email không dựa 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 các 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 nhanh của Windows Skype bên cạnh PWA minh hoạ đã cài đặt. Ứng dụng này được mở ở chế độ độc lập sau khi nhấp vào đường liên kết do ứng dụng xử lý trong tin nhắn trò chuyện trên Sky.

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

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

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

Nếu 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ó). Các thành phần điều hướng bắt đầu trong một thẻ trình duyệt không được đề xuất này xử lý, mà rõ ràng là nhằm vào 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 được triển khai không đúng cách, trình xử lý URL có thể bị dùng để chiếm đoạt lưu lượng truy cập của trang web. Đây là lý do tại sao 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ẽ nhìn thấy sự hiện diện của PWA.

Khả năng lưu trữ cố định quyền

Nguồn gốc có thể sửa đổi mối liên kết với PWA bất cứ lúc nào. Các 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 do dữ liệu liên kết đã thay đổi hoặc không còn tồn tại, thì trình duyệt sẽ xoá các lượt đăng ký.

Ý kiến phản hồi

Nhóm Chromium muốn biết trải nghiệm của bạn khi sử dụng PWA trong vai trò Trình xử lý URL.

Cho chúng tôi biết về thiết kế của API

Có điều gì về API không hoạt động như bạn mong đợi không? Hay có thiếu phương thức hoặc thuộc tính nào mà bạn cần triển khai không? Bạn có thắc mắc 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 vấn đề hiện có.

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 Chromium không? Hay cách triển khai có khác với quy cách không? Gửi lỗi tại new.crbug.com. Hãy nhớ cung cấp nhiều thông tin chi tiết nhất có thể, hướng dẫn đơn giản để tái tạo và nhập UI>Browser>WebAppInstalls vào hộp Thành phần. Sự cố rất hữu ích trong việc chia sẻ các bản sao nhanh và dễ dàng.

Hỗ trợ API

Bạn có định dùng PWA làm Trình xử lý URL không? Sự hỗ trợ 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 biết tầm quan trọng của việc hỗ trợ họ.

Gửi một bài đăng trên Twitter đến @ChromiumDev kèm theo hashtag #URLHandlers và cho chúng tôi biết vị trí cũng như cách bạn sử dụng bài đăng này.

Các đường liên kết hữu ích

Xác nhận

PWA làm Trình xử lý URL do Lu Huang và Mandy Chen thuộc nhóm Microsoft Edge chỉ định và triển khai. Bài viết này do Joe Medley xem xét. Hình ảnh chính của Bryson Hammer trên Unsplash.