{"id":815762,"date":"2020-06-22T04:38:23","date_gmt":"2020-06-22T04:38:23","guid":{"rendered":"https:\/\/www.knowband.com\/blog\/?p=805654\/"},"modified":"2022-08-13T12:01:14","modified_gmt":"2021-02-22T14:48:55","slug":"woocommerce-pwa-mobile-app-user-manual","status":"publish","type":"post","link":"https:\/\/www.knowband.com\/blog\/pt-br\/manual-do-usuario\/woocommerce-pwa-mobile-app-user-manual\/","title":{"rendered":"WooCommerce PWA Mobile App – User Manual"},"content":{"rendered":"

<\/head><\/p>\n

1.0 Introdu\u00e7\u00e3o<\/h2>\n

Este plug-in pronto \u00e9 projetado e desenvolvido pela KnowBand para converter sua loja WooCommerce em execu\u00e7\u00e3o em um aplicativo da Web progressivo rico em recursos. Depois que a loja de com\u00e9rcio eletr\u00f4nico for transformada em aplicativo PWA, sempre que qualquer usu\u00e1rio abrir a URL da loja no navegador m\u00f3vel, a pessoa em quest\u00e3o ser\u00e1 solicitada a “Adicionar PWA \u00e0 tela inicial”. Uma vez que o WooCommerce PWA Mobile App \u00e9 adicionado \u00e0 tela inicial do dispositivo m\u00f3vel, o usu\u00e1rio pode navegar na loja no aplicativo como qualquer outro aplicativo. O WooCommerce PWA Mobile App \u00e9 um aplicativo da web que, na verdade, n\u00e3o depende da publica\u00e7\u00e3o de aplicativos no Google Play e na Apple App Store. Os usu\u00e1rios podem simplesmente adicionar o Progressive Web App ao dispositivo m\u00f3vel e usar como qualquer outro aplicativo.<\/p>\n

1.1 Recursos atraentes para escolher o WooCommerce PWA:<\/h3>\n

– Carregamento mais r\u00e1pido e desempenho r\u00e1pido – Tela inicial totalmente personaliz\u00e1vel com o editor DIY – Suporte a todos os m\u00e9todos de envio e pagamento do site – Interface amig\u00e1vel e envolvente – Sem depend\u00eancia de lojas de aplicativos – Totalmente marca para sua loja – E-mail e login social (Google e Facebook ) – Suporte multil\u00edngue e RTL – Funcionamento no modo offline – Sincroniza\u00e7\u00e3o ao vivo b\/w site e aplicativo – Compat\u00edvel com Android e iOS – Check-out de uma p\u00e1gina – Aplicativo leve – Gerenciamento de p\u00e1ginas CMS<\/p>\n

1.2 Veja a demonstra\u00e7\u00e3o do WooCommerce PWA<\/h3>\n

Explore o m\u00f3dulo e os recursos do aplicativo PWA nos links de demonstra\u00e7\u00e3o abaixo:<\/p>\n

Painel de administra\u00e7\u00e3o do m\u00f3dulo:<\/strong> https:\/\/wcdemo1.knowband.com\/pwa\/wp-login.php<\/a>
\nApp de demonstra\u00e7\u00e3o PWA:<\/strong> https:\/\/wcdemo1.knowband.com\/pwa\/pwa-app\/<\/a>
\nNota-<\/strong>\ufffdCopie e cole o URL no navegador m\u00f3vel e “Adicionar \u00e0 tela inicial”.<\/p>\n

[IMP] Notas para iOS:<\/h4>\n

\ufffd> Os dispositivos iOS n\u00e3o oferecem nenhum prompt embutido “Adicionar \u00e0 tela inicial”, portanto, os usu\u00e1rios precisam adicionar manualmente o PWA Mobile App \u00e0 tela inicial do iPhone ou iPad. \ufffd> iOS n\u00e3o suporta notifica\u00e7\u00f5es push da web. Portanto, as notifica\u00e7\u00f5es push n\u00e3o ser\u00e3o recebidas no PWA instalado no iPhone ou iPad.<\/p>\n

[NOVA ATUALIZA\u00c7\u00c3O]\ufffdWooCommerce\ufffdPWA suporta scripts de linguagem RTL:<\/h4>\n

O criador do WooCommerce Progressive Web App agora suporta todos os idiomas do mundo, incluindo RTL (direita para a esquerda), como \u00e1rabe, hebraico, persa, etc. O administrador da loja agora pode at\u00e9 adicionar idiomas RTL no WooCommerce PWA Mobile App.<\/p>\n

2.0 Telas do painel de administra\u00e7\u00e3o:<\/h2>\n

Explore todas as configura\u00e7\u00f5es no Painel de administra\u00e7\u00e3o do WooCommerce PWA Mobile App e verifique como elas funcionam com a ajuda abaixo das capturas de tela detalhadas:<\/p>\n

Configura\u00e7\u00f5es gerais do 2.1:<\/h3>\n

\"Gerais-configura\u00e7\u00f5es\"<\/p>\n

a) Mostrar \/ ocultar visualiza\u00e7\u00e3o:<\/strong> Toque no bot\u00e3o de olho para exibir \/ ocultar a visualiza\u00e7\u00e3o do telefone no painel de administra\u00e7\u00e3o.
\nb) Ativar\/Desativar:<\/strong> Habilite o m\u00f3dulo para PWA funcionar em dispositivos m\u00f3veis.
\nc) Habilitar relat\u00f3rio de log de solicita\u00e7\u00e3o:<\/strong> Habilite o log de erros no celular.
\nd) Redirecionar na p\u00e1gina do carrinho quando adicionar ao carrinho:<\/strong> Controle o redirecionamento do bot\u00e3o Adicionar ao carrinho sempre que qualquer usu\u00e1rio tocar no bot\u00e3o Adicionar ao carrinho.
\ne) Exibir breve descri\u00e7\u00e3o:<\/strong> Ative e exiba uma breve descri\u00e7\u00e3o do produto (se adicionado na p\u00e1gina do produto do site).
\nf) Exibir Adicionar \u00e0 tela inicial pop-up:<\/strong> Ofere\u00e7a a mensagem pop-up “Adicionar \u00e0 tela inicial” e permita que os usu\u00e1rios adicionem o aplicativo PWA nos dispositivos m\u00f3veis.
\ng) Habilitar logotipo:<\/strong> Adicione o logotipo da sua marca no cabe\u00e7alho do WooCommerce PWA Mobile App.<\/p>\n

