Rejestracja modułu obsługi protokołu URL na potrzeby PWA

Pozwól zainstalowanym aplikacjom PWA obsługiwać linki używające określonego protokołu, aby zapewnić większą integrację.

Podstawowe informacje na temat schematów (protokołów)

Identyfikator URI to krótka sekwencja znaków identyfikujących zasób abstrakcyjny lub fizyczny. Każdy identyfikator URI zaczyna się od nazwy schematu, która odnosi się do specyfikacji przypisywania identyfikatorów w ramach tego schematu. Dlatego składnia identyfikatorów URI jest sfederowanym i rozszerzonym systemem nazw, w którym specyfikacja każdego schematu może jeszcze bardziej ograniczyć składnię i semantykę identyfikatorów korzystających z tego schematu. Schematy są też nazywane protokołami. Poniżej znajdziesz przykłady schematów.

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

Termin Jednolity lokalizator zasobów (URL) odnosi się do podzbioru identyfikatorów URI, które oprócz identyfikacji zasobu umożliwiają jego lokalizację przez opisanie jego podstawowego mechanizmu dostępu (np. lokalizacji sieciowej).

Informacje o metodzie registerProtocolHandler()

Metoda NavigatorregisterProtocolHandler(), która zawiera tylko bezpieczną treść, pozwala witrynom rejestrować ich zdolność do otwierania lub obsługi określonych schematów adresów URL. Dlatego strony muszą wywoływać metodę w ten sposób: navigator.registerProtocolHandler(scheme, url). Te 2 parametry są definiowane w ten sposób:

  • scheme: ciąg znaków zawierający protokół, który ma obsługiwać witryna.
  • url: ciąg znaków zawierający adres URL modułu obsługi. Ten adres URL musi zawierać ciąg %s – zmienną, która zostanie zastąpiona rozpoznawanym adresem URL ze zmianą znaczenia.

Schemat musi być jednym z schematów zabezpieczających (np. mailto, bitcoin lub magnet) lub zaczynać się od ciągu web+, po którym następuje co najmniej 1 mała litera ASCII po prefiksie web+, np. web+coffee.

Aby to wyjaśnić, oto konkretny przykład przepływu:

  1. Użytkownik odwiedza witrynę pod adresem https://coffeeshop.example.com/, która wykonuje to wywołanie: navigator.registerProtocolHandler('web+coffee', 'coffee?type=%s').
  2. Później użytkownik, otwierając https://randomsite.example.com/, klika link, np. <a href="web+coffee:latte-macchiato">All about latte macchiato</a>.
  3. Spowoduje to otwarcie tego adresu URL w przeglądarce: https://coffeeshop.example.com/coffee?type=web%2Bcoffee%3A%2F%2Flatte-macchiato. Zdekodowany z adresem URL ciąg wyszukiwania otrzymuje wartość ?type=web+coffee://latte-macchiato.

Na czym polega obsługa protokołów

Obecny mechanizm rejestracji modułów obsługi protokołu URL na potrzeby aplikacji PWA umożliwia oferowanie rejestracji modułów obsługi protokołów w ramach instalacji PWA za pomocą pliku manifestu. Gdy użytkownik zarejestruje progresywną aplikację internetową jako moduł obsługi protokołu, gdy w przeglądarce albo aplikacji na danej platformie kliknie hiperlink o określonym schemacie, np. mailto, bitcoin lub web+music, otworzy się i otrzyma jej adres URL. Warto zauważyć, że zarówno proponowana rejestracja na podstawie pliku manifestu, jak i tradycyjna rejestracja registerProtocolHandler() odgrywają w praktyce bardzo podobne role, zapewniając jednocześnie możliwość uzupełniania się doświadczeń użytkownika:

  • Podobieństwa obejmują wymagania dotyczące listy schematów, które mogą być rejestrowane, oraz nazwy i formatu parametrów itp.
  • Różnice w rejestracji na podstawie pliku manifestu są nieznaczne, ale mogą być pomocne, jeśli chcemy zwiększyć wygodę użytkowników PWA. Na przykład rejestracja aplikacji PWA na podstawie pliku manifestu nie może wymagać od użytkownika dodatkowego działania poza inicjowaną przez użytkownika instalacją PWA.

