Compartilhar via

Exemplo de conversor de temperatura

O exemplo de conversor de temperatura é uma Aplicação Web Progressiva (PWA) que demonstra as noções básicas sobre como criar um PWA. Pode modificar este exemplo para começar a criar o seu próprio PWA.

Este artigo aborda como obter o exemplo, instalá-lo no Windows, executar o exemplo e modificá-lo. Este exemplo funciona com vários sistemas operativos, incluindo o Windows. Este artigo fornece passos para o Windows; outras plataformas têm passos semelhantes.

Veja também:

Passo 1: Pré-visualizar a aplicação em execução numa janela do browser

Para examinar a interface de utilizador da aplicação:

  1. No Microsoft Edge, aceda à aplicação Web de exemplo de Conversor de temperatura dinâmica numa nova janela ou separador (alojada em github.io):

    O PWA como uma aplicação Web no browser, servido a partir de github.io

    O exemplo de Aplicação Web Progressiva (PWA) é apresentado inicialmente no browser, como uma aplicação Web, mas também tem um botão Aplicação disponível (ícone de Aplicação disponível) na Barra de endereço (ainda não clique na mesma).

  2. Na caixa de texto temperatura , escreva 22.

    A temperatura apresentada muda para 71,6 F.

  3. Clique na lista pendente de e, em seguida, clique fora da mesma.

  4. Clique na lista pendente para e, em seguida, clique fora da mesma.

    As unidades disponíveis são:

    • Celsius
    • Fahrenheit
    • Kelvin

  5. Feche o separador do browser da aplicação.

Num passo posterior, após a instalação do exemplo de Aplicação Web Progressiva (PWA) como uma aplicação local, a aplicação é executada na sua própria janela:

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

O exemplo é uma Aplicação Web Progressiva, em vez de um site normal. Por conseguinte, pode instalar a Aplicação Web Progressiva (PWA) como uma aplicação no dispositivo e a janela da aplicação contém a mesma IU da aplicação que no browser completo.

A janela da aplicação instalada é uma janela baseada no browser, sem a maioria da IU do browser. A aplicação instalada está integrada na IU do dispositivo, como a barra de tarefas do Windows e o menu Iniciar do Windows.

A instância acima da aplicação de exemplo está alojada em github.io. Nas secções abaixo, utilize um servidor local para mostrar como testar localmente uma Aplicação Web Progressiva (PWA) enquanto o desenvolve. Em alternativa, irá aceder à aplicação Web a partir do servidor local (localhost) e instalá-la no seu dispositivo a partir daí.

Passo 2: Instalar Visual Studio Code

Visual Studio Code permite ver o código de exemplo, modificar o exemplo e criar a sua própria Aplicação Web Progressiva (PWA) com o exemplo como ponto de partida.

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

  1. Prima a tecla Windows, introduza Visual Studio Code e, em seguida, clique em Abrir.

  2. Se Visual Studio Code não estiver instalado, aceda a Visual Studio Code e, em seguida, transfira-o e instale-o.

Passo 3: Instalar o git

Instale ou atualize o git da seguinte forma:

  1. Abra o Visual Studio Code.

  2. No menu Ver , selecione Terminal.

  3. Introduza o comando: git -v

    Se o git estiver instalado, é apresentado um número de versão, como git version 2.51.0.windows.2.

  4. Aceda a Transferências em git-scm.com.

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

  5. Se o git ainda não estiver instalado ou quiser atualizá-lo, transfira e instale a versão mais recente do git, a partir de Transferências em git-scm.com. Caso contrário, avance para a secção seguinte, abaixo.

  6. Durante a instalação, pode aceitar as predefinições, exceto que é recomendado alterar o editor predefinido de vim para Visual Studio Code:

    instalador do git com Visual Studio Code selecionado como editor predefinido

Passo 4: Instalar Node.js

Node.js inclui um servidor Web que irá utilizar para executar e testar o exemplo localmente.