\"configura\u00e7\u00f5es<\/p>\n

h) Cor de fundo da tela inicial:<\/strong> Escolha e defina a cor da tela inicial do WooCommerce Progressive Web App.
\ni) Nome do aplicativo PWA:<\/strong> Digite o nome desejado para o aplicativo WooCommerce PWA. Ele ser\u00e1 exibido assim que o usu\u00e1rio adicionar o aplicativo nos dispositivos m\u00f3veis.
\nj) Imagem do \u00edcone do aplicativo:<\/strong> Adicione a imagem do \u00edcone do aplicativo no painel de administra\u00e7\u00e3o.
\nk) Selecione a Fonte do Aplicativo:<\/strong> Escolha a fonte para o seu aplicativo m\u00f3vel WooCommerce PWA.
\nl) Selecione Layout para Home Page:<\/strong> Escolha um layout de tela inicial pr\u00e9-adicionado para o WooCommerce PWA App.<\/p>\n

\"configura\u00e7\u00f5es<\/p>\n

m) Cor do bot\u00e3o do aplicativo:<\/strong> Escolha a cor do bot\u00e3o para o aplicativo m\u00f3vel PWA.
\nn) Cor do tema do aplicativo:<\/strong> Escolha a cor do tema para o aplicativo PWA.
\no) Cor de fundo do aplicativo:<\/strong> Escolha a cor de fundo para o aplicativo PWA.
\np) Ativar Barra de Abas:<\/strong> Ative a barra de guias na parte inferior do aplicativo PWA para navega\u00e7\u00e3o r\u00e1pida e f\u00e1cil.
\nq) CSS personalizado:<\/strong> Insira o c\u00f3digo CSS para melhorar a apar\u00eancia das p\u00e1ginas de visualiza\u00e7\u00e3o na Web do aplicativo PWA, como pagamento de visualiza\u00e7\u00e3o na Web, p\u00e1ginas CMS, etc.<\/p>\n

Configura\u00e7\u00f5es de notifica\u00e7\u00f5es push 2.2<\/h3>\n

As notifica\u00e7\u00f5es push s\u00e3o a melhor ferramenta de marketing para o aplicativo PWA para WooCommerce. O administrador da loja pode simplesmente promover os produtos e ofertas da loja para os usu\u00e1rios do aplicativo e gerar mais vendas e receita.\ufffdInsira todos os detalhes nas configura\u00e7\u00f5es de notifica\u00e7\u00e3o por push criando um projeto do Firebase:<\/p>\n

Como configurar uma conta Firebase?<\/strong><\/p>\n

– <\/strong> Fa\u00e7a login no Google Firebase<\/p>\n

\"firebase\"<\/p>\n

– <\/strong> Criar um novo projeto Ao clicar em Adicionar projeto, a seguinte caixa de di\u00e1logo aparecer\u00e1:<\/p>\n

\"projeto
\nA cria\u00e7\u00e3o do projeto levar\u00e1 alguns segundos. Assim que o projeto estiver pronto, clique em continuar.<\/p>\n

