Amostra do conversor de temperatura

O exemplo de conversor de temperatura é um PWA (Aplicativo Web Progressivo) que demonstra as noções básicas de como criar um PWA. Você pode modificar este exemplo para começar a criar seu próprio PWA.

Este artigo aborda como obter o exemplo, instalá-lo no Windows, executá-lo e modificá-lo. Este exemplo funciona com vários sistemas operacionais, incluindo o Windows. Este artigo fornece etapas para o Windows; Outras plataformas têm etapas semelhantes.

Veja também:

Etapa 1: visualizar o aplicativo em execução em uma janela do navegador

Para examinar a interface do usuário do aplicativo:

  1. No Microsoft Edge, acesse o aplicativo Web de exemplo do conversor de temperatura ao vivo em uma nova janela ou guia (hospedado em github.io):

    O PWA como um aplicativo Web dentro do navegador, servido a partir de github.io

    O PWA (Aplicativo Web Progressivo) de exemplo é mostrado inicialmente no navegador, como um aplicativo Web, mas também tem um botão Aplicativo disponível (ícone de aplicativo disponível) na barra de endereços (não clique nele ainda).

  2. Na caixa de texto Temperatura , digite 22.

    A temperatura exibida muda para 71,6 F.

  3. Clique na lista suspensa De e clique fora dela.

  4. Clique na lista suspensa para e clique fora dela.

    As unidades disponíveis são:

    • Celsius
    • Fahrenheit
    • Kelvin

  5. Feche a guia do navegador para o aplicativo.

Em uma etapa posterior, depois que o PWA (Aplicativo Web Progressivo) de exemplo for instalado como um aplicativo local, o aplicativo será executado em sua própria janela:

O exemplo de Aplicativo Web Progressivo (PWA), instalado e em execução em sua própria janela

O exemplo é um Aplicativo Web Progressivo, em vez de um site normal. Portanto, você pode instalar o PWA (Aplicativo Web Progressivo) como um aplicativo no dispositivo e a janela do aplicativo conterá a mesma interface do usuário do aplicativo que no navegador da Web completo.

A janela do aplicativo instalado é uma janela baseada no navegador, sem a maior parte da interface do usuário do navegador. O aplicativo instalado é integrado à interface do usuário do dispositivo, como a barra de tarefas do Windows e o menu Iniciar do Windows.

A instância acima do aplicativo de exemplo está hospedada em github.io. Nas seções abaixo, você usa um servidor local para mostrar como testar localmente um Progressive Web App (PWA) enquanto o desenvolve. Em vez disso, você acessará o aplicativo Web do seu servidor local (localhost) e o instalará no seu dispositivo a partir daí.

Etapa 2: Instalar o Visual Studio Code

O Visual Studio Code permite exibir o código de exemplo, modificar o exemplo e criar seu próprio PWA (Progressive Web App) usando o exemplo como ponto de partida.

Instale (ou, opcionalmente, atualize) o VS Code, da seguinte maneira:

  1. Pressione a tecla Windows, digite Visual Studio Code e clique em Abrir.

  2. Se o Visual Studio Code não estiver instalado, acesse o Visual Studio Code, baixe e instale-o.

Etapa 3: Instalar o git

Instale ou atualize o git, da seguinte maneira:

  1. Abra o Visual Studio Code.

  2. No menu Exibir , selecione Terminal.

  3. Insira o comando: git -v

    Se o git estiver instalado, um número de versão será exibido, como git version 2.51.0.windows.2.

  4. Vá para Downloads em git-scm.com .

    No canto superior direito, observe o número da versão mais recente , como 2.51.1.

  5. Se o git ainda não estiver instalado ou se você quiser atualizá-lo, baixe e instale a versão mais recente do git, em Downloads at git-scm.com. Caso contrário, vá para a próxima seção, abaixo.

  6. Durante a instalação, você pode aceitar os padrões, exceto que é recomendável alterar o editor padrão do vim para o Visual Studio Code:

    Instalador do git com o Visual Studio Code selecionado como editor padrão

Etapa 4: instalar Node.js

Node.js inclui um servidor Web que você usará para executar e testar o exemplo localmente.

