Đăng ký trình xử lý giao thức URL cho PWA

Cho phép các PWA đã cài đặt xử lý các đường liên kết sử dụng một giao thức cụ thể để mang lại trải nghiệm tích hợp hơn.

Thông tin cơ bản về các giao thức (còn gọi là giao thức)

Giá trị nhận dạng tài nguyên thống nhất (Uniform Resource Identifier – URI) là một chuỗi ký tự nhỏ gọn giúp xác định một tài nguyên trừu tượng hoặc tài nguyên thực. Mỗi URI bắt đầu bằng một tên lược đồ đề cập đến thông số kỹ thuật để chỉ định các giá trị nhận dạng trong lược đồ đó. Do đó, cú pháp URI là một hệ thống đặt tên liên kết và có thể mở rộng, trong đó thông số kỹ thuật của mỗi lược đồ có thể hạn chế hơn nữa cú pháp và ngữ nghĩa của giá trị nhận dạng bằng cách sử dụng lược đồ đó. Lược đồ còn được gọi là giao thức. Bạn có thể xem một số ví dụ về lược đồ dưới đây.

tel:+1-816-555-1212
mailto:Jane.Doe@example.com
news:comp.infosystems.www.servers.unix
https://web.dev/

Thuật ngữ Uniform Resource Locator (Bộ định vị tài nguyên thống nhất – URL) đề cập đến tập hợp con URI, ngoài việc xác định một tài nguyên, còn cung cấp một phương thức để định vị tài nguyên bằng cách mô tả cơ chế truy cập chính của tài nguyên đó (ví dụ: vị trí mạng).

Nền trên phương thức registerProtocolHandler()

Phương thức Navigator chỉ bảo mật nội dung registerProtocolHandler() cho phép các trang web đăng ký khả năng mở hoặc xử lý các lược đồ URL cụ thể. Do đó, các trang web cần gọi phương thức này như sau: navigator.registerProtocolHandler(scheme, url). Hai tham số được xác định như sau:

  • scheme: Một chuỗi chứa giao thức mà trang web muốn xử lý.
  • url: Chuỗi chứa URL của trình xử lý. URL này phải bao gồm %s, dưới dạng một phần giữ chỗ sẽ được thay thế bằng URL thoát mà hệ thống sẽ xử lý.

Giao thức phải là một trong các giao thức liệt kê an toàn (ví dụ: mailto, bitcoin hoặc magnet) hoặc bắt đầu bằng web+, theo sau là ít nhất một hoặc nhiều chữ cái ASCII viết thường sau tiền tố web+, ví dụ: web+coffee.

Để giúp bạn hiểu rõ hơn về quy trình này, sau đây là một ví dụ cụ thể về quy trình:

  1. Người dùng truy cập vào trang web tại https://coffeeshop.example.com/ để thực hiện lệnh gọi sau: navigator.registerProtocolHandler('web+coffee', 'coffee?type=%s').
  2. Sau đó, khi truy cập https://randomsite.example.com/, người dùng nhấp vào một đường liên kết chẳng hạn như <a href="web+coffee:latte-macchiato">All about latte macchiato</a>.
  3. Thao tác này sẽ khiến trình duyệt chuyển đến URL sau: https://coffeeshop.example.com/coffee?type=web%2Bcoffee%3A%2F%2Flatte-macchiato. Sau đó, hệ thống đã giải mã URL của chuỗi tìm kiếm rồi đọc ?type=web+coffee://latte-macchiato.

Vấn đề của quá trình xử lý giao thức

Cơ chế đăng ký trình xử lý giao thức URL cho PWA hiện tại xoay quanh việc cung cấp tính năng đăng ký trình xử lý giao thức trong quá trình cài đặt PWA thông qua tệp kê khai. Sau khi đăng ký PWA làm trình xử lý giao thức, khi người dùng nhấp vào một siêu liên kết có một giao thức cụ thể, chẳng hạn như mailto, bitcoin hoặc web+music trên một trình duyệt hoặc ứng dụng dành riêng cho nền tảng, PWA đã đăng ký sẽ mở và nhận URL. Điều quan trọng cần lưu ý là cả phương thức đăng ký dựa trên tệp kê khai được đề xuất và registerProtocolHandler() truyền thống đều đóng các vai trò rất giống nhau trong thực tế, trong khi vẫn cho phép khả năng cung cấp trải nghiệm người dùng bổ sung:

  • Những điểm tương tự bao gồm các yêu cầu về danh sách giao thức được phép đăng ký, tên và định dạng của tham số, v.v.
  • Sự khác biệt trong việc đăng ký dựa trên tệp kê khai là rất khó thấy, nhưng có thể hữu ích để nâng cao trải nghiệm cho người dùng PWA. Ví dụ: hoạt động đăng ký PWA dựa trên tệp kê khai có thể không yêu cầu người dùng thực hiện thêm hành động nào khác ngoài việc cài đặt PWA theo yêu cầu của người dùng.

