Progressive Web Apps: da guia à barra de tarefas

1. Olá!

Neste laboratório, você vai pegar um aplicativo da Web e torná-lo instalável. Este é o quarto de uma série de codelabs complementares para o workshop de Progressive Web Apps. O codelab anterior foi sobre IndexedDB. Há mais quatro codelabs nesta série.

O que você vai aprender

  • Escrever um service worker manualmente
  • Adicionar um service worker a um aplicativo da Web
  • Use o service worker e a API Cache Storage para disponibilizar recursos off-line

O que você precisa saber

  • HTML e JavaScript básicos

O que é necessário

2. Começar a configuração

Comece clonando ou fazendo o download do código inicial necessário para concluir este codelab:

Se você clonar o repositório, verifique se está na ramificação pwa04--tab-to-taskbar. O arquivo zip também contém o código dessa ramificação.

Essa base de código exige o Node.js 14 ou versões mais recentes. Quando o código estiver disponível, execute npm ci na linha de comando da pasta do código para instalar todas as dependências necessárias. Em seguida, execute npm start para iniciar o servidor de desenvolvimento do codelab.

O arquivo README.md do código-fonte explica todos os arquivos distribuídos. Além disso, estes são os principais arquivos com que você vai trabalhar ao longo deste codelab:

Arquivos de chave

  • index.html: HTML do aplicativo principal

3. Criar um manifesto de app da Web

Os arquivos de manifesto de apps da Web descrevem seu PWA para que, junto com um service worker funcional, um navegador saiba que seu app da Web pode ser instalado e, principalmente, como representá-lo no dispositivo em que ele será instalado. No entanto, primeiro ele precisa ser criado. Adicione um arquivo chamado manifest.json à pasta public do seu app da Web e adicione o seguinte a ele:

{
  "name": "PWA Edit",
  "short_name": "PWA Edit",
  "start_url": "/?source=pwa",
  "display": "standalone",
  "icons": [
    {
      "type": "image/png",
      "sizes": "192x192",
      "src": "/images/icons/logo-192.png"
    },
    {
      "type": "image/png",
      "sizes": "48x48",
      "src": "/images/icons/logo-48.png"
    },
    {
      "type": "image/png",
      "sizes": "72x72",
      "src": "/images/icons/logo-72.png"
    },
    {
      "type": "image/png",
      "sizes": "128x128",
      "src": "/images/icons/logo-128.png"
    },
    {
      "type": "image/png",
      "sizes": "384x384",
      "src": "/images/icons/logo-384.png"
    },
    {
      "type": "image/png",
      "sizes": "512x512",
      "src": "/images/icons/logo-512.png"
    },
    {
      "type": "image/png",
      "sizes": "96x96",
      "src": "/images/icons/logo-96.png"
    },
    {
      "type": "image/png",
      "sizes": "1024x1024",
      "src": "/images/icons/maskable-1024.png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#282c34",
  "background_color": "#282c34",
  "description": "A PWA markdown editor",
  "categories": ["productivity", "utilities"]
}

Não se esqueça de incluir um ícone de toque da Apple para dispositivos iOS. Adicione a seguinte linha de código logo após a tag <title> no <head> em index.html

<link rel="apple-touch-icon" href="/images/icons/apple-touch.png" />

Explicação

Esse manifesto inclui campos obrigatórios, recomendados e promocionais. Portanto, há muita coisa acontecendo. Primeiro, os campos obrigatórios em que o nome, o URL de inicialização, o modo de exibição e os ícones do PWA são definidos. O último ícone é mascarável, permitindo várias exibições com base na interface do dispositivo. Em seguida, há os campos de tema e cor de plano de fundo recomendados. Por fim, há os campos promocionais, uma descrição e as categorias em que este PWA se encaixa. Quando esse manifesto é anexado a um PWA, esses campos controlam como o app instalado do PWA será exibido e gerenciado.

4. Anexar manifesto ao PWA

Depois de criado, o arquivo de manifesto precisa ser anexado para ser associado ao PWA. Para fazer isso, abra index.html e adicione o seguinte logo abaixo da tag <title> no <head>:

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

Explicação

Um link de manifesto informa aos navegadores compatíveis que o manifesto do app da Web vinculado descreve o site atual. Quando válido e disponível, com um service worker em funcionamento e depois que o web app passa por outros critérios de instalação específicos do navegador, ele permite que o app seja instalado diretamente no dispositivo de um usuário.

5. Adicionar atalhos

Uma ótima maneira de fazer com que seu PWA pareça mais integrado a um dispositivo é fornecer atalhos de menu de contexto para funcionalidades específicas no app. A alternância do modo noturno no PWA permite escolher o modo definindo um parâmetro de consulta mode como night ou day. Configure dois atalhos em manifest.json que façam o seguinte:

  • Inicia o PWA no modo night ou day.
  • Usa /images/logo.svg em um tamanho 150x150 para um ícone

6. Parabéns!

Você acabou de aprender a criar um arquivo de manifesto de app da Web, anexá-lo a uma página da Web e adicionar atalhos de apps quando ele é instalado.

O próximo codelab da série é Solicitar e medir a instalação.