Instale ou atualize Node.js, da seguinte maneira:

  1. Abra o Visual Studio Code.

  2. No menu Exibir , selecione Terminal.

  3. Insira o comando: node -v

    Se Node.js tiver sido instalado, um número de versão será gerado, como v22.19.0.

  4. Vá para Node.js.

  5. No canto inferior esquerdo, no botão LTS mais recente , observe o número da versão, como v22.20.0.

  6. Se o Node.js ainda não estiver instalado ou se você quiser atualizá-lo, clique no botão Obter Node.js . Caso contrário, vá para a próxima seção, abaixo.

    Você acaba em uma página como Baixar Node.js.

  7. Clique no botão Windows Installer (.msi).

    A janela de downloads do Microsoft Edge é aberta e exibe um nome de arquivo, como node-v22.20.0-x64.msi.

  8. Clique no link abrir arquivo sob o nome do arquivo.

    A janela do Assistente de Configuração doNode.js é aberta.

  9. Clique no botão Avançar e siga as instruções. Você pode aceitar os padrões e clicar no botão Instalar .

    A janela do Assistente de Configuração doNode.js é fechada.

  10. No terminal do VS Code, insira o comando: node -v

    O número da versão mais recente é exibido, como v22.20.0.

Etapa 5: bifurcar e clonar o repositório "MicrosoftEdge / Demos"

Em seguida, você obterá uma cópia local do código de exemplo, bifurcando o repositório Microsoft Edge / Demos. Como você não tem permissões para enviar commits diretamente para o repositório de código aberto Demos, você bifurcará o repositório Demos para criar sua própria cópia do repositório, em vez de clonar o repositório Demos.

Você pode ser capaz de baixar o branch "main" do repositório Demos e editar os arquivos no branch "main", em vez de bifurcar e clonar o repositório e, em seguida, criar um branch de trabalho (test1) para editar os arquivos. Este artigo mostra a maneira mais complexa, mas flexível: bifurcar o repositório.

Bifurque e clone o repositório MicrosoftEdge/Demos , da seguinte maneira:

  1. Pressione Windows+E.

    O Explorador de Arquivos é aberto.

    Verifique se o repositório Demos foi clonado:

  2. Navegue até o local para o qual você deseja que o repositório seja clonado, como:

    C:\Users\localAccount\GitHub\

    Se o repositório ainda não tiver sido clonado, como C:\Users\localAccount\GitHub\Demos\, execute as etapas a seguir; caso contrário, vá para a próxima seção.

    Bifurque o repo:

  3. Abra o repositório MicrosoftEdge / Demos em uma nova janela ou guia.

  4. No canto superior direito, clique na seta para baixo no botão Bifurcação e selecione Criar uma nova bifurcação.

    Para obter mais informações, consulte Bifurcar um repositório no Bifurcar um repositório no GitHub Docs.

  5. Clique no botão Criar bifurcação .

    Clone sua bifurcação para a unidade local:

  6. No GitHub, navegue até a bifurcação do repositório MicrosoftEdge / Demos .

  7. Acima da lista de arquivos, clique no botão Código .

  8. Na guia HTTPS , clique no botão Copiar para a área de transferência (ícone Copiar para a área de transferência).

  9. Abra o Visual Studio Code.

  10. No menu Exibir , selecione Terminal.

  11. Mude para o diretório onde você deseja clonar o repositório Demos:

    cd ~/GitHub

    Ou digite o seguinte comando, especificando sua conta local:

    cd c:/users/localAccount/GitHub/

  12. Digite git clonee cole a URL que você copiou anteriormente. Ficará assim, com seu nome de usuário do GitHub em vez de SEU-NOMEDEUSUÁRIO:

    git clone https://github.com/YOUR-USERNAME/Demos.git

  13. Pressione Enter.

    Um clone local do repositório Demos bifurcado é criado.

Veja também:

Etapa 6: Execute o PWA como um aplicativo Web no servidor Web local

Em seguida, você executará e testará o exemplo de PWA (Aplicativo Web Progressivo) em seu servidor Web local, no Microsoft Edge. Você usará http-servero , um servidor Web de desenvolvimento local que pode ser executado no Node.js.

Ao desenvolver ou testar um site ou aplicativo, incluindo um PWA, você pode usar um servidor Web local. No entanto, quando o aplicativo estiver pronto para os usuários, você implantará o aplicativo na Web usando um provedor de hospedagem na Web. Como um site ou aplicativo normal, um PWA é distribuído aos usuários usando um servidor Web.

