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

Cho phép PWA đã cài đặt xử lý những đườ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.

Thomas Steiner

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

Mã nhận dạng tài nguyên đồng nhất (URI) là một chuỗi ký tự ngắn gọn giúp xác định một tài nguyên vật lý hoặc trừu tượng. Mỗi URI bắt đầu bằng một tên lược đồ đề cập đến thông số kỹ thuật cho gán giá trị nhận dạng trong giao thức đó. Do đó, cú pháp URI là một cú pháp liên kết và có thể mở rộng hệ thống đặt tên trong đó thông số kỹ thuật của từng lược đồ có thể hạn chế hơn nữa cú pháp và ngữ nghĩa của bằ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ề 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ữ Hệ thống định vị tài nguyên thống nhất (URL) đề cập đến tập hợp con các URI, ngoài việc xác định tài nguyên, cung cấp phương tiện để xác định tài nguyên bằng cách mô tả quyền truy cập chính của tài nguyên đó cơ chế đó (ví dụ: vị trí mạng của cơ chế đó).

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 giao thứ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 thông số này là đượ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 chứa %s làm 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 chương trình 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 thêm chữ cái ASCII viết thường sau tiền tố web+, ví dụ: web+coffee.

Để làm cho điều này rõ ràng hơn, sau đây là một ví dụ cụ thể về luồng:

  1. Người dùng truy cập vào một 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 đó, 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 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 điều hướng đến URL sau: https://coffeeshop.example.com/coffee?type=web%2Bcoffee%3A%2F%2Flatte-macchiato. Tìm kiếm chuỗi được giải mã bằng URL rồi đọc ?type=web+coffee://latte-macchiato.

Giới thiệu về xử lý giao thức

Cơ chế đăng ký trình xử lý giao thức URL cho PWA hiện tại là nhằm cung cấp trình xử lý giao thức đăng ký trong quá trình cài đặt PWA thông qua tệp kê khai. Sau khi đăng ký PWA làm một 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ể 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 được URL. Điều quan trọng cần lưu ý là cả đăng ký dựa trên tệp kê khai và registerProtocolHandler() truyền thống đóng vai trò rất tương tự trong thực tế, trong khi vẫn giúp mang lại trải nghiệm người dùng bổ sung:

  • Những điểm tương đồng bao gồm các yêu cầu về danh sách các chương trình được phép đăng ký và việc tên và định dạng của thông số, v.v.
  • Có khác biệt nhỏ trong việc đăng ký dựa trên tệp kê khai, nhưng có thể hữu ích trong việc nâng cao cho người dùng PWA. Ví dụ: Quy trình đăng ký PWA dựa trên tệp kê khai có thể không yêu cầu hành động bổ sung của người dùng ngoài việc cài đặt PWA do người dùng thực hiện.

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

  • Trong PWA xử lý văn bản, người dùng trong tài liệu 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 bản trình bày tự động mở trong đúng phạm vi và hiển thị bản trình bày.
  • Trong một ứng dụng nhắn tin 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. Khi bạn 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 ứng dụng web tiến bộ (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 sẽ tự động chạy trong một cửa sổ độc lập.

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

API để đăng ký trình xử lý giao thức URL được lập mô hình chặt chẽ theo navigator.registerProtocolHandler(). Chỉ cho đến thời điểm này, thông tin được chuyển một cách rõ rà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ẽ lấy một mảng các đối tượng có hai khoá bắt buộc là "protocol" và "url". Đoạn mã dưới đây cho biết cách đăng ký web+tea và web+coffee. Các giá trị 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 lược đồ, ví dụ: mailto, 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 các trình xử lý đã đăng ký để 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.

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

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ó là hai trường hợp:

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

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 Protocol Handlers (Trình xử lý giao thức) qua Application (Ứng dụng) > Ngăn Manifest (Tệp kê khai). Bạn có thể xem và thử nghiệm tất cả các giao thức có sẵn tại đây.

Ví dụ: cài đặt PWA minh hoạ này. Trong Phần Protocol Handlers (Trình xử lý giao thức), nhập "americano" và nhấp vào Test 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/, rồi 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 một trình xử lý cho giao thức web+coffee cùng 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 đầu tiên hoặc thứ hai (latte macchiato hoặc Americano). Lúc này, trình duyệt sẽ hiển thị lời nhắc và hỏi xem bạn có ổn với việc ứng dụng là một trình xử lý giao thức cho giao thức web+coffee. Nếu bạn đồng ý, PWA sẽ mở và hiển thị đã chọn cà phê.
  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 tab trình duyệt, hãy nhấp vào liên kết thứ ba (chai). Tương tự như vậy, ứng dụng sẽ hiện một 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. Gửi tin nhắn cho chính bạ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 liên kết như <a href="web+coffee://americano">Americano</a> rồi nhấp vào đó. 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 trong 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 bối cảnh phải bảo mật, nên hoạt động xử lý giao thức sẽ kế thừa bối cảnh này quy tắc ràng buộc. Danh sách các trình xử lý giao thức đã đăng ký không được tiết lộ trên web theo bất kỳ cách nào do đó Không thể dùng làm vectơ tạo vân tay số.

Số lần điều hướng không phải 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 của chúng tôi. Bạn chỉ có thể sử dụng URL giao thức tùy chỉnh trong ngữ cảnh duyệt web cấp cao nhất, nhưng không được sử dụng, ví dụ: dưới dạng URL của iframe.

Danh sách giao thứ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ý.

Vào 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 một hộp thoại cấp quyền. Hộp thoại này sẽ hiện 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 phép xử lý các liên kết từ giao thức. Nếu người dùng từ chối hộp thoại cấp quyền, trình xử lý giao thức đã đăng ký sẽ bị hệ điều hành bỏ qua. Để huỷ đăng ký giao thức trình xử lý, người dùng cần gỡ cài đặt PWA đã đăng ký. 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" rồi chọn "Không cho phép".

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 PWA.

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 quy trình đăng ký trình xử lý giao thức URL cho PWA 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 thấy tầm quan trọng của việc hỗ trợ chúng.

Chia sẻ cách bạn dự định sử dụng tài khoản này trên chuỗi bài thuyết trình về WICG. Gửi tweet tới @ChromiumDev bằng cách sử dụng hashtag #ProtocolHandler đồng thời cho chúng tôi biết bạn đang sử dụng ở đâu và như thế nào.

Xác nhận

Hoạt động đă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 Moody và Samuel Tang thuộc nhóm Microsoft Edge. Bài viết này được đánh giá bởi Joe Medley và Fabio Rocha. Hình ảnh chính của Lời bài hát của [Tên người] trên trang Unsplash.