Criar um PWA para a barra lateral no Microsoft Edge

Este recurso está sendo preterido

Atualização de julho de 2026: esse recurso está sendo preterido; Em breve, ele não terá mais suporte.

Para obter informações sobre a Barra Lateral, consulte Simplificar o acesso aos seus sites e aplicativos favoritos com a Barra lateral no Microsoft Edge no Suporte da Microsoft.

Introdução

Os PWAs (Aplicativos Web Progressivos) podem optar por ser fixados na barra lateral no Microsoft Edge.

A barra lateral no Microsoft Edge permite que os usuários acessem facilmente sites e utilitários populares junto com as guias do navegador. O conteúdo na barra lateral aumenta a tarefa principal do usuário, permitindo a navegação lado a lado e minimizando a necessidade de alternar contextos entre as guias do navegador.

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

  • Seu PWA pode ser promovido na loja da barra lateral do Microsoft Edge.
  • Seu PWA pode detectar se está sendo executado na barra lateral do Microsoft Edge ou não.
  • Seu PWA define seu próprio estilo e layout para fornecer uma experiência de barra lateral amigável.

Habilitar o suporte da barra lateral no PWA

Para deixar seu PWA pronto para fixação na barra lateral do Microsoft Edge, use o membro de manifesto edge_side_panel :

  1. Verifique se o PWA tem um arquivo de manifesto do aplicativo Web que contenha pelo menos os namemembros , short_name, description, e icons .

    Veja mais detalhes em:

  2. Adicione o membro ao manifesto do edge_side_panel aplicativo 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 seu aplicativo à largura mínima da barra lateral

A barra lateral no Microsoft Edge tem uma largura mínima padrão de 376 pixels e pode ser redimensionada pelos usuários. Portanto, o layout do aplicativo deve dar suporte à largura mínima de 376 pixels e deve ser responsivo.

Ao criar seu aplicativo, você pode testar se o layout do aplicativo é utilizável quando restrito e verificar se o design é responsivo em larguras diferentes, usando a ferramenta de Emulação de Dispositivo no Microsoft Edge DevTools. Para saber mais, consulte Verificar se o layout da página da Web é utilizável quando restrito.

Se o layout do aplicativo não puder suportar a largura mínima de 376 pixels, você poderá definir sua largura preferencial usando a propriedade no manifesto preferred_width do aplicativo 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 você define uma largura preferencial no manifesto do seu aplicativo, acontece o seguinte:

  • Quando o aplicativo é aberto na barra lateral, a barra lateral é redimensionada automaticamente para a largura de sua preferência.

  • Os usuários podem redimensionar a barra lateral para torná-la maior do que sua largura preferencial, ou menor, até a largura mínima de 376 pixels.

Criar um aplicativo somente de barra lateral

Um dos benefícios mais importantes de criar um aplicativo como um PWA é que, a partir de uma base de código, seu aplicativo se adapta a todos os dispositivos e sistemas operacionais, independentemente de seus recursos e tamanhos de tela.

O edge_side_panel membro manifesto torna seu aplicativo instalável como um aplicativo autônomo e permite que seu aplicativo seja fixado na barra lateral no Microsoft Edge.

No entanto, se você preferir criar um aplicativo que só pode ser fixado na barra lateral, mas não pode ser instalado como um aplicativo autônomo, defina o display valor do membro como browser, conforme mostrado abaixo (ou omita o membro do manifesto display do aplicativo 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
  }
}

Detectar o uso na barra lateral

Detectar quando seu aplicativo está em execução na barra lateral pode ser útil para fornecer aos usuários a melhor experiência possível quando seu aplicativo é executado nesse painel do navegador.

Você pode detectar quando seu aplicativo é executado na barra lateral usando User-Agent Dicas de Cliente. Para saber mais sobre User-Agent Dicas de Cliente, consulte Detectando o Microsoft Edge em seu site.