\"continuar-projeto\"<\/p>\n

– <\/strong> Gerencie as configura\u00e7\u00f5es do projeto Depois de criar o projeto, clique em Configura\u00e7\u00f5es do projeto.<\/p>\n

\"configura\u00e7\u00f5es<\/p>\n

– <\/strong> V\u00e1 para as op\u00e7\u00f5es de autentica\u00e7\u00e3o:<\/p>\n

\"op\u00e7\u00f5es
\n– <\/strong> Encontre as chaves do Firebase Nas configura\u00e7\u00f5es do projeto, clique em Configura\u00e7\u00f5es de mensagens na nuvem. A partir daqui, voc\u00ea pode obter diretamente a chave do servidor.<\/p>\n

\"chave
\n– <\/strong> Adicione seu aplicativo da Web ao Firebase<\/p>\n

\"web-app-to-firebase\"<\/p>\n

\"web-app-to-firebase\"<\/p>\n

– <\/strong> Obtenha outros detalhes relacionados ao Firebase e cole-os no painel de administra\u00e7\u00e3o do m\u00f3dulo PWA.<\/p>\n

\"detalhes<\/p>\n

– <\/strong> Obtenha a chave do servidor Firebase na guia de mensagens em nuvem em Configura\u00e7\u00f5es:<\/p>\n

\"chave<\/p>\n

– <\/strong>Adicione seu dom\u00ednio na autentica\u00e7\u00e3o >> login.<\/p>\n

\"chave<\/p>\n

\"chave<\/p>\n

A) Notifica\u00e7\u00e3o por push de pedido bem-sucedida:<\/h4>\n

Ative\/desative a notifica\u00e7\u00e3o autom\u00e1tica por push para ser enviada aos usu\u00e1rios do aplicativo sempre que fizerem um pedido bem-sucedido do aplicativo WooCommerce PWA.<\/p>\n

\"notifica\u00e7\u00e3o<\/p>\n

B) Notifica\u00e7\u00e3o por push da atualiza\u00e7\u00e3o do status do pedido:<\/h4>\n

Ative\/desative a notifica\u00e7\u00e3o push automatizada enviada sempre que o status do pedido do aplicativo for atualizado. Os usu\u00e1rios do aplicativo m\u00f3vel WooCommerce PWA podem ficar de olho nos detalhes dos pedidos anteriores.<\/p>\n

\"atualiza\u00e7\u00e3o<\/p>\n

C) Notifica\u00e7\u00e3o de envio de carrinho abandonado:<\/h4>\n

Habilite \/ desabilite a notifica\u00e7\u00e3o push automatizada enviada aos usu\u00e1rios que abandonam produtos no carrinho sem compra bem-sucedida. Esta notifica\u00e7\u00e3o push ser\u00e1 enviada aos usu\u00e1rios automaticamente ap\u00f3s o intervalo de tempo inserido.<\/p>\n

\"abandonado-carrinho-notifica\u00e7\u00e3o\"<\/p>\n

2.3 Hist\u00f3rico de notifica\u00e7\u00f5es por push<\/h3>\n

O hist\u00f3rico completo de notifica\u00e7\u00f5es push enviadas com sucesso ser\u00e1 visto aqui. O administrador da loja pode acompanhar as notifica\u00e7\u00f5es push enviadas anteriormente a partir daqui.<\/p>\n

A) Enviar notifica\u00e7\u00e3o:<\/h4>\n

Personalize e envie notifica\u00e7\u00f5es push manualmente para usu\u00e1rios de aplicativos PWA conforme a necessidade. O administrador da loja pode configurar essas notifica\u00e7\u00f5es por conta pr\u00f3pria e envi\u00e1-las aos usu\u00e1rios do aplicativo WooCommerce PWA.<\/p>\n

\"enviar-push-notifica\u00e7\u00e3o\"<\/p>\n

Layout da P\u00e1gina Inicial do 2.4:<\/h3>\n

O WooCommerce PWA Mobile App oferece uma tela inicial personaliz\u00e1vel cujo layout pode ser projetado a partir do painel de administra\u00e7\u00e3o com alguns cliques do mouse e arrastar e soltar. O layout atraente de acordo com o festival, venda, ocasi\u00e3o etc. certamente pode ajudar a melhorar as vendas por meio dos aplicativos m\u00f3veis WooCommerce PWA.<\/p>\n

\"layout<\/p>\n

Adicione um novo layout a partir desta guia ou edite os adicionados anteriormente. As defini\u00e7\u00f5es de configura\u00e7\u00e3o da p\u00e1gina inicial oferecem os seguintes elementos:<\/p>\n

a) Principais categorias:\ufffd<\/strong><\/p>\n

