Cho phép các PWA đã cài đặt xử lý URL để mang lại trải nghiệm tích hợp hơn.
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 một ứ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. Giả sử thêm, 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 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 vào mỗi kênh, 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 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, nhờ đó các đường liên kết từ bên ngoài PWA (ví dụ: từ ứng dụng nhắn tin nhanh hoặc ứng dụng email) sẽ 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 hai phần bổ sung:
- Thành phần của tệp kê khai ứng dụng web
"url_handlers". - Đị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
Sau đây là ví dụ về các trang web có thể sử dụng API này:
- Trang web phát trực tuyến nhạc hoặc video để các đường liên kết đến bản nhạc hoặc danh sách phát mở trong trải nghiệm trình phát của ứng dụng.
- Các trang web tin tức hoặc trình đọc RSS mà bạn theo dõi hoặc đăng ký sẽ mở trong chế độ trình đọ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 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. Đ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ẫ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). Ứng dụng web này có thể xử lý các URL khớp với các nguồn gốc này. Lược đồ luôn được giả định là https://, nhưng cần đượ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 thiết lập ví dụ về 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 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), ứng dụng cần xác minh quyền sở hữu của 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 phần có tên là "web_apps". Thành phần này là một mảng đố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 | 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 gồm các mẫu URL được đưa vào và 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 gồm 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à tệp web-app-origin-association mẫu cho ví dụ về PWA âm nhạc ở trên. Tệp 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 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 trùng khớp?
Một PWA sẽ 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 thông qua tệp
web-app-origin-associationtương ứng mà mỗi nguồn gốc đồng ý cho phép ứng dụng này xử lý URL như vậy.
Liên quan đến 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
đặ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ác vụ này hoạt động, tên tệp chính xác phải 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/. Bằng cách xem 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ì ứng dụng web tiến bộ này 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 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 dịch vụ 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 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 đườ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.
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 bài viết 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 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, 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 quy trình xác thực liên kết cần thiết trong quá trình cài đặt PWA vì lý do nào đó, 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ể được dùng để xâm nhập lưu lượng truy cập cho các trang web. Đó 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 đồ này.
Các ứng dụng dành riêng cho nền tảng hiện 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ê 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.
Quyền ổn định
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 các mối liên kết của các ứng dụng web đã cài đặt. Nếu không xác thực lại được một lượt đăng ký trình xử lý URL 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 biết trải nghiệm của bạn khi sử dụng PWA làm 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? Hay có phương thức hoặc thuộc tính nào bị 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 này? 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 sự cố về triển khai
Bạn có tìm thấy lỗi khi 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?
Gửi 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 đơn giản để tái hiện lỗi và nhập UI>Browser>WebAppInstalls vào hộp Components (Thành phần). Glitch rất hữu ích để chia sẻ các bản tái hiện nhanh chóng và dễ dàng.
Hỗ trợ 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
- Video giải thích công khai
- Bản minh hoạ | Nguồn minh hoạ
- Lỗi theo dõi Chromium
- Mục nhập trên ChromeStatus.com
- Thành phần Blink:
UI>Browser>WebAppInstalls - Bài đánh giá TAG
- Tài liệu của Microsoft
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 Joe Medley xem xét. Hình ảnh chính của Bryson Hammer trên Unsplash.