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

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

Thomas Steiner

PWA là 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 một ứng dụng nhắn tin nhanh như Tin nhắn trên macOS và bạn đang nói về âm nhạc. Giả sử thêm, cả hai bạn đều đã cài đặt PWA music.example.com trên các thiết bị của bạn. Nếu bạn 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 liên kết sâu như https://music.example.com/rick-astley/never-gonna-give-you-up. Từ ngày này liên kết khá dài, nhà phát triển của music.example.com có thể đã quyết định thêm đường liên kết đường liên kết ngắn đến từng bản nhạc, chẳng hạn như https://🎵.example.com/r-a/n-g-g-y-u.

PWA làm 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 URL khớp với các mẫu như https://music.example.com, https://*.music.example.com hoặc https://🎵.example.com, vì vậy liên kết từ bên ngoài PWA, ví dụ: từ ứng dụng nhắn tin nhanh hoặc email ứng dụng, hãy mở trong PWA đã cài đặt thay vì trong thẻ trình duyệt.

PWA làm Trình xử lý URL bao gồm 2 nội dung bổ sung:

  1. Thành phần của 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 để theo dõi các liên kết hoặc liên kết danh sách phát mở trong trải nghiệm trình phát của ứng dụng.
  • Trình đọc tin tức hoặc RSS sẽ mở các trang web được đăng ký hoặc theo dõi ở chế độ đọc của ứng dụng.

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

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

Để thử nghiệm cục bộ PWA dưới dạng Trình xử lý URL mà không có 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 của tệp kê khai ứng dụng web "url_handlers"

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

Phần trích dẫn của tệp kê khai ứng dụng web dưới đây cho thấy cách ví dụ về ứng dụng web tiến bộ (PWA) âm nhạc trong phần giới thiệu có thể thiết lập điều này. Mục nhập thứ hai có ký tự đại diện ("https://*.music.example.com") đảm bảo ứ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 khác (music.example.com) với một số URL mà PWA cần tên người dùng (ví dụ: https://🎵.example.com), ứng dụng cần xác minh quyền sở hữu những nguồn gốc khác này. Chiến dịch 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, trong đó một phần tử có 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 duy nhất ứng dụng web. 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 đã 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 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 gồm 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 ứng dụng web tiến bộ (PWA) nhạc ở trên. Nó sẽ được lưu trữ trên máy chủ 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/*"]
      }
    }
  ]
}

URL khớp khi nào?

PWA so 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 nguồn 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 mà mỗi nguồn gốc đồng ý cho phép ứng dụng này xử lý URL như vậy.

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

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

Bản minh hoạ

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

Để kiểm tra xem ứng dụng đó có thực sự hoạt động không, hãy gửi cho chính mình một tin nhắn thử nghiệm bằng ứng dụng nhắn tin nhanh lựa chọn của bạn hoặc một email được xem trong một ứng dụng email không dựa trên nền tảng web như Mail trên macOS. Chiến lược phát hành đĩa đơn 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 phải mở trong PWA đã cài đặt.

Ứng dụng nhắn tin tức thì Windows Skype bên cạnh PWA bản 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 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 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ả người dùng khả năng kiểm soát, tính minh bạch và tính công thái học.

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ó). Thành phần điều hướng bắt đầu trong trình duyệt không được xử lý bởi đề xuất này, nó nhắm đến rõ ràng cá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 cho vì bất kỳ lý do gì, 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. Trình xử lý URL, nếu được triển khai không đúng cách, có thể bị dùng để chiếm đoạt lưu lượng truy cập của các 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 của 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 FindAppUriHandlersAsync API để liệt kê trình xử lý URL. Nếu PWA đăng ký là trình xử lý URL cấp hệ điều hành trong Windows, thì sự hiện diện của các PWA này sẽ hiển thị với các ứng dụng khác.

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

Một 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 giữa các ứng dụng web đã cài đặt. Nếu hoạt động đăng ký của 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 tồn tại, nên trình duyệt sẽ xoá đăng ký.

Phản hồi

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

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? Hoặc có phương thức nào bị thiếu hoặc thuộc tính nào bạn cần để triển khai ý tưởng của mình? Có câu hỏi hoặc nhận xét về bảo mật mẫu? Báo cáo 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 tại.

Báo cáo sự cố về 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 có khác với thông số kỹ thuật không? 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, các hướng dẫn đơn giản để tái tạo và nhập UI>Browser>WebAppInstalls vào phần Components (Thành phần) . Glitch rất hữu ích khi chia sẻ các bản dựng lại nhanh chóng và dễ dàng.

Hiện thông tin hỗ trợ về API này

Bạn có dự định sử 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 sắp xếp mức độ ưu tiên đồng thời cho các nhà cung cấp trình duyệt khác xem tầm quan trọng của việc hỗ trợ các tính năng đó.

Gửi một bài đăng đến @ChromiumDev kèm theo hashtag #URLHandlers rồi cho phép chúng tôi biết bạn đang sử dụng công cụ đó ở đâu và như thế nào.

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

Xác nhận

Lu Huang và Mandy Chen thuộc nhóm Microsoft Edge đã chỉ định và triển khai PWA làm Trình xử lý URL. Bài viết này được đánh giá bởi Joe Medley. Hình ảnh chính của Bryson Hammer trên Không hiển thị màn hình.