Đă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ề giao thức (còn gọi là giao thức)

Mã nhận dạng tài nguyên thống nhất (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 tên lược đồ (scheme) tham chiếu đến một thông số kỹ thuật để gán 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 giao thức có thể hạn chế thêm cú pháp và ngữ nghĩa của giá trị nhận dạng bằng cách sử dụng giao thức đó. Lược đồ còn được gọi là giao thức. Bạn có thể xem một số ví dụ về giao thức ở bên dưới.

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

Thuật ngữ Bộ định vị tài nguyên đồng nhất (URL) đề cập đến tập hợp con của URI, ngoài việc xác định một tài nguyên, còn cung cấp 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 của tài nguyên).

Thông tin cơ bản về phương thức registerProtocolHandler()

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

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

Lược đồ phải là một trong các lược đồ đượ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.

Để làm rõ hơn, sau đây là ví dụ cụ thể về quy trình này:

  1. Người dùng truy cập vào một trang web tại https://coffeeshop.example.com/ và thực hiện lệnh gọi sau: navigator.registerProtocolHandler('web+coffee', 'coffee?type=%s').
  2. Sau đó, trong khi truy cập vào https://randomsite.example.com/, người dùng nhấp vào một đường liên kết 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. URL của chuỗi tìm kiếm được giải mã rồi đọc là ?type=web+coffee://latte-macchiato.

Nội dung về việc xử lý giao thức

Cơ chế đăng ký trình xử lý giao thức URL cho PWA hiện tại là về 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ý một 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ó giao thức cụ thể như mailto, bitcoin hoặc web+music từ trình duyệt hoặc ứng dụng dành riêng cho nền tảng, PWA đã đăng ký sẽ mở ra 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 đề xuất và registerProtocolHandler() truyền thống đều đóng vai trò rất giống nhau trong thực tế, đồng thời vẫn cho phép có thể bổ sung trải nghiệm người dùng:

  • Các điểm tương đồng 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 quy trình đăng ký dựa trên tệp kê khai là rất nhỏ, nhưng có thể hữu ích để nâng cao trải nghiệm cho người dùng PWA. Ví dụ: việc đă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 thao tác nào ngoài việc cài đặt PWA do người dùng khởi tạo.

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

  • Trong một PWA xử lý văn bản, người dùng trong một tài liệu sẽ gặp 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 trình bày sẽ tự động mở trong phạm vi chính xác và hiển thị tập 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 đường liên kết đến URL magnet. Sau khi nhấp vào đường liên kết, một PWA torrent đã cài đặt sẽ khởi chạy và bắt đầu tải xuống.
  • Người dùng đã cài đặt mộ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 đường liên kết đó, PWA phát nhạc trực tuyến sẽ tự động khởi chạy trong một cửa sổ độc lập.

Cách sử dụng tính nă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(). Chỉ 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 lấy một mảng đối tượng có hai khoá bắt buộc là "protocol""url". Đoạn mã dưới đây cho biết cách đăng ký web+teaweb+coffee. Các giá trị này là các chuỗi chứa URL của trình xử lý với 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 giao thức, ví dụ: giao thức mailto, thì hệ điều hành sẽ hiển thị cho người dùng một bộ chọn và cho phép họ quyết định sử dụng trình xử lý nào trong số các trình xử lý đã đăng ký.

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

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

Cập nhật ứng dụng và đăng ký trình xử lý

Các lượt đă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 thêm trình xử lý mới sẽ kích hoạt việc đăng ký trình xử lý (riêng biệt với việc cài đặt ứng dụng).
  • Bản cập nhật xoá trình xử lý sẽ kích hoạt việc huỷ đăng ký trình xử lý (riêng 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 thông qua ngăn Application (Ứng dụng) > Manifest (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 ứng dụng web tiến bộ (PWA) minh hoạ này. Trong phần Trình xử lý giao thức, hãy nhập "americano" rồi nhấp vào Kiểm thử 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ạ về 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 và 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 loại đồ uống đầu tiên hoặc thứ hai (latte macchiato hoặc Americano). Giờ đây, trình duyệt sẽ hiển thị một lời nhắc và hỏi xem bạn có đồng ý để ứng dụng là trình xử lý giao thức cho giao thức web+coffee hay không. Nếu bạn đồng ý, PWA sẽ mở ra và hiển thị loại 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 Register protocol handler (Đă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ự, thao tác này sẽ hiển thị một lời nhắc, nhưng sau đó sẽ mở PWA trong một thẻ, chứ không phải trong cửa sổ trình duyệt.
  4. Gửi cho mình một tin nhắn trên một ứng dụng dành riêng cho nền tảng như Skype trên Windows bằng một đường liên kết như <a href="web+coffee://americano">Americano</a> rồi nhấp vào đường liên kết đó. Tương tự, thao tác này sẽ mở PWA đã cài đặt.

Bản minh hoạ trình xử lý giao thức URL với 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 an toàn, nên việc 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ý không được hiển thị trên web theo bất kỳ cách nào, vì vậy, bạn không thể sử dụng danh sách này làm vectơ vân tay.

Số lần đ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 do người dùng khởi tạo nhưng có tính 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 trong ngữ cảnh duyệt web cấp cao nhất, nhưng không được dùng làm URL của iframe.

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

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

Trong lần chạy PWA đầu tiên do một giao thức được gọi, người dùng sẽ thấy một hộp thoại cấp quyền. Hộp thoại này sẽ hiển thị 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ý trình xử lý đó. 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".

Phản hồi

Nhóm Chromium muốn biết trải nghiệm của bạn về việc đăng ký trình xử lý giao thức URL cho PWA.

Giới thiệu cho chúng tôi về thiết kế API

API có hoạt động như 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 không? 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ó 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 tính năng đăng ký trình xử lý giao thức URL cho PWA 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 đó.

Hãy chia sẻ cách bạn dự định sử dụng công cụ này trên luồng thảo luận Discourse của WICG. Gửi một Tweet đến@ChromiumDev bằng hashtag #ProtocolHandler và cho chúng tôi biết bạn đang sử dụng ở đâu và như thế nào.

Lời cảm ơn

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