Partilhar via

Criar PWAs para a barra lateral no Microsoft Edge

  • Artigo

O PWAs (Aplicativos Web progressivo) pode optar por ser fixado na barra lateral no Microsoft Edge.

A barra lateral no Microsoft Edge permite que os usuários acessem facilmente sites e utilitários populares ao lado de suas guias do navegador. O conteúdo na barra lateral aumenta a tarefa principal do usuário, habilitando 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 fixada na barra lateral, seu PWA obtém os seguintes benefícios:

  • Seu PWA pode ser promovido no repositório de barras laterais do Microsoft Edge.
  • Seu PWA pode detectar se ele está em execução na barra lateral do Microsoft Edge ou não.
  • Sua PWA define seu próprio estilo e layout para fornecer uma experiência de barra lateral amigável ao usuário.

Habilitar o suporte à barra lateral em seu PWA

Para deixar seu PWA pronto para fixar na barra lateral no Microsoft Edge, use o membro do edge_side_panel manifesto:

  1. Verifique se o PWA tem um arquivo de manifesto do aplicativo Web que contém pelo menos os namemembros , short_name, e descriptionicons .

    Para saber mais, confira Usar um manifesto de aplicativo Web para integrar um Aplicativo Web Progressivo ao sistema operacional.

  2. Adicione o edge_side_panel membro ao manifesto 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": {}
}

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 seu aplicativo deve dar suporte à largura mínima de 376 pixels e deve responder.

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

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

  • Quando seu aplicativo é aberto na barra lateral, a barra lateral é automaticamente redimensionada para sua largura preferida.

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

Criar um aplicativo somente barra lateral

Um dos benefícios mais importantes da criação de um aplicativo como PWA é que, a partir de uma base de código, seu aplicativo se adapta a todos os dispositivos e sistemas operacionais, quaisquer que sejam suas funcionalidades e tamanhos de tela.

O edge_side_panel membro do 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 valor do display membro como browser, conforme mostrado abaixo (ou, omita o display membro do manifesto 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 neste painel do navegador.

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

Para detectar quando o aplicativo for executado na barra lateral, faça um dos seguintes procedimentos:

  • No servidor Web, leia o cabeçalho de 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 aplicativo está em execução na barra lateral, você também pode usar a cadeia de caracteres Do Agente de Usuário.

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

Se você não puder usar dicas de cliente do Agente de Usuário em seu aplicativo, procure Edge Side Panel na cadeia de caracteres Do Agente de Usuário. Aqui estão alguns exemplos de cadeias de caracteres do Agente de Usuário 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 seu aplicativo móvel

Suponha que você crie uma variante da área de trabalho do seu aplicativo e uma variante móvel do seu aplicativo. Nesse cenário, a variante da área de trabalho é usada quando seu aplicativo é fixado na barra lateral. Por padrão, os aplicativos na barra lateral que usam o membro do edge_side_panel manifesto recebem a Dica do Cliente do Agente de 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 de formulário usando uma única base de código.

No entanto, você pode usar a Edge Side Panel marca User Agent Client Hint para reutilizar a variante móvel do 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 PWA do player de música que pode ser fixado na barra lateral no Microsoft Edge. Para testar PWAmp como um aplicativo de barra lateral:

  1. Abra o Microsoft Edge e verifique se a barra lateral está exibida. Se a barra lateral não estiver exibida, vá para edge://settings/sidebar e ative o alternância da barra lateral Always show :

    A página Configurações de Borda com a configuração

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

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

    O painel

    O aplicativo player de música PWAmp é exibido 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 TODO 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 navigator.userAgentData API JavaScript no arquivo app.js .

Você pode encontrar todo o código-fonte de demonstração PWAmp no MicrosoftEdge/Demos > pwamp. Para baixar o código-fonte localmente, consulte Baixar ou clonar o repositório Demos no código de exemplo para DevTools.

Faça comentários

A equipe do Microsoft Edge recebe seus comentários sobre esse recurso. Leia o explicador do Painel Lateral no repositório de explicadores da plataforma Web do Microsoft Edge e deixe comentários criando um novo problema no repositório ou procurando problemas existentes e juntando conversas existentes.