Usar um manifesto de aplicativo Web para integrar um Aplicativo Web Progressivo ao sistema operacional

O arquivo de manifesto do aplicativo Web rege como seu PWA (Aplicativo Web Progressivo) parece e se comporta quando instalado em um dispositivo. O manifesto do aplicativo Web fornece informações como o nome do aplicativo, o local do arquivo de ícones que representam seu aplicativo em menus do sistema e as cores do tema que o sistema operacional (sistema operacional) usa na barra de título.

Um manifesto do aplicativo Web é um arquivo JSON que deve ser referenciado da página HTML do seu site usando um link de manifesto. Insira o seguinte código entre as <head> marcas e </head> da página HTML do seu site para vincular ao arquivo de manifesto:

<link rel="manifest" href="/manifest.json">

Tipo de arquivo de manifesto do aplicativo Web

O conteúdo do manifesto do aplicativo Web deve ser válido JSON, mas a extensão do arquivo pode ser .json ou .webmanifest.

Se você optar por usar a extensão, verifique se o .webmanifest servidor HTTP o atende com o application/manifest+json tipo MIME.

Membros do manifesto

No mínimo, um arquivo de manifesto deve conter os seguintes membros do manifesto:

{
    "name": "My Sample PWA",
    "lang": "en-US",
    "start_url": "/"
}

Veja abaixo um exemplo de um arquivo de manifesto que contém mais membros:

{
    "name": "My Sample PWA",
    "lang": "en-us",
    "short_name": "SamplePWA",
    "description": "A sample PWA for testing purposes",
    "start_url": "/",
    "scope": "/",
    "display": "standalone",
    "theme_color": "#2f3d58",
    "background_color": "#2f3d58",
    "orientation": "any",
    "icons": [
        {
            "src": "/icon512.png",
            "sizes": "512x512"
        }
    ]
}

Um PWA pode ser personalizado ainda mais usando outros membros de manifesto, como o seguinte:

Member Descrição
name O nome do aplicativo, usado pelo sistema operacional para exibir ao lado do ícone do aplicativo.
short_name Isso pode ser usado para exibir o nome do aplicativo quando não houver espaço suficiente para name.
description A descrição do aplicativo.
categories A lista de categorias às quais o aplicativo pertence.
icons Matriz de objetos de imagem de ícone que são usados pelo sistema operacional em contextos diferentes.
screenshots Matriz de objetos de imagem de captura de tela, também usados pelo sistema operacional em contextos diferentes.
start_url A URL preferencial que deve ser navegada quando o sistema operacional inicia seu aplicativo.
scope Define o escopo de navegação do aplicativo. Fora desse escopo, a página visitada é revertida para uma página da Web normal, não para uma PWA. Esse padrão é start_url.
display Como o aplicativo deve ser. Isso altera o quanto da interface do usuário do navegador é mostrada ao usuário.
display_override Usado para determinar a exibição preferencial para o aplicativo, dependendo do que o dispositivo dá suporte.
theme_color A cor do tema padrão para o aplicativo. Isso afeta a forma como o sistema operacional exibe o site.
background_color A cor de fundo da janela em que o aplicativo é iniciado, antes da planilha de estilos ser aplicada.
orientation Em dispositivos de suporte, isso define a orientação padrão para o aplicativo (como paisagem ou retrato).
protocol_handlers A lista de esquemas de protocolo URI predefinidos ou personalizados aos quais o aplicativo está associado.
shortcuts A lista de tarefas comuns que os usuários poderão fazer clicando com o botão direito do mouse ou pressionando por muito tempo no ícone do aplicativo.
share_target O tipo de dados que o aplicativo aceita quando o conteúdo é compartilhado por meio da caixa de diálogo compartilhamento do sistema operacional.
file_handlers O tipo de arquivos com os quais o aplicativo pode ser iniciado.

Para saber mais sobre os membros do manifesto, consulte manifestos do aplicativo Web no MDN.

Manipular esquemas de protocolo específicos

Você pode registrar seu PWA como um manipulador de protocolo. Quando um usuário clica em um link que usa o esquema de protocolo ao qual seu aplicativo está registrado, seu aplicativo é iniciado automaticamente. Isso permite que os usuários compartilhem facilmente links para partes ou funcionalidades específicas do seu aplicativo entre si.

Para se registrar como manipulador de protocolo, use o membro do protocol_handlers manifesto:

{
    "protocol_handlers": [
        {
            "protocol": "mailto",
            "url": "/newEmail?to=%s"
        }
    ]
}

Para saber mais, confira Manipular protocolos no Aplicativos Web Progressivo.

Usar atalhos para fornecer acesso rápido aos recursos

A maioria dos sistemas operacionais fornece acesso rápido aos principais recursos do aplicativo usando atalhos no menu com o botão direito do mouse conectado ao ícone do aplicativo. Para usar atalhos no PWA, inclua o shortcuts membro no manifesto do aplicativo Web.

O código a seguir mostra como definir um atalho em um manifesto de aplicativo Web.

"shortcuts": [
    {
        "name": "Play Later",
        "description": "View the list of podcasts you saved for later",
        "url": "/play-later",
        "icons": [
            {
                "src": "/icons/play-later.svg",
                "type": "image/svg+xml",
                "purpose": "any"
            }
        ]
    },
    {
        "name": "Subscriptions",
        "description": "View the list of podcasts available in your subscription",
        "url": "/subscriptions?sort=desc"
    }
]

Para saber mais, confira Definir atalhos de aplicativo.

Identificar seu aplicativo como um destino de compartilhamento

Para permitir que os usuários compartilhem rapidamente links e arquivos com aplicativos nativos, use o share_target objeto no manifesto do aplicativo Web. Uma action página é semelhante a um formulário. share_target No objeto, você define a action página e os parâmetros que espera que sejam passados para a action página.

"share_target": {
    "action": "/share.html",
    "params": {
        "title": "name",
        "text": "description",
        "url": "link"
    }
}

O objeto acima share_target estabelece /share.html como a action página de um compartilhamento. Este exemplo também define três parâmetros que seriam passados para essa action página: title, texte url.

Para saber mais sobre como usar o recurso Share Target, confira Compartilhar conteúdo com outros aplicativos.

Associar seu aplicativo a arquivos

Quando um PWA é registrado como um manipulador de arquivos para determinados tipos de arquivo, o sistema operacional pode iniciar automaticamente o aplicativo quando esses arquivos são abertos .docx pelo usuário, semelhante à forma como o Microsoft Word lida com arquivos. As PWAs que lidam com arquivos parecem mais nativas para os usuários e melhor integradas ao sistema operacional.

Para manipular arquivos, liste os tipos e extensões de mímica de arquivo com as quais você deseja que seu aplicativo seja associado e defina a URL com a qual seu aplicativo deve ser iniciado:

{
    "file_handlers": [
        {
            "action": "/openFile",
            "accept": {
                "text/*": [
                    ".txt"
                ]
            }
        }
    ]
}

Em seguida, manipule os arquivos usando o window.launchQueue() método:

if ('launchQueue' in window) {
    launchQueue.setConsumer(launchParams => {
        // Do something with launchParams.files ...
    });
}

Para saber mais, confira Manipular arquivos no Aplicativos Web Progressivo.