Mude para o /temperature-converter/ diretório do repositório Demos clonado e inicie a http-server partir daí, da seguinte maneira:

  1. Abra o Visual Studio Code.

  2. No menu Arquivo , selecione Abrir Pasta.

    A caixa de diálogo Abrir Pasta é aberta.

  3. Navegue até a pasta de repositório Demos clonada, como C:\Users\localAccount\GitHub\Demos\, selecione a \temperature-converter\ pasta nela e clique no botão Select Folder .

  4. No menu Exibir , selecione Terminal.

    O painel Terminal é aberto, com o prompt em Demos\temperature-converter\, como C:\users\localAccount\GitHub\Demos\temperature-converter.

  5. Digite o seguinte comando:

    npx http-server

    O servidor Web de desenvolvimento local é iniciado, usando o http-server pacote NPM:

    Saída do comando npx http-server no Terminal no VS Code

  6. Se você receber um erro "a execução de scripts está desabilitada" (se o Terminal do VS Code estiver usando o PowerShell), insira o comando PowerShell da política de execução e emita o comando npx novamente:

    Set-ExecutionPolicy -ExecutionPolicy Bypass -Scope CurrentUser
npx http-server

    Exemplo de saída:

    Need to install the following packages:
http-server@14.1.1
Ok to proceed? (y)

  7. Se necessário, pressione Y e Enter.

    A saída é exibida, como:

    Starting up http-server, serving ./
...
Available on:
  http://10.0.1.2:8080
  http://127.0.0.1:8080
Hit CTRL-C to stop the server

  8. No Microsoft Edge, acesse http://localhost:8080 (ou uma URL equivalente que foi gerada no terminal, a npx http-server partir do comando).

    O aplicativo conversor de temperatura é exibido no navegador:

    O aplicativo conversor de temperatura no navegador em localhost

Etapa 7: Instalar o PWA do servidor Web localhost como um aplicativo local

Instale o PWA (Aplicativo Web Progressivo) de exemplo do servidor Web localhost como um aplicativo no Windows, da seguinte maneira:

  1. Na barra de endereços, clique no aplicativo disponível. Instale o conversor de temperatura (ícone do aplicativo disponível).

    Uma caixa de diálogo Instalar aplicativo é aberta:

    O prompt de instalação

  2. Clique no botão Instalar .

    O aplicativo é instalado localmente. A caixa de diálogo Aplicativo instalado é aberta dentro do aplicativo:

    O aplicativo instalado

  3. Clique no botão Permitir .

    Uma caixa de diálogo do Windows Apps pergunta "Deseja fixar o conversor de temperatura na barra de tarefas? Esta solicitação é proveniente do conversor de temperatura."

  4. Clique no botão Sim .

    O ícone do aplicativo conversor de temperatura (o ícone ) aparece na barra de tarefas do Windows.

    O aplicativo conversor de temperatura é exibido em sua própria janela do aplicativo:

    O aplicativo conversor de temperatura instalado em execução em sua própria janela

    A janela é uma janela do navegador sem a maior parte da interface do usuário do navegador.

  5. Feche a janela do aplicativo Conversor de temperatura .

Etapa 8: Abrir o aplicativo instalado

Execute o PWA (Aplicativo Web Progressivo) de exemplo como um aplicativo local no dispositivo.

  1. Pressione a tecla Windows , comece a digitar Conversor de temperatura e clique em Abrir.

    O aplicativo conversor de temperatura instalado é aberto em sua própria janela.

    Como você instalou o aplicativo de localhost, quando você inicia o aplicativo, o lado direito da barra de título exibe localhost:8080 por alguns segundos:

    O PWA (Aplicativo Web Progressivo) de exemplo instalado, se instalado do localhost

    Se você tivesse instalado o github.io aplicativo do servidor, ao iniciar o aplicativo, o lado direito da barra de título exibiria microsoftedge.github.io por alguns segundos:

    O PWA (Aplicativo Web Progressivo) de exemplo instalado, se instalado do servidor github.io

    Você também pode abrir o aplicativo instalado de outras formas compatíveis com o dispositivo, como o botão Conversor de temperatura (o ícone ) fixado na barra de tarefas do Windows.

  2. Na caixa de texto de temperatura , insira 22.

    A temperatura exibida é atualizada para 71,6 F.

  3. Clique nas listas suspensas De e Para .

    As unidades disponíveis são:

    • Celsius
    • Fahrenheit
    • Kelvin

Etapa 9: Examinar o trabalho de serviço que manipula o cache offline

A janela do aplicativo local para um Aplicativo Web Progressivo (PWA) é uma janela baseada em navegador, portanto, Microsoft Edge DevTools pode ser usado para trabalhar com o PWA.