Przykłady zastosowań

  • W edytorze tekstu PWA użytkownik widzi link do prezentacji takiej jak web+presentations://deck2378465. Gdy użytkownik kliknie link, aplikacja PWA prezentacji automatycznie otworzy się we właściwym zakresie i wyświetli pokaz slajdów.
  • W aplikacji do obsługi czatu na konkretnej platformie użytkownik czatu otrzyma link do adresu URL magnet. Po kliknięciu tego linku uruchamia się i rozpoczyna pobieranie zainstalowanej torrentu PWA.
  • Użytkownik ma zainstalowaną aplikację PWA strumieniowania muzyki. Gdy znajomy udostępni link do utworu, np. web+music://songid=1234&time=0:13, a użytkownik go kliknie, aplikacja PWA strumieniowa muzyki uruchomi się automatycznie w osobnym oknie.

Jak korzystać z rejestracji modułu obsługi protokołu URL na potrzeby aplikacji PWA

Interfejs API do rejestracji modułu obsługi protokołu URL jest dokładnie modelowany na podstawie navigator.registerProtocolHandler(). Tym razem informacje są przekazywane deklaratywnie przez plik manifestu aplikacji internetowej w nowej właściwości o nazwie "protocol_handlers", która pobiera tablicę obiektów z 2 wymaganymi kluczami "protocol" i "url". Fragment kodu poniżej pokazuje, jak zarejestrować web+tea i web+coffee. Wartości to ciągi tekstowe zawierające adres URL modułu obsługi z wymaganą zmienną %s dla adresu URL ze zmianą znaczenia.

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

Wiele aplikacji rejestrujących się przy użyciu tego samego protokołu

Jeśli wiele aplikacji rejestruje się jako moduły obsługi tego samego schematu, np. w ramach protokołu mailto, system operacyjny wyświetli użytkownikowi selektor i pozwoli mu zdecydować, którego z zarejestrowanych modułów obsługi ma użyć.

Ta sama aplikacja jest zarejestrowana w wielu protokołach

Ta sama aplikacja może zarejestrować się dla wielu protokołów, jak widać w przykładowym kodzie powyżej.

Aktualizacje aplikacji i rejestracja modułów obsługi

Rejestracje modułów obsługi są synchronizowane z najnowszą wersją pliku manifestu przekazaną przez aplikację. Istnieją 2 sytuacje:

  • Aktualizacja, która dodaje nowe moduły obsługi, aktywuje rejestrację modułu obsługi (niezależnie od instalacji aplikacji).
  • Aktualizacja, która usuwa moduły obsługi, powoduje wyrejestrowanie modułu obsługi (niezależnie od odinstalowywania aplikacji).

Debugowanie modułów obsługi protokołów w Narzędziach deweloperskich

W panelu Aplikacja > Plik manifestu przejdź do sekcji Moduły obsługi protokołów. Tutaj możesz wyświetlić i przetestować wszystkie dostępne protokoły.

Zainstaluj na przykład tę demonstracyjną PWA. Aby otworzyć stronę kawy w PWA, w sekcji Obsługa protokołów wpisz „americano” i kliknij Test Protocol.

Moduły obsługi protokołów w panelu pliku manifestu

Wersja demonstracyjna

Zobacz prezentację rejestracji modułu obsługi protokołu URL na potrzeby aplikacji PWA w Glitchu.

  1. Otwórz stronę https://protocol-handler.glitch.me/, zainstaluj PWA i zainstaluj aplikację ponownie. Przeglądarka zarejestrowała PWA jako moduł obsługi protokołu web+coffee w systemie operacyjnym.
  2. W oknie zainstalowanej aplikacji PWA kliknij link https://protocol-handler-link.glitch.me/. Otworzy się nowa karta przeglądarki z 3 linkami. Kliknij pierwsze lub drugie (latte macchiato lub americano). W przeglądarce pojawi się pytanie z pytaniem, czy aplikacja jest modułem obsługi protokołu web+coffee. Jeśli się zgodzisz, otworzy się PWA i wyświetli się wybrana kawiarnia.
  3. Aby porównać go z tradycyjnym procesem, który korzysta z navigator.registerProtocolHandler(), kliknij w aplikacji PWA przycisk Zarejestruj moduł obsługi protokołu. Następnie na karcie przeglądarki kliknij trzeci link (czaj). Podobnie jest wyświetlana prośba, ale po otwarciu PWA na karcie, a nie w oknie przeglądarki.
  4. Wyślij do siebie wiadomość w aplikacji na danej platformie, np. Skype w systemie Windows, z linkiem takim jak <a href="web+coffee://americano">Americano</a>, a następnie go kliknij. Powinna otworzyć się też zainstalowana aplikacja PWA.