Instale ou atualize Node.js, da seguinte forma:

  1. Abra o Visual Studio Code.

  2. No menu Ver , selecione Terminal.

  3. Introduza o comando: node -v

    Se Node.js tiver sido instalado, é apresentado um número de versão, como v22.19.0.

  4. Aceda a Node.js.

  5. No canto inferior esquerdo, no botão LTS Mais Recente , anote o número da versão, como v22.20.0.

  6. Se Node.js ainda não estiver instalada ou quiser atualizá-la, clique no botão Obter Node.js . Caso contrário, avance para a secção seguinte, abaixo.

    Acaba numa página como Transferir Node.js.

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

    A janela Transferências do Microsoft Edge é aberta e apresenta um nome de ficheiro como node-v22.20.0-x64.msi.

  8. Clique na ligação abrir ficheiro sob o nome do ficheiro.

    É aberta a janelaNode.js Assistente de Configuração .

  9. Clique no botão Seguinte e siga as instruções. Pode aceitar as predefinições e, em seguida, clicar no botão Instalar .

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

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

    É apresentado o número da versão mais recente, como v22.20.0.

Passo 5: Bifurque e clone o repositório "MicrosoftEdge/Demos"

Em seguida, irá obter uma cópia local do código de exemplo, através da bifurcação do repositório do Microsoft Edge/Demos. Uma vez que não tem permissões para emitir diretamente consolidações para o repositório open-source Demos, irá criar a sua própria cópia do repositório em vez de clonar o repositório Demos.

Poderá conseguir transferir o ramo "principal" do repositório Demos e editar os ficheiros no ramo "principal", em vez de forcar e clonar o repositório e, em seguida, criar um ramo de trabalho (test1) no qual editar os ficheiros. Este artigo mostra a forma mais complexa, mas flexível: criar forks do repositório.

Fork e clone o repositório MicrosoftEdge/Demos , da seguinte forma:

  1. Prima Windows+E.

    Explorador de Arquivos é aberto.

    Verifique se o repositório Demos foi clonado:

  2. Navegue para onde pretende clonar o repositório, como:

    C:\Users\localAccount\GitHub\

    Se o repositório ainda não tiver sido clonado, como C:\Users\localAccount\GitHub\Demos\, efetue os seguintes passos; caso contrário, avance para a secção seguinte.

    Fork do repositório:

  3. Abra o repositório MicrosoftEdge/Demos numa nova janela ou separador.

  4. No canto superior direito, clique na seta para baixo no botão Fork e, em seguida, selecione Criar um novo fork.

    Para obter mais informações, veja Forking a repository in Fork a repository in GitHub Docs (Criar um fork de um repositório no GitHub Docs).

  5. Clique no botão Criar fork .

    Clone o fork para a unidade local:

  6. No GitHub, navegue para o fork do repositório MicrosoftEdge/Demos .

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

  8. No separador HTTPS, clique no botão Copiar para a área de transferência (copiar para a área de transferência).

  9. Abra o Visual Studio Code.

  10. No menu Ver , selecione Terminal.

  11. Mude para o diretório onde pretende clonar o repositório Demos:

    cd ~/GitHub

    Em alternativa, introduza o seguinte comando, especificando a sua conta local:

    cd c:/users/localAccount/GitHub/

  12. Escreva git clonee, em seguida, cole o URL que copiou anteriormente. Terá o seguinte aspeto, com o seu nome de utilizador do GitHub em vez de YOUR-USERNAME:

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

  13. Pressione Enter.

    É criado um clone local do seu repositório de Demos bifurcado.

Veja também:

Passo 6: executar o PWA como uma aplicação Web no servidor Web local

Em seguida, irá executar e testar o exemplo de Aplicação Web Progressiva (PWA) no seu servidor Web local, no Microsoft Edge. Irá utilizar http-servero , um servidor Web de desenvolvimento local que pode ser executado no Node.js.