Confirme se o trabalho de serviço (sw.js) está em execução quando você abrir o PWA como um aplicativo local, da seguinte maneira:

  1. Abra o aplicativo conversor de temperatura instalado.

  2. Clique com o botão direito do mouse na janela do aplicativo (abaixo da barra de título) e selecione Inspecionar.

    O DevTools é aberto, em uma janela separada; desencaixado. (Outras opções de encaixe estão esmaecidas e não estão disponíveis.) A janela do aplicativo é uma janela do navegador que inclui o comando Inspecionar do DevTools.

  3. No DevTools, selecione a ferramenta Aplicativo (Ícone de aplicativo).

  4. Na árvore à esquerda, na seção Aplicativo , selecione Trabalhadores de serviço.

    As informações sobre o trabalho de serviço são exibidas:

    O PWA como um aplicativo local instalado, com o DevTools mostrando o painel de Trabalho de Serviço, com o Trabalho de sw.js em execução

    A Origem do trabalho de serviço é sw.js, com Status de ativado e está em execução.

  5. Na árvore à esquerda, na seção principal Armazenamento , expanda Armazenamento em cache e selecione temperature-converter-v1:

    Aplicativo instalado: Ferramenta > de aplicativo DevTools > Armazenamento em cache, mostrando recursos armazenados em cache

    O cache do trabalho de serviço é exibido. Todos os recursos armazenados em cache pelo trabalho de serviço (ou armazenados em cache automaticamente pelo navegador) estão listados:

    • / (index.html) - A página da Web HTML do aplicativo, definindo o layout dos controles.
    • /converter.css - O estilo da página da web do aplicativo.
    • /converter.js - O arquivo JavaScript que contém a lógica do aplicativo.
    • /icon512.png - O arquivo de imagem do ícone do aplicativo para representar o aplicativo.
    • /manifest.json - O manifesto do aplicativo, contendo informações básicas sobre o aplicativo, para uso do sistema operacional do dispositivo.

    O trabalho de serviço adiciona três arquivos ao cache, explicitamente (.html, .csse .js). O ícone (.png) e o manifesto (.json) são armazenados em cache automaticamente pelo navegador.

Etapa 10: usar o DevTools para desligar a conexão com a Internet e testar o PWA offline

Experimente o PWA (Aplicativo Web Progressivo) como um aplicativo offline, da seguinte maneira:

  1. Na janela do DevTools, abra a ferramenta Rede (o ícone de rede).

  2. Perto do topo, no menu Limitação à direita da caixa de seleção Desabilitar cache , altere de Sem limitação para Offline:

    A janela DevTools, mostrando onde alternar o valor de Limitação para Offline

    A guia Rede adiciona um ícone de aviso para lembrá-lo dessa limitação.

  3. Na janela Conversor de temperatura, clique com o botão direito do mouse e selecione Atualizar.

  4. Na caixa de texto Temperatura , digite 22.

    A temperatura exibida muda para 71,6 F. O aplicativo ainda é exibido corretamente e ainda funciona corretamente usando recursos armazenados em cache localmente gerenciados pelo trabalho de serviço.

  5. Na janela DevTools, no menu Limitação à direita da caixa de seleção Desabilitar cache , altere de Offline de volta para Sem limitação.

    O ícone de aviso de limitação é removido da guia Rede .

  6. Feche a janela do DevTools.

  7. Feche a janela do aplicativo Conversor de temperatura .

Esse mesmo uso do DevTools também funciona quando o aplicativo está no Microsoft Edge como um aplicativo Web, em vez de um aplicativo instalado. Para obter mais informações, consulte Emular offline na referência de recursos de rede.

Etapa 11: Desinstalar o aplicativo instalado