Trường hợp sử dụng

  • Trong một ứng dụng web tiến bộ (PWA) xử lý văn bản, người dùng trong tài liệu sẽ thấy một đường liên kết đến một bản trình bày như web+presentations://deck2378465. Khi người dùng nhấp vào đường liên kết, PWA bản trình bày sẽ tự động mở trong đúng phạm vi và hiển thị bản trình bày.
  • Trong một ứng dụng trò chuyện dành riêng cho nền tảng, người dùng trong tin nhắn trò chuyện sẽ nhận được một đường liên kết đến URL của magnet. Khi bạn nhấp vào đường liên kết, một tệp torrent PWA đã cài đặt sẽ khởi chạy và bắt đầu tải xuống.
  • Người dùng đã cài đặt PWA phát nhạc trực tuyến. Khi một người bạn chia sẻ đường liên kết đến một bài hát như web+music://songid=1234&time=0:13 và người dùng nhấp vào đó, PWA phát nhạc trực tuyến sẽ tự động chạy trong một cửa sổ độc lập.

Cách sử dụng hoạt động đăng ký trình xử lý giao thức URL cho PWA

API để đăng ký trình xử lý giao thức URL được mô hình hoá chặt chẽ trên navigator.registerProtocolHandler(). Lần này, thông tin được truyền theo cách khai báo thông qua tệp kê khai ứng dụng web trong một thuộc tính mới có tên là "protocol_handlers". Thuộc tính này sẽ nhận một mảng các đối tượng có 2 khoá bắt buộc "protocol""url". Đoạn mã dưới đây cho biết cách đăng ký web+teaweb+coffee. Giá trị là các chuỗi chứa URL của trình xử lý có phần giữ chỗ %s bắt buộc cho URL thoát.

{
  "protocol_handlers": [
    {
      "protocol": "web+tea",
      "url": "/tea?type=%s"
    },
    {
      "protocol": "web+coffee",
      "url": "/coffee?type=%s"
    }
  ]
}

Nhiều ứng dụng đăng ký cùng một giao thức

Nếu nhiều ứng dụng tự đăng ký làm trình xử lý cho cùng một lược đồ, chẳng hạn như giao thức mailto, hệ điều hành sẽ cho người dùng thấy một bộ chọn và cho phép họ quyết định trình xử lý đã đăng ký nào cần sử dụng.

Cùng một ứng dụng đăng ký nhiều giao thức

Cùng một ứng dụng có thể tự đăng ký nhiều giao thức, như bạn có thể thấy trong mã mẫu ở trên.

Đăng ký trình xử lý và bản cập nhật ứng dụng

Hoạt động đăng ký trình xử lý được đồng bộ hoá với phiên bản tệp kê khai mới nhất do ứng dụng cung cấp. Có hai trường hợp:

  • Bản cập nhật bổ sung trình xử lý mới sẽ kích hoạt đăng ký trình xử lý (tách biệt với việc cài đặt ứng dụng).
  • Một bản cập nhật loại bỏ trình xử lý sẽ kích hoạt chế độ huỷ đăng ký trình xử lý (tách biệt với việc gỡ cài đặt ứng dụng).

Gỡ lỗi trình xử lý giao thức trong Công cụ cho nhà phát triển

Chuyển đến phần Trình xử lý giao thức qua ngăn Ứng dụng > Tệp kê khai. Bạn có thể xem và kiểm thử tất cả các giao thức hiện có tại đây.

Ví dụ: cài đặt PWA minh hoạ này. Trong phần Trình xử lý giao thức, hãy nhập "CAno" rồi nhấp vào Test Protocol (Kiểm tra giao thức) để mở trang cà phê trong PWA.

Trình xử lý giao thức trong ngăn Tệp kê khai

Bản minh hoạ