Ao desenvolver ou testar um site ou aplicação, incluindo um PWA, pode utilizar um servidor Web local. No entanto, quando a aplicação estiver pronta para os utilizadores, implemente a aplicação na Web através de um fornecedor de alojamento Web. Tal como um site ou aplicação normal, um PWA é distribuído aos utilizadores através de um servidor Web.

Mude para o /temperature-converter/ diretório do repositório de Demonstrações clonado e comece a http-server partir daí, da seguinte forma:

  1. Abra o Visual Studio Code.

  2. No menu Ficheiro , selecione Abrir Pasta.

    A caixa de diálogo Abrir Pasta é aberta.

  3. Navegue para a pasta de repositório Demos clonada, como C:\Users\localAccount\GitHub\Demos\, selecione a \temperature-converter\ pasta na mesma e, em seguida, clique no botão Selecionar Pasta .

  4. No menu Ver , selecione Terminal.

    O painel Terminal é aberto, com a linha de comandos em Demos\temperature-converter\, como C:\users\localAccount\GitHub\Demos\temperature-converter.

  5. Introduza o seguinte comando:

    npx http-server

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

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

  6. Se receber um erro "A execução de scripts está desativada" (se o Terminal do VS Code estiver a utilizar o PowerShell), introduza o comando do PowerShell da política de execução e, em seguida, emita novamente o comando npx:

    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, prima Y e , em seguida, Enter.

    O resultado é apresentado, 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, aceda a (ou a http://localhost:8080 um URL equivalente que foi produzido no terminal, a npx http-server partir do comando).

    A aplicação conversor de temperatura é apresentada no browser:

    A aplicação conversor de temperatura no browser no localhost

Passo 7: Instalar o PWA a partir do servidor Web localhost como uma aplicação local

Instale o exemplo de Aplicação Web Progressiva (PWA) a partir do servidor Web localhost como uma aplicação no Windows, da seguinte forma:

  1. Na Barra de endereço, clique na Aplicação disponível. Botão Instalar conversor de temperatura (ícone disponível da aplicação).).

    É aberta uma caixa de diálogo Instalar aplicação :

    O pedido de instalação

  2. Clique no botão Instalar .

    A aplicação é instalada localmente. A caixa de diálogo Aplicação instalada é aberta na aplicação:

    A caixa de diálogo Aplicação instalada

  3. Clique no botão Permitir .

    Uma caixa de diálogo do Windows Apps pergunta "Pretende afixar o Conversor de temperatura na barra de tarefas? Este pedido vem do conversor de Temperatura."

  4. Clique no botão Sim .

    O ícone da aplicação Conversor de temperatura (o ícone ) é apresentado na barra de tarefas do Windows.

    A aplicação Conversor de temperatura é apresentada na janela da sua própria aplicação:

    A aplicação de conversor de Temperatura instalada em execução na sua própria janela

    A janela é uma janela do browser sem a maior parte da IU do browser.

  5. Feche a janela da aplicação Conversor de temperatura .

Passo 8: Abrir a aplicação instalada

Execute o exemplo de Aplicação Web Progressiva (PWA) como uma aplicação local no dispositivo.

  1. Prima a tecla Windows , comece a escrever Conversor de temperatura e, em seguida, clique em Abrir.

    A aplicação de conversor temperatura instalada é aberta na sua própria janela.

    Uma vez que instalou a aplicação a partir de localhost, quando inicia a aplicação, o lado direito da barra de título apresenta localhost:8080 durante alguns segundos:

    O exemplo instalado de Aplicação Web Progressiva (PWA) instalado a partir do localhost

    Se tivesse instalado a aplicação a github.io partir do servidor, quando iniciasse a aplicação, o lado direito da barra de título apresentaria microsoftedge.github.io durante alguns segundos:

    O exemplo instalado de Aplicação Web Progressiva (PWA) instalado a partir do servidor github.io

    Também pode abrir a aplicação instalada por outras formas suportadas pelo dispositivo, como o conversor de temperatura (o ícone ) afixado à barra de tarefas do Windows.

  2. Na caixa de texto temperatura , introduza 22.

    A temperatura apresentada é atualizada para 71,6 F.

  3. Clique nas listas pendentes de e para .

    As unidades disponíveis são:

    • Celsius
    • Fahrenheit
    • Kelvin

