Um guia sobre como converter um site em Progressive Web App (PWA)

Em um período muito curto de tempo, os PWAs deixaram uma marca muito proeminente na indústria de aplicativos móveis.

O conceito, que o Google quer que você conheça , é um descanso para a indústria que continuamente tem feito as mesmas reclamações repetidas vezes –

Com relação a sites: velocidade de carregamento lenta e baixa taxa de ressonância

Com relação aos aplicativos móveis: aplicativos que ocupam muito espaço de memória, dependem da conexão de rede e os longos passos que os usuários terão que percorrer desde encontrar um aplicativo até começar a usá-lo.

Como os Progressive Web Apps (PWAs) são baixados diretamente de um site e executados como um site, os usuários são beneficiados de três maneiras:

• Eles economizam o tempo necessário para encontrar um aplicativo na loja, instalá-lo e, em seguida, fornecer informações para iniciá-lo
• Como os Progressive Web Apps funcionam como um site, eles ocupam um espaço mínimo de armazenamento do dispositivo e
• Como eles funcionam principalmente como um site, o conceito de cache é válido, o que permite que o aplicativo seja executado mesmo onde não há conexão de rede.

Razões para converter seu site existente para PWA

Além de oferecer esses benefícios óbvios aos usuários, os Progressive Web Apps – a combinação ideal de sites e aplicativos móveis – também surgiram como a fórmula econômica de sucesso nos negócios. É por isso que as pessoas estão ansiosas para converter a página da Web em aplicativo.

Os benefícios que os PWAs trazem para as empresas por serem facilmente detectáveis, ocupando menos espaço de memória, com baixo custo de desenvolvimento e, por último, executando offline em grande velocidade podem ser medidos observando a mudança nos números de crescimento dessas marcas famosas –

Histórias de sucesso como essas e muitas delas no setor são suficientes para fazer com que todos os negócios móveis modernos procurem a melhor empresa de desenvolvimento de aplicativos da Web progressivos e procurem maneiras de converter sites em PWA.

Se você também está planejando converter um site em um aplicativo da web progressivo e aproveitar todo o benefício de baixo custo de investimento que o conceito tem a oferecer, você está no lugar certo.

Aqui estão as etapas exatas para Como converter um site PHP em PWA ou como transformar um site em um aplicativo , conforme compartilhado pelo Google com nossa equipe de desenvolvedores de aplicativos da Web progressivos (uma das vantagens de ser uma das agências oficiais de desenvolvedores do Google) .

Mas a primeira coisa primeiro. Conheça os elementos necessários para criar o PWA a partir de um site ou se deseja transformar uma página da Web em um aplicativo.

Como transformar um site em PWA

Para converter o site em PWA , aqui estão as três coisas necessárias –

1. Um dispositivo Android conectado executando o Chrome 52 ou superior,
2. Uma compreensão básica do Git e Chrome DevTools,
3. O código de exemplo e
4. Um editor de texto

Depois de tê-los prontos, prepare-se para converter web em PWA ou converter site em aplicativo da web.

Etapa 1: carregar o URL

A primeira etapa na migração do seu site para o PWA é clonar o repositório GitHub a partir da linha de comando:

 $ git clone https://github.com/googlecodelabs/migrate-to-progressive-web-apps.git

Isso ajudará a desenvolver um diretório Migrate to PWA com o código completo para cada etapa. Para este codelab específico, carregue o arquivo de trabalho e faça as alterações nele.

Depois que seu código tiver sido verificado, use o 'Simple HTTP Server Application' para servir o arquivo de trabalho na porta 8887.

Depois disso, você poderá carregar a URL para converter o site em PWA.

Etapa 2: visualize o site no seu celular

Este é o segundo passo para transformar o site em um aplicativo web progressivo. Caso você tenha um dispositivo Android conectado à sua área de trabalho, digite isso em sua URL – chrome://inspect. Isso permitirá que você defina uma porta com a ajuda da porta que você escreveu antes para a mesma porta no dispositivo.

Pressione Enter para salvar.

Agora você poderá acessar a versão básica do seu site em – http://localhost:8887/ no telefone Android conectado.

Etapa 3: adicione as tags de cabeça modernas

