Esta página foi traduzida pela API Cloud Translation.

Extensões de escopo de apps da Web

No Chrome 122, é possível se inscrever no teste de origem do scope_extensions membro do manifesto do app, que permite sites que controlam vários subdomínios e os principais domínios no nível do Google sejam apresentados como um único aplicativo da Web. Este documento explica por que a equipe do Chrome estão apresentando esse recurso e quando você poderá usá-lo.

Demián Renzulli

Thomas Steiner

Visão geral

Alguns aplicativos da Web têm várias origins, para exemplo, example.com como app principal e depois space_1.example.com, ..., space_n.example.com, às vezes combinado com special-example.com, e subexperiências, tudo sob o teto do aplicativo principal. Esse tipo de site tem implicações no contexto dos Progressive Web Apps. As limitações incluem a impossibilidade de compartilhar service workers, qualquer tipo de dispositivo, armazenamento local e permissões entre origens. Além disso, a navegação de origem cruzada Um PWA independente mostra uma interface de janela (barra "fora do escopo") indicando que o usuário saiu da experiência PWA. Você pode aprender a trabalhar com alguns esses problemas nos artigos Progressive Web Apps em sites de várias origens e Como criar vários Progressive Web Apps no mesmo domínio.

A API Scope Extensions permite que os apps da Web superem alguns dos desafios que as política de mesma origem nesse tipo de arquitetura de site. Ele permite que os apps da Web estendam scope para outras origens para ajudar a alcançar uma experiência unificada, considerando o acordo entre o a origem primária e as origens associadas.

Metas

O principal objetivo da API Scope Extensions é permitir que sites que controlem vários subdomínios e domínios de nível superior se comportarão como um aplicativo da Web contíguo no que se refere à IU do app da Web e à captura de links. Por exemplo, permitir que o site A example.com que abrange example.com.co.uk e support.example.com se comporta como o máximo possível como um único aplicativo da Web.

Diagrama mostrando um PWA principal e subexperiências associadas.

As extensões de escopo permitem que os PWAs de várias origens se comportem como um app da Web contíguo quando: se trata de interface de app da Web.

Na prática, isso se traduz em duas metas mais específicas:

Navegação entre origens:permite que os usuários naveguem em origens associadas. sem interromper a experiência do usuário invocando a interface da janela informando ao que está migrando do PWA.
Captura de link de origem cruzada:permite que os apps da Web capturem a navegação dos usuários para aos sites a que são afiliadas.

Navegação de origem cruzada no escopo

Por padrão, quando os usuários navegam pelas origens em um PWA independente, eles mostrou uma interface de janela indicando que eles estão sendo movidos para fora da experiência do PWA. No Chrome, essa interface consiste em "fora do escopo" que contém o URL de a nova origem. Isso é prejudicial para a experiência do usuário, porque ele espera continuam navegando no mesmo contexto do aplicativo, mas podem perceber estão sendo retirados dele.

Fora da barra de escopo na parte de cima de um PWA independente.

"Fora do escopo" barra mostrada no Chrome quando os usuários navegam em origens diferentes em um PWA independente.

Com as extensões de escopo, a interface da janela não será mostrada quando os usuários navegarem para qualquer das origens associadas para que o PWA seja apresentado como uma experiência unificada.

Captura de links de origem cruzada

Captura de links refere-se à capacidade de um aplicativo para capturar links dentro de sua do projeto. A forma como isso é implementado varia de acordo com os navegadores e com o sistema operacional sistemas. No Chrome no ChromeOS, por exemplo, links no escopo de um Por padrão, o PWA abre uma guia do navegador com uma indicação na barra de endereço que existe um aplicativo que é capaz de lidar com esses links, permitindo que o usuário ativar a captura automática de links a partir desse ponto.

Solicitação da Omnibar para um PWA instalado.

Fragmento da barra de endereço do Chrome de uma guia no ChromeOS mostrando uma indicação visual que o link pode ser processado por um PWA e a opção de lembrar essa decisão.

Se um usuário clicar em um link que está fora do escopo do PWA (incluindo links para subdomínios ou domínios de nível superior), eles não serão reconhecidos como pertencentes a ele. Por exemplo, links serão abertos em uma guia do navegador sem qualquer indicação para o usuário de que há um aplicativo capaz de lidar com o link. Escopo A API Extensions permite ampliar o escopo do PWA para que o aplicativo e origens são tratadas como links no escopo.

Implementação