\"principais<\/p>\n

b) Faixa quadrada:\ufffd<\/strong><\/p>\n

\"faixa<\/p>\n

c) Faixa Deslizante Horizontal:\ufffd<\/strong><\/p>\n

\"banner<\/p>\n

d) Faixas de grade:\ufffd<\/strong><\/p>\n

\"faixa<\/p>\n

e) Banner do temporizador de contagem regressiva:\ufffd<\/strong><\/p>\n

\"contagem<\/p>\n

f) Produtos Quadrados:\ufffd<\/strong><\/p>\n

\"produto<\/p>\n

g) Produtos deslizantes:\ufffd<\/strong><\/p>\n

\"produtos<\/p>\n

h) Produtos da Rede:\ufffd<\/strong><\/p>\n

\"produto<\/p>\n

P\u00e1ginas de Informa\u00e7\u00e3o 2.5:<\/h3>\n

Adicione p\u00e1ginas CMS no aplicativo e ofere\u00e7a conte\u00fado informativo aos usu\u00e1rios do WooCommerce PWA Mobile App.<\/p>\n

\"p\u00e1ginas<\/p>\n

Como obter detalhes do aplicativo do Facebook?<\/h3>\n

O aplicativo do Facebook pode ser criado seguindo as etapas abaixo mencionadas: –<\/p>\n

– <\/strong> V\u00e1 para o URL fornecido: https:\/\/developers.facebook.com\/apps\/<\/p>\n

– <\/strong>Clique no bot\u00e3o “Adicionar um novo aplicativo”.<\/p>\n

\"adicionar<\/a><\/p>\n

Etapa 3 e 4:<\/strong>Insira o nome do aplicativo e a id de e-mail e clique no bot\u00e3o “Criar ID do aplicativo”.<\/p>\n

\"create-app-id\"<\/a><\/p>\n

Etapa 5 e 6:<\/strong> Ap\u00f3s clicar em Criar ID de aplicativo, voc\u00ea ter\u00e1 que passar por uma verifica\u00e7\u00e3o de seguran\u00e7a, conforme mostrado:<\/p>\n

\"create-app-id\"<\/a><\/p>\n

– <\/strong>Clique na aba “Configura\u00e7\u00f5es”.<\/p>\n

\"configura\u00e7\u00e3o<\/a><\/p>\n

Etapa 8-13:<\/strong>Duas op\u00e7\u00f5es estar\u00e3o dispon\u00edveis no menu suspenso, B\u00e1sico e Avan\u00e7ado, clique em “B\u00e1sico”. Em seguida, insira seu “Dom\u00ednio do aplicativo”, “E-mail de contato”, “Privacidade URL”, “Termos e Condi\u00e7\u00f5es URL”, “Adicionar logotipo”, “Selecionar categoria” e clique no bot\u00e3o “Salvar altera\u00e7\u00f5es”. Dom\u00ednios de aplicativos: seudominio.com est\u00e1 correto seudom\u00ednio.com\/store est\u00e1 incorreto www.domain.com est\u00e1 incorreto<\/p>\n

\"ID<\/a><\/p>\n

– <\/strong>Agora clique em “+ Adicionar plataforma”.<\/p>\n

\"adicionar<\/a>
\nEtapa 15: <\/strong>E selecione Site como Plataforma.<\/p>\n

\"escolha-plataforma\"<\/a><\/p>\n

– <\/strong> Agora digite o URL do seu site.<\/p>\n

\"enter-site-url\"<\/a>
\nEtapa 17 e 18:<\/strong>Clique em “Produtos +” e selecione o login do Facebook.<\/p>\n

\"entrar<\/a>
\n– <\/strong> Selecione a web como plataforma para o aplicativo.<\/p>\n

\"escolha-plataforma\"<\/a><\/p>\n

– <\/strong> Agora clique em salvar.<\/p>\n

\"facebook-app-id\"<\/a>
\nEtapa 21 e 22: <\/strong>Clique em Configura\u00e7\u00f5es e adicione URIs de redirecionamento OAuth v\u00e1lidos. URIs de redirecionamento OAuth v\u00e1lidos: https:\/\/example.com\/pwa-app\/login<\/p>\n

\"URL<\/a><\/p>\n

Etapa 23 e 24:<\/strong>Clique em “Avalia\u00e7\u00e3o do aplicativo”. E marque “Tornar ‘o nome do seu aplicativo’ P\u00fablico” como Sim.<\/p>\n

\"revis\u00e3o<\/a>
\nEtapa final:<\/strong> Copie o ID do aplicativo e o segredo do aplicativo e cole-os nos campos fornecidos no m\u00f3dulo.<\/p>\n

\"passo<\/a><\/p>\n

Como obter detalhes do Google App?<\/h3>\n