Passo 9: Examinar o processamento da colocação em cache offline da função de trabalho de serviço

A janela da aplicação local para uma Aplicação Web Progressiva (PWA) é uma janela baseada no browser, pelo que as DevTools do Microsoft Edge podem ser utilizadas para trabalhar com o PWA.

Confirme que a função de trabalho de serviço (sw.js) está em execução quando abre o PWA como uma aplicação local, da seguinte forma:

  1. Abra a aplicação de conversor temperatura instalada.

  2. Clique com o botão direito do rato na janela da aplicação (abaixo da barra de título) e, em seguida, selecione Inspecionar.

    As DevTools são abertas numa janela separada; desancorada. (Outras opções de ancoragem estão desativadas e não estão disponíveis.) A janela da aplicação é uma janela do browser que inclui o comando Inspecionar DevTools.

  3. Em DevTools, selecione a ferramenta Aplicação (ícone da aplicação).

  4. Na árvore à esquerda, na secção Aplicação , selecione Funções de trabalho do serviço.

    São apresentadas informações sobre a função de trabalho de serviço:

    O PWA como uma aplicação local instalada, com DevTools a mostrar o painel Funções de trabalho do serviço, com a função de trabalho sw.js em execução

    A Origem da função de trabalho de serviço é sw.js, com Estadoativado e em execução.

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

    Aplicação instalada: Armazenamento em cache da ferramenta > de Aplicação DevTools>, que mostra os recursos em cache

    A cache da função de trabalho de serviço é apresentada. Todos os recursos que são colocados em cache pela função de trabalho de serviço (ou colocados automaticamente em cache pelo browser) são listados:

    • / (index.html) - A página Web HTML da aplicação, que define o esquema de controlos.
    • /converter.css - O estilo da página Web da aplicação.
    • /converter.js - O ficheiro JavaScript que contém a lógica da aplicação.
    • /icon512.png - O ficheiro de imagem do ícone da aplicação para representar a aplicação.
    • /manifest.json - O manifesto da aplicação, que contém informações básicas sobre a aplicação, para o sistema operativo do dispositivo utilizar.

    A função de trabalho de serviço adiciona três ficheiros à cache, explicitamente (.html, .css, e .js). O ícone (.png) e o manifesto (.json) são colocados em cache automaticamente pelo browser.

Passo 10: Utilizar DevTools para desativar a ligação à Internet e testar o PWA offline

Experimente a Aplicação Web Progressiva (PWA) como uma aplicação offline, da seguinte forma:

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

  2. Junto à parte superior, no menu Limitação à direita da caixa de verificação Desativar cache , altere de Sem limitação para Offline:

    A janela DevTools a mostrar onde mudar o valor de Limitação para Offline

    O separador Rede adiciona um ícone de aviso para lembrá-lo desta limitação.

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

  4. Na caixa de texto temperatura , escreva 22.

    A temperatura apresentada muda para 71,6 F. A aplicação continua a ser apresentada corretamente e continua a funcionar corretamente ao utilizar recursos em cache localmente geridos pela função de trabalho de serviço.

  5. Na janela DevTools, no menu Limitação à direita da caixa de verificação Desativar cache , altere de Offline novamente para Sem limitação.

    O ícone de aviso de limitação é removido do separador Rede .

  6. Feche a janela DevTools.

  7. Feche a janela da aplicação Conversor de temperatura .

Esta mesma utilização de DevTools também funciona quando a aplicação está no Microsoft Edge como uma aplicação Web, em vez de uma aplicação instalada. Para obter mais informações, veja Emular offline na Referência de funcionalidades de rede.

