Compartilhar via

Criar PWAs para a barra lateral no Microsoft Edge

  • Artigo

As Aplicações Web Progressivas (PWAs) podem optar ativamente por ser afixadas na barra lateral no Microsoft Edge.

A barra lateral no Microsoft Edge permite que os utilizadores acedam facilmente a sites e utilitários populares juntamente com os respetivos separadores do browser. O conteúdo na barra lateral aumenta a tarefa principal do utilizador ao ativar a navegação lado a lado e minimizar a necessidade de alternar entre separadores do browser.

Ao sinalizar a intenção de afixar na barra lateral, o PWA obtém os seguintes benefícios:

  • O seu PWA pode ser promovido no arquivo da barra lateral do Microsoft Edge.
  • O seu PWA consegue detetar se está ou não em execução na barra lateral do Microsoft Edge.
  • O seu PWA define o seu próprio estilo e esquema para proporcionar uma experiência de barra lateral compatível com o utilizador.

Ativar o suporte da barra lateral no seu PWA

Para preparar o PWA para afixar na barra lateral no Microsoft Edge, utilize o membro do edge_side_panel manifesto:

  1. Certifique-se de que o PWA tem um ficheiro de manifesto de aplicação Web que contenha, pelo menos, os namemembros , short_name, descriptione icons . Para obter detalhes, veja Utilizar um manifesto de aplicação Web para integrar um PWA no SO.

  2. Adicione o edge_side_panel membro ao manifesto da aplicação Web. Por exemplo:

    {
  "name": "PWAmp music player",
  "lang": "en-US",
  "start_url": "/",
  "short_name": "PWAmp",
  "description": "A skinnable music player app to play your favorite mp3 files",
  "display": "standalone",
  "icons": [
    {
      "src": "./favicon-256.png",
      "sizes": "256x256"
    }
  ],
  "edge_side_panel": {}
}

Adaptar a aplicação à largura mínima da barra lateral

A barra lateral no Microsoft Edge tem uma largura mínima predefinida de 376 píxeis e pode ser redimensionada pelos utilizadores. Por conseguinte, o esquema da sua aplicação deve suportar a largura mínima de 376 píxeis e deve responder.

Durante a criação da sua aplicação, pode testar se o esquema da aplicação é utilizável quando for estreito e certificar-se de que a estrutura está a responder com larguras diferentes ao utilizar a ferramenta Emulação de Dispositivos nas DevTools do Microsoft Edge. Para saber mais, consulte Verificar se o esquema da página Web é utilizável quando é estreito.

Se o esquema da sua aplicação não suportar a largura mínima de 376 píxeis, pode definir a largura preferencial utilizando a preferred_width propriedade no manifesto da aplicação Web. Por exemplo:

{
  "name": "PWAmp music player",
  "lang": "en-US",
  "start_url": "/",
  "short_name": "PWAmp",
  "description": "A skinnable music player app to play your favorite mp3 files",
  "display": "standalone",
  "icons": [
    {
      "src": "./favicon-256.png",
      "sizes": "256x256"
    }
  ],
  "edge_side_panel": {
    "preferred_width": 480
  }
}

Quando define uma largura preferencial no manifesto da sua aplicação, ocorre o seguinte:

  • Quando a aplicação é aberta na barra lateral, a barra lateral é automaticamente redimensionada para a largura preferida.

  • Os utilizadores podem redimensionar a barra lateral para torná-la maior do que a largura preferida, ou menor, até à largura mínima de 376 píxeis.

Criar uma aplicação apenas na barra lateral

Uma das vantagens mais importantes de criar uma aplicação como um PWA é que, a partir de uma base de código, a sua aplicação se adapta a todos os dispositivos e sistemas operativos, independentemente das suas capacidades e tamanhos de ecrã.

O edge_side_panel membro do manifesto torna a sua aplicação instalável como uma aplicação autónoma e permite que a sua aplicação seja afixada na barra lateral no Microsoft Edge.

No entanto, se preferir criar uma aplicação que só pode ser afixada na barra lateral, mas que não pode ser instalada como uma aplicação autónoma, defina o valor do display membro browsercomo , conforme mostrado abaixo (ou omitir o display membro do manifesto da aplicação Web):

{
  "name": "PWAmp music player",
  "lang": "en-US",
  "start_url": "/",
  "short_name": "PWAmp",
  "description": "A skinnable music player app to play your favorite mp3 files",
  "display": "browser",
  "icons": [
    {
      "src": "./favicon-256.png",
      "sizes": "256x256"
    }
  ],
  "edge_side_panel": {
    "preferred_width": 480
  }
}

Detetar a utilização na barra lateral

Detetar quando a aplicação está em execução na barra lateral pode ser útil para fornecer aos seus utilizadores a melhor experiência possível quando a sua aplicação é executada neste painel do browser.

Pode detetar quando a aplicação é executada na barra lateral com User-Agent Sugestões de Cliente. Para saber mais sobre User-Agent Sugestões de Cliente, consulte Detetar o Microsoft Edge a partir do seu site.

