Compartilhar via

Utilizar um manifesto de aplicação Web para integrar um PWA no SO

  • Artigo

Uma Aplicação Web Progressiva (PWA) tem de ter um manifesto de aplicação Web para definir como o PWA se integra com o sistema operativo (SO). Este artigo explica o que é um manifesto de aplicação Web e quais os dados necessários e opcionais que um manifesto de aplicação Web contém.

O ficheiro de manifesto da aplicação Web governa o aspeto e o comportamento do PWA quando instalado num dispositivo. O manifesto da aplicação Web fornece informações como o nome da sua aplicação, a localização do ficheiro dos ícones que representam a sua aplicação nos menus do sistema e as cores do tema que o SO utiliza na barra de título.

Um manifesto de aplicação Web é um ficheiro JSON que tem de ser referenciado a partir da página HTML do seu site através de uma ligação de manifesto. Insira o seguinte código entre as <head> etiquetas e </head> da página HTML do seu site para ligar ao ficheiro de manifesto:

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

Tipo de ficheiro de manifesto da aplicação Web

O conteúdo do manifesto da aplicação Web tem de ser JSON válido, mas a extensão de ficheiro pode ser .json ou .webmanifest.

Se optar por utilizar a extensão, verifique se o .webmanifest servidor HTTP a serve com o application/manifest+json tipo MIME.

Membros do manifesto

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

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

Segue-se um exemplo de um ficheiro 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 ainda mais personalizado ao utilizar outros membros do manifesto, como o seguinte:

Member Descrição
name O nome da aplicação, utilizado pelo sistema operativo para apresentar junto ao ícone da aplicação.
short_name Isto pode ser utilizado para apresentar o nome da aplicação quando não existe espaço suficiente para name.
description A descrição do aplicativo.
categories A lista de categorias a que a aplicação pertence.
icons Matriz de objetos de imagem de ícone que são utilizados pelo SO em diferentes contextos.
screenshots Matriz de objetos de imagem de captura de ecrã, também utilizados pelo SO em diferentes contextos.
start_url O URL preferencial que deve ser navegado para quando o sistema operativo iniciar a sua aplicação.
scope Define o âmbito de navegação da aplicação. Fora deste âmbito, a página visitada reverte para uma página Web normal e não para um PWA. Esta predefinição é start_url.
display Qual deve ser o aspeto da aplicação. Isto altera a quantidade de IU do browser que é apresentada ao utilizador.
display_override Utilizado para determinar o ecrã preferencial da aplicação, consoante o que o dispositivo suporta.
theme_color A cor do tema predefinida para a aplicação. Isto afeta a forma como o SO apresenta o site.
background_color A cor de fundo da janela onde a aplicação é iniciada, antes de a folha de estilos ser aplicada.
orientation Nos dispositivos de suporte, isto define a orientação predefinida para a aplicação (como horizontal ou vertical).
protocol_handlers A lista de esquemas de protocolos URI predefinidos ou personalizados a que a aplicação está associada.
shortcuts A lista de tarefas comuns que os utilizadores poderão fazer ao clicar com o botão direito do rato ou premir continuamente o ícone da aplicação.
share_target O tipo de dados que a aplicação aceita quando o conteúdo é partilhado através da caixa de diálogo de partilha do SO.
file_handlers O tipo de ficheiros com os quais a aplicação pode ser iniciada.

Para saber mais sobre os membros do manifesto, veja Manifestos de aplicações Web no MDN.

Processar esquemas de protocolo específicos

Pode registar o PWA como um processador de protocolos. Quando um utilizador clica numa ligação que utiliza o esquema de protocolo no qual a sua aplicação se registou, a sua aplicação é iniciada automaticamente. Isto permite que os utilizadores partilhem facilmente ligações para partes ou funcionalidades específicas da sua aplicação entre si.

Para se registar como processador de protocolos, utilize o membro do protocol_handlers manifesto:

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

Para saber mais, veja Processar protocolos em Aplicações Web Progressivas.

Utilizar atalhos para fornecer acesso rápido às funcionalidades

A maioria dos sistemas operativos fornece acesso rápido às principais funcionalidades da aplicação através de atalhos no menu de contexto que está ligado ao ícone da aplicação. Para utilizar atalhos no seu PWA, inclua o shortcuts membro no manifesto da sua aplicação Web.

O código seguinte mostra como definir um atalho num manifesto de aplicação 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, veja Definir atalhos de aplicações.

Identificar a sua aplicação como um Destino de Partilha

Para permitir que os utilizadores partilhem rapidamente ligações e ficheiros com aplicações nativas, utilize o share_target objeto no manifesto da aplicação Web. Uma action página é semelhante a um formulário. share_target No objeto, define a action página e os parâmetros que espera que sejam transmitidos para a action página.

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

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

Para saber mais sobre como utilizar a funcionalidade Partilhar Destino, consulte Partilhar conteúdo com outras aplicações.

Associar a sua aplicação a ficheiros

Quando um PWA é registado como um processador de ficheiros para determinados tipos de ficheiro, o sistema operativo pode iniciar automaticamente a aplicação quando esses ficheiros são abertos pelo utilizador, de forma semelhante à forma como o Microsoft Word processa ficheiros .docx . Os PWAs que processam ficheiros sentem-se mais nativos dos utilizadores e melhor integrados no sistema operativo.

Para processar ficheiros, liste os tipos de mime de ficheiro e as extensões aos quais pretende que a sua aplicação seja associada e defina o URL com o qual a sua aplicação deve ser iniciada:

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

Em seguida, processe os ficheiros com o window.launchQueue() método :

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

Para saber mais, consulte Processar ficheiros em Aplicações Web Progressivas.