FC 15115 :: Como criar um app da loja para celular?
O PWA (Progressive Web Apps) é utilizado para a loja ser instalada como um aplicativo de smartphone.
Ao acessar a loja pelo navegador, será apresentada uma opção no rodapé para instalar seu aplicativo. Se o visitante clicar e aceitar a instalação, será incluído o ícone do app na home do celular.
Após instalar e acessar o site ou o aplicativo da loja, ela se abrirá mais rapidamente e em tela cheia, sem a barra de endereços do navegador.
Veja exemplo nos prints abaixo:
Acesse pequenaitalia.com.br usando um celular Android para experimentar o aplicativo da loja acima.
ATENÇÃO: Para acompanhar os acessos e vendas provenientes do aplicativo da loja, utilize os relatórios do parceiro Store PWA, adicionado automaticamente à lista de parceiros da loja.
PERSONALIZAÇÃO
Os seguintes itens são utilizados no PWA:
1) /manifest.json
Ex: www.pequenaitalia.com.br/manifest.json
Contém o nome e a descrição do app, os ícones, o modo de tela etc. Para personalizar, basta baixar o arquivo do link acima, alterar conforme desejado e enviar o novo arquivo para a pasta /htm/js da loja com o nome manifest.js. Este arquivo personalizado será exibido na URL /manifest.json.
Este arquivo é referenciado automaticamente no <head> da loja através da linha abaixo:
<link rel="manifest" href="/manifest.json">
OBS: A linha acima é inserida automaticamente no <head> da loja. Para que isto não ocorra, o lojista deverá inserir a flag <NoAutoPWA> no campo de headers adicionais da loja ou colocar a linha acima neste campo.
2) Javascript de ativação da service worker (/sw-activate.js):
Ex: www.pequenaitalia.com.br/sw-activate.js
Para ativar outras funcionalidades do PWA (ex: app cache, push notifications etc), é necessário criar e ativar um service worker, que é um arquivo javascript que é instalado no celular e funciona até mesmo offline (celular sem internet).
Para instalar este código, o seguinte script é incluído logo após o link do manifest.json:
<script>if("serviceWorker" in navigator)navigator.serviceWorker.register("/service-worker.js").catch(err=>console.log("Service worker not registered",err));</script>
OBS: A linha acima é inserida automaticamente no <head> da loja. Para que isto não ocorra, o lojista deverá inserir a flag <NoAutoPWA> no campo de headers adicionais da loja.
O arquivo /sw-activate.js contém o código acima e poderá ser usado pela loja para executar a ativação ou como modelo para personalizá-la.
3) /service-worker.js
Ex: www.pequenaitalia.com.br/service-worker.js
Este arquivo é referenciado no javascript de ativação da loja do item 2 acima, no trecho "/service-worker.js".
O arquivo acima contém apenas a seguinte linha, que apenas instala e ativa o service worker:
self.addEventListener("install",function(){});self.addEventListener("fetch",function(){});self.addEventListener("activate",function(){});
Para personalizar, basta baixar o arquivo do link acima, alterar conforme desejado e enviar o novo arquivo para a pasta /htm/js da loja com o nome service-worker.js. Este arquivo personalizado será exibido na URL /service-worker.js.
4) Personalização dos ícones no Android
É desejável que a loja personalize seus ícones de aplicativo. Para isso, o recomendável é utilizar 5 ícones quadrados:
/images/pwa-icon-512-mask.png
/images/pwa-icon-192-mask.png
/images/pwa-icon-512.png
/images/pwa-icon-192.png
/images/pwa-icon.svg
OBS 1: O único arquivo .svg acima deve ter o width="512" e height="512" definidos na sua tag <svg>.
OBS 2: Os números nos nomes dos demais arquivos representam a resolução do arquivo. Por exemplo, o primeiro é 512x512.
OBS 3: Os arquivos acima com o nome -mask usam apenas 40% da área total da imagem, para seu conteúdo não ser "capado" pelo celular ao criar o ícone do app. O termo -mask vem de "maskable", que é o atributo do ícone -mask no nosso /manifest.json.
Para criar os arquivos a partir de um svg ou png, recomendamos usar o editor online maskable.app/editor
5) Personalização dos ícones no iPhone
O PWA no iOS usa os arquivos favicon.ico, favicon.png e favicon.svg, que devem existir na pasta /images da loja.
Se estes arquivos existirem na pasta /images mas os ícones não forem exibidos, inclua as seguintes linhas no campo DADOS DA LOJA > Navegação e SEO > Header HTML adicional:
<link rel="icon" href="<storepath>images/favicon.ico" sizes="any"> <link rel="icon" href="<storepath>images/favicon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="<storepath>images/favicon.png">
Para criar os arquivos a partir de um svg ou png, recomendamos usar o editor online maskable.app/editor
6) Personalização da cor no topo do celular
É possível personalizar a cor de fundo no topo do celular ao usar o app. Neste topo são exibidos o relógio, os níveis de sinal de rede etc. Para personalizar, inclua ou altere a seguinte linha no campo DADOS DA LOJA > Navegação e SEO > Header HTML adicional:
<meta name="theme-color" content="#d90000">
No exemplo acima, será utilizada a cor vermelha na barra de topo. Altere #d90000 para o código RGB hexadecimal da cor desejada.
Saiba mais:
Como adicionar seu Progressive Web App ao Google Play
|