Passo 11: Desinstalar a aplicação instalada

Desinstale a Aplicação Web Progressiva (PWA), da seguinte forma:

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

    É aberta a aplicação conversor de Temperatura instalada.

  2. Na barra de título, clique no botão Definições e muito mais (Definições e mais na barra de título azul escuro) e, em seguida, clique em Definições da aplicação.

    No Microsoft Edge, o separador Aplicações é aberto (edge://apps), apresentando detalhes sobre a aplicação Conversor de temperatura :

    O botão Desinstalar na página Aplicações do Microsoft Edge

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

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

  4. Selecione a caixa de verificação Eliminar histórico de aplicações e dados e, em seguida, clique no botão Desinstalar .

Desinstalar uma aplicação local a partir do menu Iniciar do Windows

Nota: como exemplo de integração do SO, pode desinstalar a aplicação através do menu Iniciar do Windows, da seguinte forma:

  1. Prima a tecla Windows .

  2. Comece a escrever "conversor de temperatura".

  3. Clique em Desinstalar:

    Menu Iniciar do Windows a mostrar o comando Desinstalar da aplicação

Desinstalar uma aplicação local a partir do Microsoft Edge

Nota: como alternativa, pode desinstalar o exemplo de Aplicação Web Progressiva (PWA) a partir do Microsoft Edge, da seguinte forma:

  1. No Microsoft Edge, selecione Definições e muito mais (...) >Mais ferramentas>Aplicações>Ver aplicações.

    A caixa de diálogo Aplicações é aberta no Microsoft Edge, listando quaisquer PWAs instalados:

    Definições > do Edge Ver aplicações que listam o conversor de temperatura

  2. Clique com o botão direito do rato no conversor de temperatura card e, em seguida, clique em Gerir aplicação.

    É aberta a página Todas as aplicações/Conversor de temperatura , em edge://apps.

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

Continue com os passos abaixo.

Passo 12: Modificar o exemplo

Pode modificar o exemplo como um ponto de partida para a sua própria Aplicação Web Progressiva (PWA). Irá alterar o nome da aplicação de "Conversor de temperatura" para "TC", num ramo de trabalho do repositório e, em seguida, instalar a aplicação modificada localmente.

Crie um ramo de trabalho e mude para o mesmo, da seguinte forma:

  1. Abra o Visual Studio Code.

    Abrir a pasta no VS Code

  2. No menu Ficheiro , selecione Abrir Pasta.

    A caixa de diálogo Abrir Pasta é aberta.

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

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

    O ramo principal indicado no canto inferior esquerdo do VS Code

    No canto inferior esquerdo do Visual Studio Code, é indicado o ramo principal.

    Criar um ramo de trabalho e mudar para o mesmo

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

  6. Prima Ctrl+C.

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

    Não é necessário parar o servidor, modificar o código e ver o resultado. Estamos apenas temporariamente a parar o servidor no Terminal para regressar à linha de comandos, para introduzir alguns comandos git.

  7. Introduza o seguinte comando para criar um ramo de trabalho do repositório e mudar para o mesmo:

    git checkout -b test1

    Se o ramo já existir, o comando produz: "fatal: já existe um ramo com o nome "test1".

  8. Se o ramo já existir, introduza o seguinte comando para mudar para o ramo:

    git checkout test1

    Saída de exemplo: Switched to a new branch 'test1'

    No canto inferior esquerdo do Visual Studio Code, o ramo muda de principal para test1.

  9. Feche o painel Terminal .

    No canto inferior esquerdo do Visual Studio Code, o ramo test1 é indicado:

    O ramo test1 indicado no canto inferior esquerdo do VS Code

    Modificar os ficheiros

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

  11. Em index.html, altere o nome da aplicação 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 Explorer, abra /temperature-converter/manifest.json.

  14. Em manifest.json, altere o nome da aplicação 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.

Passo 13: Ver a aplicação modificada no browser

Veja a aplicação modificada no browser da seguinte forma:

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

    Iniciar o servidor

    Anteriormente, interrompemos o servidor Web no Terminal, apenas para introduzir alguns comandos git para mudar para um ramo de trabalho.

  2. Introduza o seguinte comando:

    npx http-server

    O servidor Web de desenvolvimento local é iniciado novamente.

    Ver a aplicação Web

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

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

    Isto não dá o resultado pretendido. A atualização recarrega a página Web a partir da cache do browser, para que veja a aplicação que foi colocada em cache antes nesse URL (o título do separador é Conversor de temperatura).

  5. Atualização rígida (Shift+F5) da página Web.

    A atualização fixa mostra o conteúdo atual diretamente a partir do servidor Web.

    O título do separador muda de Conversor de temperatura para TC:

    O nome da aplicação foi mudado para TC no browser

Passo 14: reinstalar o exemplo modificado como uma aplicação local

Instale a aplicação modificada a partir do localhost browser no dispositivo, da seguinte forma:

  1. Continuar a partir de cima: no Microsoft Edge, na Barra de endereço, clique na Aplicação disponível. Instale o TC (a ).

    É aberta uma caixa de diálogo Instalar aplicação TC no browser:

    A caixa de diálogo

  2. Clique no botão Instalar .

    A aplicação modificada é instalada localmente. A caixa de diálogo Aplicação instalada é aberta na aplicação:

    A caixa de diálogo Aplicação instalada

  3. Clique no botão Permitir .

    Uma caixa de diálogo do Windows Apps pergunta "Pretende afixar TC à barra de tarefas? Este pedido é proveniente do TC."

  4. Clique no botão Sim .

    O ícone da aplicação TC (o ícone TC na barra de tarefas do Windows) é apresentado na barra de tarefas do Windows.

    A aplicação TC é apresentada na sua própria janela e a barra de título agora lê TC:

    A aplicação TC instalada em execução na sua própria janela

Passo 15: Desinstalar a aplicação local modificada

Desinstale a aplicação local modificada da seguinte forma:

  1. Na janela da aplicação TC, selecione Definições e muito mais (...) >Definições da aplicação.

    No Microsoft Edge, o separador Aplicações é aberto e apresenta detalhes sobre a aplicação TC .

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

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

  3. Selecione a caixa de verificação Eliminar histórico de aplicações e dados e, em seguida, clique no botão Desinstalar .

Passo 16: Parar o servidor Web de desenvolvimento

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

  2. Prima Ctrl+C.

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

Este é o fim dos passos para o exemplo.

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

Pode ignorar alguns dos passos acima sempre que modificar a aplicação, consoante os ficheiros que modificar:

  • Se modificar um ficheiro HTML, um ficheiro CSS ou o ficheiro JavaScript principal, pode ignorar a desinstalação e reinstalação da aplicação. Empyting the cache and refreshing the page is enough to reload HTML, CSS, and JavaScript changes.

  • Se modificar o ficheiro de manifesto, tem de desinstalar e reinstalar a aplicação.

Botão PWA na Barra de endereço

Após a instalação da aplicação, se aceder à aplicação Web no browser, o botão PWA na Barra de endereço foi alterado de um botão Aplicação disponível (ícone ) para um botão Abrir na aplicação (ícone Abrir na aplicação).

Se clicar no botão Abrir na aplicação (ícone Abrir na aplicação).), a caixa de diálogo Abrir Conversor de temperatura é aberta no browser:

A caixa de diálogo

Próximas etapas

Em seguida, pode:

  • Estudar o código; veja Ficheiros de origem do conversor de temperatura.

  • Efetue pequenas modificações adicionais do código do exemplo.

  • Copie e cole todo o diretório de /Demos/temperature-converter/ exemplo e modifique o código para criar a sua própria Aplicação Web Progressiva (PWA).

Confira também

Localhost:

GitHub:

VS Code:

git:

Node.js:

  • Last updated on