Para detetar quando a aplicação é executada na barra lateral, efetue um dos seguintes procedimentos:

  • No servidor Web, leia o cabeçalho do Sec-CH-UA pedido HTTPS e procure a Edge Side Panel marca. Por exemplo:

    Sec-CH-UA: "Microsoft Edge";v="112", "Edge Side Panel";v="1", "Placeholder;Browser Brand";v="99"

  • Em alternativa, no browser, utilize a navigator.userAgentData API javaScript e leia o valor da brands propriedade. Por exemplo:

    const brands = navigator.userAgentData.brands;
const sidebarBrandInfo = brands.find(b => b.brand === "Edge Side Panel");
if (sidebarBrandInfo) {
  console.log(sidebarBrandInfo); // { brand: "Edge Side Panel", version: "1" }
} else {
  console.log("App is not running in the Microsoft Edge sidebar");
}

Para detetar se a aplicação está em execução na barra lateral, também pode utilizar a cadeia do Agente de Utilizador.

Nota: recomendamos vivamente a utilização de Sugestões de Cliente do Agente de Utilizador em vez da cadeia do Agente de Utilizador. A cadeia do Agente de Utilizador é um mecanismo desatualizado para efetuar a deteção do browser e tem problemas de compatibilidade do site.

Se não conseguir utilizar as Sugestões de Cliente do Agente de Utilizador na sua aplicação, procure Edge Side Panel na cadeia Do Agente de Utilizador. Eis alguns exemplos de cadeias do Agente de Utilizador que contêm o Edge Side Panel valor:

User-Agent: ... (Edge Side Panel)...
User-Agent: ... (..., Edge Side Panel)...
User-Agent: ... (Edge Side Panel, ...)...

Relação com a sua aplicação móvel

Suponha que cria uma variante de ambiente de trabalho da sua aplicação e uma variante móvel da sua aplicação. Neste cenário, a variante de ambiente de trabalho é utilizada quando a aplicação é afixada na barra lateral. Por predefinição, as aplicações na barra lateral que utilizam o membro do edge_side_panel manifesto recebem a Sugestão de Cliente do Agente de Utilizador do Microsoft Edge para ambiente de trabalho:

Sec-CH-UA-Mobile: ?0

Conforme explicado em Adaptar a sua aplicação à largura mínima da barra lateral, recomendamos que o esquema da sua aplicação responda para que se possa adaptar a vários fatores de forma com uma base de código única.

No entanto, pode utilizar a Edge Side Panel marca Sugestão de Cliente do Agente de Utilizador para reutilizar a variante móvel da sua aplicação na barra lateral do Microsoft Edge.

Siga estas recomendações ao utilizar uma variante móvel da sua aplicação na barra lateral:

  • Remova todas as mensagens "Abrir na Aplicação", instruindo os utilizadores a transferirem a sua aplicação a partir de uma loja de aplicações.

  • Teste a acessibilidade e a usabilidade da sua aplicação com todos os métodos de entrada: rato, teclado e toque. Para saber mais sobre como testar a acessibilidade da sua aplicação, veja Funcionalidades de teste de acessibilidade.

Aplicação de demonstração

PWAmp é uma aplicação de demonstração PWA do leitor de música que pode ser afixada na barra lateral no Microsoft Edge. Para testar o PWAmp como uma aplicação de barra lateral:

  1. Abra o Microsoft Edge e certifique-se de que a barra lateral é apresentada. Se a barra lateral não for apresentada, aceda a edge://settings/sidebar e, em seguida, ative o botão de alternar Mostrar sempre a barra lateral :

    A página Definições do Edge com a definição

  2. Aceda a PWAmp numa nova janela ou separador. Não precisa de instalar a aplicação.

  3. Abra a barra lateral, clique em Personalizar e, em seguida, clique em Abrir na barra lateral:

    O painel

    A aplicação leitor de música PWAmp é apresentada na barra lateral.

  4. Clique no ícone PWAmp na barra lateral para abrir a aplicação e utilizá-la juntamente com os outros separadores:

    Microsoft Edge com um separador aberto numa aplicação lista TODO e PWAmp na barra lateral

O código fonte da aplicação de demonstração PWAmp tem o seguinte, para suportar a barra lateral do Microsoft Edge:

  • O edge_side_panel membro no ficheiro manifest.json .

  • A isSidebarPWA variável, que utiliza a navigator.userAgentData API JavaScript no ficheiro app.js .

Pode encontrar todo o código fonte de demonstração PWAmp em MicrosoftEdge/Demos > pwamp. Para transferir o código fonte localmente, veja Transferir ou clonar o repositório Demos no Código de exemplo para DevTools.

Faça comentários

A equipa do Microsoft Edge agradece o seu feedback sobre esta funcionalidade. Leia o explicador do Painel Lateral no repositório do explicador da plataforma Web do Microsoft Edge e deixe comentários ao criar um novo problema no repositório ou procurar problemas existentes e associar conversações existentes.