A implementação de extensões de escopo requer o estabelecimento da relação entre os a origem principal e as origens associadas.

Declarar a lista de origens associadas

Adicione um membro do manifesto de app da Web scope_extensions à origem principal do PWA para permitir que o app da Web estenda seu escopo a outras origens.

Manifesto do app da Web (https://example.com)

{
  "name": "Example",
  "display": "standalone",
  "start_url": "/index.html",
  "scope_extensions": [
    { "origin": "https://*.example.com" },
    { "origin": "https://example.co.uk" },
    { "origin": "https://*.example.co.uk" }
  ]
}

Confirmar associações

Cada uma das origens listadas confirma a associação com o aplicativo da Web usando um /.well-known/web-app-origin-association. Esse arquivo precisa receber o nome web-app-origin-association e ser veiculada nesse local exato, conforme ele é um URI conhecido.

/.well-known/web-app-origin-association (origem associada)

{
  "web_apps": [{ "web_app_identity": "https://example.com" }]
}

Demonstração

A demonstração consiste em dois sites:

PWA principal: o PWA real que declara a lista de origens associadas usando o membro scope_extensions; no manifesto do app da Web.
Origem no escopo estendido: uma origem fora do escopo do PWA principal, mas associada a ela depois de ser listada pelo PWA principal como uma origem associada e confirmando a relação por meio de suas arquivo web-app-origin-association.

Para realizar os testes a seguir, é necessário ativar o Sinalização about://flags/#enable-desktop-pwas-scope-extensions (disponível a partir de Chrome v115 ou mais recente).

Testar a navegação entre origens

Como pré-condição para esses testes, abra o PWA principal em um navegador, instale-o como um PWA e abri-lo para executá-lo no modo autônomo. O PWA contém links para um origem em escopo estendido e a uma a origem não está no escopo estendido.

Janela principal do PWA com links de escopo estendido e no escopo.

Demonstração de PWA com links para a origem no escopo estendido e na origem não estendida do projeto.

Navegação padrão entre origens (não está em escopo estendido)

Clique no link para a origem não está no escopo estendido. dentro do PWA em tela cheia.
Como resultado, a navegação acontece e a barra fora do escopo é exibida.

Janela principal do PWA com barra fora de escopo depois de clicar no link.

"Fora do escopo" mostrada por padrão para uma navegação de origem cruzada de um PWA modo independente.

Navegação de origem cruzada com extensões de escopo (em escopo estendido)

Volte para a página inicial do PWA.
Clique no link para a origem não está em escopo estendido.
Por padrão, um status "fora do escopo" deve ser mostrada, mas por causa do campo Escopo a associação de extensões, não é.

Janela principal do PWA sem barra fora de escopo depois de clicar no link de escopo estendido.

"Fora do escopo" barra não mostrada na navegação de origem cruzada após a associação da origem foi feita com as extensões de escopo.

Testar a captura de links de origem cruzada

Abra e instale o PWA principal em um Dispositivo ChromeOS.
Clique no link a seguir: origem associada.
O link é aberto em uma nova guia do navegador e uma solicitação é exibida para abri-lo em o PWA instalado.

Solicitação da Omnibar para um PWA instalado com escopo estendido.

Clicar em um link para a origem associada de um PWA abre o link em uma nova guia e mostra uma mensagem "Abrir no app" ícone que permite ao usuário ativar a vinculação automática capturando.

Teste de origem

Se quiser testar essa API em seu aplicativo em campo com usuários, você pode fazer isso com uma teste de origem. Com eles, você testa recursos experimentais com os usuários ao adquirir um token de teste vinculado ao seu domínio. Depois disso, é possível implantar o app e esperam que ela funcione em um navegador que suporte o recurso que você está testando (neste caso, ela está disponível no Chrome 121 a 126). Para obter seu próprio token para realizar um teste de origem, preencha formulário de inscrição.

Feedback

A equipe do Chrome quer receber feedback sobre a utilidade dessa API. Para ajudar a equipe a fazer essa API evoluir com feedback sobre a utilidade dela e novos casos de uso não abordados na versão atual, abra uma Problema no GitHub (link em inglês).

Outros recursos

Agradecimentos

Um agradecimento especial à equipe por trás do desenvolvimento dessa API. Extensões de escopo foi especificado por Alan Cutter e Lu Huang, com informações de Matt Giuca. A API foi implementada pela Alan Cutter, do Google Chrome e Hassan Talat, Kristin Lee e Lu Huang do Microsoft Edge.