Bạn có thể xem bản minh hoạ cách đăng ký trình xử lý giao thức URL cho PWA trên Glitch.

  1. Truy cập vào https://protocol-handler.glitch.me/, cài đặt PWA rồi tải lại ứng dụng sau khi cài đặt. Trình duyệt hiện đã đăng ký PWA làm trình xử lý cho giao thức web+coffee với hệ điều hành.
  2. Trong cửa sổ PWA đã cài đặt, hãy nhấp vào đường liên kết https://protocol-handler-link.glitch.me/. Thao tác này sẽ mở một thẻ trình duyệt mới có 3 đường liên kết. Nhấp vào nút đầu tiên hoặc thứ hai (latte macchiato hoặc Americanno). Lúc này, trình duyệt sẽ hiển thị một lời nhắc để hỏi xem bạn có muốn ứng dụng trở thành một trình xử lý giao thức cho giao thức web+coffee hay không. Nếu bạn đồng ý, PWA sẽ mở và hiển thị cà phê đã chọn.
  3. Để so sánh với quy trình truyền thống sử dụng navigator.registerProtocolHandler(), hãy nhấp vào nút Đăng ký trình xử lý giao thức trong PWA. Sau đó, trong thẻ trình duyệt, hãy nhấp vào đường liên kết thứ ba (chai). Tương tự, ứng dụng sẽ hiển thị lời nhắc, nhưng sau đó mở PWA trong một thẻ chứ không phải trong cửa sổ trình duyệt.
  4. Tự gửi tin nhắn cho chính bạn trên ứng dụng dành riêng cho nền tảng như Skype trên Windows bằng một liên kết như <a href="web+coffee://americano">Americano</a> và nhấp vào liên kết đó. Tương tự, ứng dụng sẽ mở PWA đã cài đặt.

Bản minh hoạ trình xử lý giao thức URL có thẻ trình duyệt có các đường liên kết ở bên trái và cửa sổ PWA độc lập ở bên phải.

Lưu ý về bảo mật

Vì việc cài đặt PWA yêu cầu ngữ cảnh phải bảo mật nên hoạt động xử lý giao thức sẽ kế thừa quy tắc ràng buộc này. Danh sách trình xử lý giao thức đã đăng ký sẽ không hiển thị trên web theo bất kỳ cách nào nên không thể dùng làm vectơ tạo vân tay số.

Các lượt điều hướng không do người dùng thực hiện

Các thao tác điều hướng không phải do người dùng thực hiện nhưng có lập trình có thể không mở được ứng dụng. Bạn chỉ có thể sử dụng URL giao thức tuỳ chỉnh dưới dạng URL của iframe, nhưng không được sử dụng trong ngữ cảnh duyệt web cấp cao nhất.

Danh sách các giao thức được cho phép

Cũng giống như registerProtocolHandler(), có một danh sách cho phép gồm các giao thức mà ứng dụng có thể đăng ký để xử lý.

Trong lần đầu tiên khởi chạy PWA do một giao thức được gọi, người dùng sẽ thấy hộp thoại cấp quyền. Hộp thoại này sẽ cho thấy tên ứng dụng và nguồn gốc của ứng dụng, đồng thời hỏi người dùng xem ứng dụng có được phép xử lý các đường liên kết từ giao thức hay không. Nếu người dùng từ chối hộp thoại cấp quyền, thì hệ điều hành sẽ bỏ qua trình xử lý giao thức đã đăng ký. Để huỷ đăng ký trình xử lý giao thức, người dùng cần gỡ cài đặt PWA đã đăng ký PWA. Trình duyệt cũng sẽ huỷ đăng ký trình xử lý giao thức nếu người dùng chọn "Ghi nhớ lựa chọn của tôi" và chọn "Không cho phép".

Ý kiến 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 khi đăng ký trình xử lý giao thức URL cho PWA.

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 sử dụng hoạt động đăng ký trình xử lý giao thức URL cho PWA không? Dịch vụ 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ợ các tính năng đó.

Chia sẻ cách bạn dự định sử dụng tính năng này trên chuỗi bài đăng WICG Discourse. Hãy gửi Tweet đến @ChromiumDev kèm theo hashtag #ProtocolHandler và cho chúng tôi biết vị trí cũng như cách bạn sử dụng hashtag này.

Xác nhận

Việc đăng ký trình xử lý giao thức URL cho PWA đã được Fabio Rocha, Diego González, Connor MoodySamuel Tang thuộc nhóm Microsoft Edge chỉ định và chỉ định. Bài viết này đã được Joe Medley và Fabio Rocha xem xét. Hình ảnh chính của JIT Ying trên Unsplash.