Para detectar quando seu aplicativo é executado na barra lateral, siga um dos seguintes procedimentos:

  • No servidor Web, leia o cabeçalho da Sec-CH-UA solicitação 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"

  • Ou, no navegador, use 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 detectar se o seu aplicativo está em execução na barra lateral, você também pode usar a cadeia de caracteres do Agente do Usuário.

Observação: é altamente recomendável usar dicas de cliente de agente do usuário em vez da cadeia de caracteres do agente do usuário. A cadeia de caracteres do Agente do Usuário é um mecanismo desatualizado para fazer a detecção do navegador e tem problemas de compatibilidade com sites.

Se você não puder usar Dicas de Cliente Agente do Usuário em seu aplicativo, procure Edge Side Panel na cadeia de caracteres do Agente do Usuário. Aqui estão alguns exemplos de cadeias de caracteres de agente do usuário contendo o Edge Side Panel valor:

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

Relacionamento com seu aplicativo móvel

Suponha que você crie uma variante de desktop do seu aplicativo e uma variante móvel do seu aplicativo. Nesse cenário, a variante da área de trabalho é usada quando o aplicativo está fixado na barra lateral. Por padrão, os aplicativos na barra lateral que usam o membro manifesto edge_side_panel recebem a dica de cliente do agente do usuário da área de trabalho do Microsoft Edge:

Sec-CH-UA-Mobile: ?0

Conforme explicado em Adaptar seu aplicativo à largura mínima da barra lateral, recomendamos tornar o layout do aplicativo responsivo para que ele possa se adaptar a vários fatores forma usando uma única base de código.

No entanto, você pode usar a Edge Side Panel marca Dica de Cliente do Agente do Usuário para reutilizar a variante móvel do seu aplicativo na barra lateral do Microsoft Edge.

Siga estas recomendações ao usar uma variante móvel do seu aplicativo na barra lateral:

  • Remova todas as mensagens "Abrir no Aplicativo" instruindo os usuários a baixar seu aplicativo de uma loja de aplicativos.

  • Teste a acessibilidade e a usabilidade do seu aplicativo com todos os métodos de entrada: mouse, teclado e toque. Para saber mais sobre como testar a acessibilidade do seu aplicativo, consulte Recursos de teste de acessibilidade.

Aplicativo de demonstração

PWAmp é um aplicativo de demonstração do PWA com reprodutor de música que pode ser fixado na barra lateral do Microsoft Edge. Para testar o PWAmp como um aplicativo de barra lateral:

  1. Abra o Microsoft Edge e verifique se a barra lateral é exibida. Se a barra lateral não for exibida, vá para edge://settings/sidebar e ative a opção Sempre mostrar barra lateral :

    A página Configurações do Edge com a configuração

  2. Acesse PWAmp em uma nova janela ou guia. Você não precisa instalar o aplicativo.

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

    O painel

    O aplicativo player de música PWAmp aparece na barra lateral.

  4. Clique no ícone PWAmp na barra lateral para abrir o aplicativo e usá-lo junto com suas outras guias:

    Microsoft Edge com uma guia aberta em um aplicativo de lista de tarefas pendentes e PWAmp na barra lateral

O código-fonte do aplicativo de demonstração PWAmp tem o seguinte, para dar suporte à barra lateral do Microsoft Edge:

  • O edge_side_panel membro no arquivo manifest.json .

  • A isSidebarPWA variável, que usa a API JavaScript navigator.userAgentData no arquivoapp.js .

Você pode encontrar todo o código-fonte de demonstração do PWAmp em MicrosoftEdge / Demos > pwamp. Para baixar o código-fonte localmente, consulte Clonar o repositório "MicrosoftEdge / Demos" para sua unidade em Código de exemplo para DevTools.

Faça comentários

A equipe do Microsoft Edge agradece seus comentários sobre esse recurso. Leia o explicativo do Painel Lateral no repositório explicativo da plataforma Web do Microsoft Edge e deixe comentários criando um novo problema no repositório ou pesquisando problemas existentes e ingressando em conversas existentes.

  • Last updated on