Permita que os PWAs instalados processem links que usam um protocolo específico para uma experiência mais integrada.
Contexto sobre os esquemas (também conhecidos como protocolos)
Um Identificador de Recurso Uniforme (URI) é uma sequência compacta de caracteres que identifica um recursos abstratos ou físicos. Cada URI começa com um esquema que se refere a uma especificação do e atribuição de identificadores dentro desse esquema. Dessa forma, a sintaxe do URI é um conjunto em que a especificação de cada esquema pode restringir ainda mais a sintaxe e a semântica do identificadores usando esse esquema. Os esquemas também são conhecidos como protocolos. Confira alguns exemplos esquemas abaixo.
tel:+1-816-555-1212
mailto:Jane.Doe@example.com
news:comp.infosystems.www.servers.unix
https://web.dev/
O termo localizador universal de recursos (URL, na sigla em inglês) se refere ao subconjunto de URIs que, além dos identificar um recurso, fornecer um meio de localizá-lo descrevendo o acesso primário mecanismo de atenção (por exemplo, o local da rede).
Contexto sobre o método registerProtocolHandler()
O método Navigator, somente conteúdo seguro
registerProtocolHandler()
permite que os sites registrem a capacidade de abrir ou processar esquemas de URL específicos. Portanto, os sites precisam
chame o método da seguinte forma: navigator.registerProtocolHandler(scheme, url). Os dois parâmetros são
definido da seguinte maneira:
scheme: uma string que contém o protocolo que o site quer gerenciar.url: uma string que contém o URL do gerenciador. Esse URL precisa incluir%scomo marcador de posição que será substituído pelo URL com escape a ser tratado.
O esquema deve ser um dos
esquemas na lista segura
(por exemplo, mailto, bitcoin ou magnet) ou começar com web+, seguido por pelo menos um ou
mais letras ASCII minúsculas após o prefixo web+, por exemplo, web+coffee.
Para deixar isso mais claro, veja um exemplo concreto do fluxo:
- O usuário visita um site em
https://coffeeshop.example.com/que faz a seguinte chamada:navigator.registerProtocolHandler('web+coffee', 'coffee?type=%s'). - Posteriormente, ao visitar
https://randomsite.example.com/, o usuário clica em um link. como<a href="web+coffee:latte-macchiato">All about latte macchiato</a>. - Isso fará com que o navegador navegue até o seguinte URL:
https://coffeeshop.example.com/coffee?type=web%2Bcoffee%3A%2F%2Flatte-macchiato: A pesquisa decodificada pelo URL, lê?type=web+coffee://latte-macchiato.
Sobre o que é o tratamento de protocolos
O atual mecanismo de registro do gerenciador de protocolos de URL para PWAs é sobre a oferta do gerenciador de protocolos
como parte de uma instalação do PWA pelo manifesto. Depois de registrar um PWA
gerenciador de protocolos, quando um usuário clica em um hiperlink com um esquema específico, como mailto.
bitcoin ou web+music em um navegador ou app específico da plataforma, o PWA registrado será aberto
e receber o URL. É importante observar que o registro proposto com base no manifesto e
os registerProtocolHandler() tradicionais desempenham papéis muito semelhantes na prática,
permitindo experiências complementares para os usuários:
- As semelhanças incluem requisitos em torno da lista de esquemas que podem ser registrados, e o nome e formato dos parâmetros etc.
- As diferenças no registro com base em manifesto são sutis, mas podem ser úteis para melhorar para usuários de PWA. Por exemplo, o registro de PWA baseado em manifesto pode não exigir uma outra ação do usuário, além da instalação do PWA iniciada pelo usuário.
Casos de uso
- Em um PWA de processamento de texto, o usuário de um documento encontra um link para uma apresentação, como
web+presentations://deck2378465: Quando o usuário clica no link, o PWA da apresentação abre automaticamente no escopo correto e mostra a apresentação de slides. - Em um app de chat específico da plataforma, o usuário em uma mensagem de chat recebe um link para um URL
magnet. Ao clicar no link, um PWA de torrent instalado é iniciado e o download é iniciado. - O usuário tem um PWA de streaming de música instalado. Quando um amigo compartilha o link de uma música como
web+music://songid=1234&time=0:13e o usuário clicar nele, o PWA do streaming de música será iniciar automaticamente em uma janela independente.
Como usar o registro do gerenciador de protocolo de URL para PWAs
A API para registro do manipulador de protocolo de URL é semelhante
navigator.registerProtocolHandler(): Desta vez, as informações são passadas de maneira declarativa por meio de
o manifesto do app da Web em uma nova propriedade com o nome "protocol_handlers", que usa uma matriz de
objetos com as duas chaves obrigatórias "protocol" e "url". O snippet de código abaixo mostra como
registrar web+tea e web+coffee. Os valores são strings que contêm o URL do gerenciador
o marcador %s obrigatório para o URL com escape.
{
"protocol_handlers": [
{
"protocol": "web+tea",
"url": "/tea?type=%s"
},
{
"protocol": "web+coffee",
"url": "/coffee?type=%s"
}
]
}
Vários apps estão registrados para o mesmo protocolo
Se vários aplicativos se registrarem como manipuladores para o mesmo esquema, por exemplo, o
mailto, o sistema operacional mostrará ao usuário um seletor e permitirá que ele decida qual dos
gerenciadores registrados para uso.
O mesmo app se registra para vários protocolos
O mesmo app pode se registrar para vários protocolos, como mostra o exemplo de código acima.
Atualizações de apps e registro do gerenciador
Os registros do gerenciador são sincronizados com a versão mais recente do manifesto fornecida pelo aplicativo. há dois casos:
- Uma atualização que adiciona novos gerenciadores aciona o registro do gerenciador (separado da instalação do app).
- Uma atualização que remove os gerenciadores aciona o cancelamento do registro do gerenciador (separado do app desinstalação).
Depuração do gerenciador de protocolo no DevTools
Navegue até a seção Manipuladores de protocolo em Aplicativo > Painel Manifest. Você pode confira e teste todos os protocolos disponíveis aqui.
Por exemplo, instale este PWA de demonstração. Na Seção Gerenciadores de protocolo, tipo "americano" e clique em Protocolo de teste para abrir a página do café. no PWA.
Demonstração
Confira uma demonstração do registro do gerenciador de protocolos de URL para PWAs no Glitch.
- Acesse https://protocol-handler.glitch.me/, instale o
PWA e recarregue o app após a instalação. O navegador registrou o PWA como um
gerenciador do protocolo
web+coffeecom o sistema operacional. - Na janela do PWA instalado, clique no link.
https://protocol-handler-link.glitch.me/. Isso vai
abra uma nova guia do navegador com três links. Clique no primeiro ou no segundo (latte macchiato ou
americano). O navegador vai mostrar uma solicitação e perguntar se o app é um
gerenciador de protocolo para o protocolo
web+coffee. Se você concordar, o PWA será aberto e mostrará a café selecionado. - Para comparar com o fluxo tradicional que usa
navigator.registerProtocolHandler(), clique em o botão Registrar gerenciador de protocolo no PWA. Na guia do navegador, clique no terceiro link (chai). Ele também mostrará um prompt, mas abrirá o PWA em uma guia, não em uma janela do navegador. - Envie uma mensagem para si mesmo em um aplicativo específico da plataforma, como o Skype no Windows com um link como
<a href="web+coffee://americano">Americano</a>e clique nele. Da mesma forma, ela deve abrir PWA instalado.
Considerações sobre segurança
Como a instalação do PWA exige que o contexto seja seguro, o tratamento do protocolo herda esse restrição. A lista de gerenciadores de protocolos registrados não fica exposta na Web de forma alguma. Por isso, ela não pode ser usado como vetor de técnicas de impressão digital.
Tentativas de navegação não iniciadas pelo usuário
As tentativas de navegação não iniciadas pelo usuário, mas que são programáticas, podem não abrir. apps. O URL do protocolo personalizado só pode ser usado em contextos de navegação de nível superior, mas não, por exemplo, como o URL de um iframe.
Lista de permissões de protocolos
Assim como no registerProtocolHandler(), há uma lista de permissões de protocolos que os apps podem registrar.
de lidar.
Solicitação de consentimento
Na primeira inicialização do PWA por causa de um protocolo invocado, o usuário recebe uma caixa de diálogo de permissão. Essa caixa de diálogo vai mostrar o nome e a origem do app e perguntar ao usuário se ele o app tem permissão para processar links do protocolo. Se um usuário rejeitar a caixa de diálogo de permissão, o gerenciador de protocolo registrado será ignorado pelo sistema operacional. Para cancelar o registro do protocolo o usuário precisará desinstalar o PWA que o registrou. O navegador também vai cancelar o registro o manipulador de protocolo se o usuário selecionar "Lembrar minha escolha" e seleciona "Disallow".
Feedback
A equipe do Chromium quer saber sobre suas experiências com o registro do gerenciador de protocolos de URL em PWAs.
Fale sobre o design da API
Existe algo na API que não funciona como você esperava? Ou há métodos faltando ou propriedades de que precisa para implementar sua ideia? Tem uma pergunta ou comentário sobre a segurança modelo? Registre um problema de especificação no repositório do GitHub correspondente ou adicione sua opinião a uma problema.
Informar um problema com a implementação
Você encontrou um bug na implementação do Chromium? Ou a implementação é diferente das especificações?
Registre um bug em new.crbug.com. Não deixe de incluir
o máximo de detalhes possível,
instruções simples para reprodução e insira UI>Browser>WebAppInstalls no bloco Components
caixa O Glitch é ótimo para compartilhar repetições rápidas e fáceis.
Mostrar suporte à API
Você planeja usar o registro do gerenciador de protocolos de URL para PWAs? Seu apoio público ajuda os A equipe do Chromium prioriza recursos e mostra a outros fornecedores de navegadores como é fundamental oferecer suporte para resolvê-los com rapidez.
Compartilhe como você planeja usá-la na conversa sobre a WCG (em inglês). Enviar um tweet para
@ChromiumDev usando a hashtag
#ProtocolHandler
e informe onde e como você o utiliza.
Links úteis
Agradecimentos
O registro do gerenciador de protocolo de URL para PWAs foi implementado e especificado por Fábio Rocha, Diego González, Connor Moody Samuel Tang, da equipe do Microsoft Edge. Este artigo foi revisada por Joe Medley e Fabio Rocha. Imagem principal de JJ Ying no Unsplash.