Prezentacja obsługi protokołu URL z kartą przeglądarki z linkami po lewej stronie i osobnym oknem PWA po prawej.

Bezpieczeństwo

Instalacja PWA wymaga bezpiecznego kontekstu, dlatego obsługa protokołu dziedziczy to ograniczenie. Lista zarejestrowanych modułów obsługi protokołów nie jest w żaden sposób dostępna w internecie, więc nie można jej używać jako wektora odcisku cyfrowego.

Próby nawigacji niezainicjowane przez użytkownika

Próby nawigacji, które nie są inicjowane przez użytkownika, ale są zautomatyzowane, nie mogą otwierać aplikacji. Niestandardowy adres URL protokołu może być używany tylko w kontekstach przeglądania najwyższego poziomu, a nie na przykład jako adres URL elementu iframe.

Lista dozwolonych protokołów

Podobnie jak w registerProtocolHandler(), istnieje lista dozwolonych protokołów, które mogą obsługiwać aplikacje.

Przy pierwszym uruchomieniu PWA z powodu wywołanego protokołu użytkownik zobaczy okno uprawnień. W tym oknie wyświetli się nazwa aplikacji i pochodzenie aplikacji. Zapyta użytkownika, czy aplikacja może obsługiwać linki z protokołu. Jeśli użytkownik odrzuci okno uprawnień, zarejestrowany moduł obsługi protokołu zostanie zignorowany przez system operacyjny. Aby wyrejestrować moduł obsługi protokołów, użytkownik musi odinstalować aplikację PWA, która ją zarejestrowała. Jeśli użytkownik wybierze opcję „Zapamiętaj mój wybór” i oznaczy „Disallow”, przeglądarka wyrejestruje moduł obsługi protokołu.

Prześlij opinię

Zespół Chromium chce poznać Twoją opinię na temat rejestracji modułów obsługi protokołu URL w przypadku aplikacji PWA.

Opowiedz nam o projekcie interfejsu API

Czy interfejs API nie działa zgodnie z oczekiwaniami? A może brakuje metod lub właściwości, które potrzebujesz do realizacji swojego pomysłu? Masz pytanie lub komentarz na temat modelu bezpieczeństwa? Zgłoś problem ze specyfikacją w odpowiednim repozytorium GitHub lub dodaj swoje uwagi na temat istniejącego problemu.

Zgłoś problem z implementacją

Czy wystąpił błąd w implementacji Chromium? A może implementacja różni się od specyfikacji? Zgłoś błąd na new.crbug.com. Podaj jak najwięcej szczegółów i proste instrukcje dotyczące odtwarzania oraz wpisz UI>Browser>WebAppInstalls w polu Komponenty. Usterki to świetny sposób na udostępnianie szybkich i łatwych replik.

Pokaż obsługę interfejsu API

Czy planujesz użyć rejestracji modułu obsługi protokołu URL na potrzeby aplikacji PWA? Twoje publiczne wsparcie pomaga zespołowi Chromium w określaniu priorytetów funkcji i pokazuje innym dostawcom przeglądarek, jak ważne jest ich wsparcie.

W wątku WICG Discourse napisz, jak zamierzasz korzystać z tego narzędzia. Wyślij tweeta na adres @ChromiumDev, używając hashtagu #ProtocolHandler, i daj nam znać, gdzie i jak tego używasz.

Podziękowania

Rejestracja modułu obsługi protokołu URL na potrzeby aplikacji PWA została wdrożona i wskazana przez Fabio Rocha, Diego Gonzáleza, Connor Moody i Samuel Tang z zespołu Microsoft Edge. Ten artykuł napisali Joe Medley i Fabio Rocha. Baner powitalny od JJ Ying w serii Unsplash.