Desinstale o PWA (Aplicativo Web Progressivo), da seguinte maneira:

  1. Clique no botão Conversor de temperatura fixado na barra de tarefas do Windows.

    O aplicativo conversor de temperatura instalado é aberto.

  2. Na barra de título, clique no botão Configurações e mais (Ícone Configurações e mais na barra de título azul escuro) e clique em Configurações do aplicativo.

    No Microsoft Edge, a guia Aplicativos é aberta (edge://apps), exibindo detalhes sobre o aplicativo Conversor de temperatura :

    O botão Desinstalar na página Aplicativos do Microsoft Edge

  3. Na parte inferior, clique no botão Desinstalar .

    A caixa de diálogo Desinstalar o aplicativo do Microsoft Edge em todos os dispositivos sincronizados? é aberta.

  4. Marque a caixa de seleção Excluir histórico e dados de aplicativos e clique no botão Desinstalar .

Desinstalando um aplicativo local no menu Iniciar do Windows

Observação: como exemplo de integração do sistema operacional, você pode desinstalar o aplicativo por meio do menu Iniciar do Windows, da seguinte forma:

  1. Pressione a tecla Windows .

  2. Comece a digitar "conversor de temperatura".

  3. Clique em Desinstalar:

    Menu Iniciar do Windows mostrando o comando Desinstalar do aplicativo

Desinstalando um aplicativo local a partir do Microsoft Edge

Observação: como alternativa, você pode desinstalar o PWA (Aplicativo Web Progressivo) de exemplo iniciando no Microsoft Edge, da seguinte maneira:

  1. No Microsoft Edge, selecione Configurações e mais (...) >Mais ferramentas>Aplicativos>Exibir aplicativos.

    A caixa de diálogo Aplicativos é aberta no Microsoft Edge, listando todos os PWAs instalados:

    Configurações do Edge Exibir > aplicativos listando o conversor de temperatura

  2. Clique com o botão direito do mouse no card conversor de temperatura e clique em Gerenciar aplicativo.

    A página Todos os apps / Conversor de temperatura é aberta, em edge://apps.

  3. Na parte inferior, clique no botão Desinstalar .

Continue com as etapas abaixo.

Etapa 12: modificar o exemplo

Você pode modificar o exemplo como um ponto de partida para seu próprio Aplicativo Web Progressivo (PWA). Você alterará o nome do aplicativo de "Conversor de temperatura" para "TC", em um branch de trabalho do repositório e, em seguida, instalará o aplicativo modificado localmente.

Crie um branch de trabalho e alterne para ele, da seguinte maneira:

  1. Abra o Visual Studio Code.

    Abra a pasta no VS Code

  2. No menu Arquivo , selecione Abrir Pasta.

    A caixa de diálogo Abrir Pasta é aberta.

  3. Navegue até a pasta de repositório Demos clonada, como C:\Users\localAccount\GitHub\Demos\, selecione a temperature-converter pasta dentro dela e clique no botão Selecionar Pasta .

  4. No painel do Explorer, abra \temperature-converter\index.html.

    O branch principal indicado no canto inferior esquerdo do VS Code

    No canto inferior esquerdo do Visual Studio Code, a ramificação principal é indicada.

    Criar um branch de trabalho e alternar para ele

  5. No Visual Studio Code, no menu Exibir, selecione Terminal.

  6. Pressione Ctrl+C.

    O servidor Web localhost (http-server) para, se estava em execução. O prompt mostra o caminho atual, como: PS C:\Users\localAccount\GitHub\Demos\temperature-converter>

    Não é necessário parar o servidor para modificar o código e exibir o resultado. Estamos apenas parando temporariamente o servidor no Terminal para retornar ao prompt, inserir alguns comandos git.

  7. Insira o seguinte comando para criar um branch de trabalho do repositório e alternar para ele:

    git checkout -b test1

    Se a ramificação já existir, o comando gerará: "fatal: uma ramificação chamada 'test1' já existe".

  8. Se a ramificação já existir, insira o seguinte comando para alternar para a ramificação:

    git checkout test1

    Exemplo de saída: Switched to a new branch 'test1'

    No canto inferior esquerdo do Visual Studio Code, a ramificação muda de main para test1.

  9. Feche o painel Terminal .

    No canto inferior esquerdo do Visual Studio Code, a ramificação test1 é indicada:

    O branch test1 indicado no canto inferior esquerdo do VS Code

    Modifique os arquivos

  10. No Visual Studio Code, no painel Explorer, abra /temperature-converter/index.html.

  11. Em index.html, altere o nome do aplicativo em duas linhas de "Conversor de temperatura" para "TC", da seguinte forma:

    Alterar de:

    <title>Temperature converter</title>
<meta name="application-name" content="Temperature converter">

    para:

    <title>TC</title>
<meta name="application-name" content="TC">

  12. Salve o arquivo.

  13. No painel do Explorer, abra /temperature-converter/manifest.json.

  14. Em manifest.json, altere o nome do aplicativo em duas linhas de "Conversor de temperatura" para "TC", da seguinte forma:

    Alterar de:

    "name": "Temperature converter",
"short_name": "Temperature converter",

    para:

    "name": "TC",
"short_name": "TC",

  15. Salve o arquivo.

Etapa 13: Exibir o aplicativo modificado no navegador

Exiba o aplicativo modificado no navegador, da seguinte maneira:

  1. No Visual Studio Code, no menu Exibir, selecione Terminal.

    Iniciar o servidor

    Paramos anteriormente o servidor web no Terminal, apenas para inserir alguns comandos git para alternar para um branch funcional.

  2. Digite o seguinte comando:

    npx http-server

    O servidor Web de desenvolvimento local é iniciado novamente.

    Exibir o aplicativo Web

  3. No Microsoft Edge, acesse http://localhost:8080 (ou uma URL equivalente que foi gerada no terminal, a npx http-server partir do comando).

  4. Atualize (F5) a página da Web.

    Isso não dá o resultado desejado. A atualização recarrega a página da Web do cache do navegador para que você veja o aplicativo que foi armazenado em cache antes nessa URL (o título da guia é Conversor de temperatura).

  5. Atualização forçada (Shift+F5) da página da Web.

    A atualização forçada mostra o conteúdo atual diretamente do servidor Web.

    O título da guia muda de Conversor de temperatura para TC:

    O aplicativo renomeado para TC no navegador

Etapa 14: Reinstalar o exemplo modificado como um aplicativo local

Instale o aplicativo modificado no localhost navegador para o dispositivo, da seguinte maneira:

  1. Continuando de cima: No Microsoft Edge, na barra de endereços, clique no aplicativo disponível. Instalar TC (O aplicativo ).

    Uma caixa de diálogo Instalar aplicativo TC é aberta no navegador:

    A caixa de diálogo

  2. Clique no botão Instalar .

    O aplicativo modificado é instalado localmente. A caixa de diálogo Aplicativo instalado é aberta dentro do aplicativo:

    Caixa de diálogo

  3. Clique no botão Permitir .

    Uma caixa de diálogo do Windows Apps pergunta "Deseja fixar o TC na barra de tarefas? Este pedido está vindo do TC."

  4. Clique no botão Sim .

    O ícone do aplicativo TC (o ícone TC na barra de tarefas do Windows) aparece na barra de tarefas do Windows.

    O aplicativo TC é exibido em sua própria janela e a barra de título agora lê TC:

    O aplicativo TC instalado em execução em sua própria janela

Etapa 15: desinstalar o aplicativo local modificado

Desinstale o aplicativo local modificado da seguinte maneira:

  1. Na janela do aplicativo TC, selecione Configurações e mais (...) >Configurações do aplicativo.

    No Microsoft Edge, a guia Aplicativos é aberta, exibindo detalhes sobre o aplicativo TC .

  2. Na parte inferior, clique no botão Desinstalar .

    A caixa de diálogo Desinstalar o aplicativo do Microsoft Edge em todos os dispositivos sincronizados? é aberta.

  3. Marque a caixa de seleção Excluir histórico e dados de aplicativos e clique no botão Desinstalar .

Etapa 16: interromper o servidor Web de desenvolvimento

  1. No Visual Studio Code, no menu Exibir, selecione Terminal.

  2. Pressione Ctrl+C.

    O servidor para, com a mensagem de saída: http-server stopped.

Este é o fim das etapas para o exemplo.

Acelerando o ciclo de modificação/reinstalação

Você pode pular algumas das etapas acima sempre que modificar o aplicativo, dependendo de quais arquivos você modificar:

  • Se você modificar um arquivo HTML, CSS ou o arquivo JavaScript principal, poderá ignorar a desinstalação e a reinstalação do aplicativo. Esvaziar o cache e atualizar a página é suficiente para recarregar as alterações de HTML, CSS e JavaScript.

  • Se você modificar o arquivo de manifesto, deverá desinstalar e reinstalar o aplicativo.

Botão PWA na barra de endereços

Após a instalação do aplicativo, se você for para o aplicativo Web no navegador, o botão PWA na barra de endereços será alterado de um botão Aplicativo disponível (ícone "Aplicativo disponível") para um botão Abrir no aplicativo (ícone Abrir no aplicativo).

Se você clicar no botão Abrir no aplicativo (Abrir no ícone do aplicativo.), a caixa de diálogo Abrir conversor de temperatura será aberta no navegador:

A caixa de diálogo

Próximas etapas

Em seguida, você pode:

  • Estude o código; consulte Arquivos de origem do conversor de temperatura.

  • Faça pequenas modificações adicionais no código da amostra.

  • Copie e cole todo o diretório /Demos/temperature-converter/ de exemplo e modifique o código para criar seu próprio Progressive Web App (PWA).

Confira também

Host local:

GitHub:

VS Code:

Git:

Node.js:

  • Last updated on