Para converter o site em aplicativo móvel, a primeira coisa que você terá que fazer é tornar o site compatível com dispositivos móveis e, em segundo lugar, você terá que adicionar um manifesto de aplicativo da Web. O manifesto descreverá as meta-informações do site de forma que apareçam na tela inicial do usuário.

Se você não tem um sistema de templates, adicione estas linhas –

 <cabeça>

<meta name= “viewport” content=”width=device-width, user-scalable=no” />

<link rel= “manifesto” href= “manifest.json” />

</head>

• Viewport – A primeira linha consiste em uma meta tag que especifica a viewport. Este elemento irá ajudá-lo com a capacidade de resposta. Depois de escrever a linha de código, uma vez que você recarregar o site, você encontrará o site adequado ao seu dispositivo.
• Manifesto – Na segunda linha do seu código você fez referência ao arquivo – um movimento que é necessário para controlar como o site é adicionado às telas iniciais.

Feito isso, abra um editor de texto. É hora de escrever JSON. Na seção short_name, especifique o que será exibido na tela inicial e tente mantê-lo dentro de 15 caracteres .

Em seguida, salve seu arquivo como a nomenclatura manifest.json e recarregue a página no dispositivo Android e vá até o menu superior direito e opte por ' Adicionar à tela inicial '. Agora você poderá ver seu ícone na tela inicial!

Etapa 4: adicionar um Service Worker

Service Worker é o script em segundo plano que o navegador pode executar enquanto o usuário não está na página. É o elemento que dá suporte offline e fica ativo quando a notificação é enviada.

Criar um Service Worker

Copie esse código em um novo arquivo e salve-o como sw.js.

 /** Um service worker vazio! */

self.addEventListener ('buscar', função(evento)

{

/** Um manipulador de busca vazio! */

});

E é isso.

Registrar o Service Worker

Você terá que registrar o código no código do seu site para transformar a página da web em aplicativo, para isso, abra seu arquivo site.js e cole-o –

 navigator.serviceWorker && navigator.serviceWorker.register('./sw.js').then(function(registration) { console.log('Excelente, registrado com escopo: ', registration.scope);});

Agora, o código será executado em cada carregamento de página. Verifique se está funcionando corretamente recarregando a página e verificando – chrome://serviceworker-internals/

Agora, seu site poderá solicitar aos usuários que o instalem em suas telas iniciais e, em segundo lugar, você poderá tornar seu site capaz de suportar notificações push e até mesmo trabalhar offline.

Etapa 5: faça o site funcionar offline

O primeiro passo seria abrir o script sw.js e obter o objeto de cache. Depois de ter isso, atualize o código e aplique todo o site para cache.

Experimente como está funcionando agora. Desinstale o aplicativo atual e carregue-o no Chrome. Em seguida, atualize a página e selecione ' Adicionar à tela inicial ' no menu do canto direito.

Para cumprir a regra de que quando o Service Worker muda, a página deve ser recarregada e reinstalada, tudo o que você precisa fazer é adicionar um componente que tenha a 'versão' do service worker. Quando isso muda, o movimento de instalação acontece novamente, armazenando em cache os recursos que teriam sido alterados.

Parabéns, agora você sabe como converter um aplicativo da Web para PWA e, se seguiu as etapas lado a lado, já migrou seu site para um Progressive Web App!

*Isenção de responsabilidade*: Essas etapas darão a você, desenvolvedor, uma ideia exata de como você terá que preencher as lacunas e passar do Ponto A no processo para o Ponto C. Se você estiver lendo isso como um empreendedor entusiasmado que deseja converter wordpress para aplicativo da web progressivo ou quiser fazer um aplicativo de um site, eu diria, não faça isso sem ter o suporte de um provedor de serviços de desenvolvimento de aplicativos progressivos experiente.

Embora essas etapas sejam explicativas sobre como transformar um site em aplicativo ou converter um aplicativo da Web em um aplicativo da Web progressivo, há vários elementos que surgem como parte do processo quando você participa do processo de desenvolvimento real . Portanto, em vez de tentar as etapas para criar um aplicativo a partir do site e encontrar um resultado diferente porque você não tinha certeza dos elementos entre as linhas, dê o trabalho a uma empresa de desenvolvimento de PWA que tenha especialização no domínio. Os especialistas responderão a todas as perguntas relacionadas a como converter um site em um aplicativo, como transformar um site em um aplicativo.