O que são aplicativos da Web progressivos ou PWAs no Magento 2?

• O que significa que o Magento está se tornando uma plataforma Progressiva de Aplicativos Web?
• Qual será a estrutura de código dos PWAs no Magento?
• Qual é o problema com APIs REST e PWAs?

O que são aplicativos da Web progressivos?

• Parece e se comporta como um aplicativo móvel.
• Tire vantagem de móveis nativos recursos do dispositivo, sem a necessidade do usuário final para visitar uma loja de aplicativos, fazer uma compra e baixar -lo localmente .

Porquê PWA?

• Rápido
• Seguro (segundo último tópico de resposta)
• Responsivo
• Compatível com vários navegadores
• Modo offline (verifique o último tópico na resposta)
• "Instalação" móvel
• Conteúdo compartilhável

Esta resposta também cobre - Instalação do Magento 2.3 com PWA

Vamos dar um exemplo de Flipkart

Flipkart , o maior site de comércio eletrônico da Índia, decidiu combinar a presença na Web e o aplicativo nativo em um aplicativo da Web progressivo que resultou em um aumento de 70% nas conversões

Flipkart

Aproximação

1. Desenvolvido Flipkart Lite, um aplicativo da Web progressivo
2. Trabalhadores de serviços adicionados para tempos de carregamento mais rápidos
3. Navegação e rolagem suaves a 60 quadros / segundo
4. Criou um prompt "Adicionar à tela inicial" para incentivar os usuários a adicionar a página da web móvel às telas iniciais

   ---

Resultados

O novo aplicativo progressivo da Web ajuda o Flipkart a aumentar as conversões em 70%

Flipkart também funciona no modo offline

• Os Trabalhadores em serviço podem ter um script para interceptar todas as solicitações de rede e servir uma resposta do cache, mesmo quando o usuário estiver offline.
• Biblioteca de wrapper do Service Workers que permite o uso de padrões simples como NetworkFirst, CacheFirstou NetworkOnly. SW-Toolboxfornece um LRU cache usado no aplicativo Flipkart para armazenar resultados de pesquisa anteriores na página de navegação e nas últimas páginas de produtos visitadas.
• A caixa de ferramentas também possui um mecanismo de invalidação de TTL-based cache que usamos para eliminar conteúdo desatualizado. Os funcionários de serviço fornecem primitivas de script de baixo nível que tornam isso possível.

MAS ... MAS ... MAS ...

O que é o Magento PWA Studio?

• • O projeto Magento PWA Studio é um conjunto de ferramentas para desenvolvedores que permitem o desenvolvimento, implantação e manutenção de uma fachada de loja PWA no Magento 2

O projeto Magento PWA Studio fornece as seguintes ferramentas:

---

pwa-module

• Possui módulos como auxiliares, funcionalidade do lado do servidor e atua como base para todos os temas criados usando o Magento PWA Studio.

pwa-buildpack -

• O Buildpack é um conjunto de Webpackplugins e ferramentas usadas para o desenvolvimento de temas do Magento PWA.

• Também é usado para instalar e configurar o ambiente de desenvolvimento local para a plataforma Magento 2.

Ele contém as seguintes ferramentas:

• PWADevServer
• Resolvedor Magento
• Plugin Magento Root Components
• carregador de layout magento
• Service Worker Plugin

Peregrine - Peregrine é um conjuntoReact componentscriado para lidar com funcionalidades específicas do Magentorouting,como,root-componentsmanipulador de layout, listas de produtos, exibição de preços, etc.

Tema Venia -venia-concepté um tema de demonstração criado pelo Magento usando o estúdio Magento PWA. Apresenta todas as funcionalidades, fluxo de trabalho e páginas atualmente disponíveis

O PWA Studio NÃO é

• Uma nova versão do Magento

• Uma substituição de todos os front-end

• Um aplicativo de desktop

Ferramentas e bibliotecas usadas nos PWA Studios

Webpack

• A função principal do Webpack é criar um ou mais pacotes configuráveis ​​a partir das dependências nos módulos do seu projeto.

App Shell

• O tamanho total é menor
• Carga inicial solicita três arquivos: login.html, shell-1234.js,3456.js
• O carregamento inicial precisa ser carregado: Shell + Router + content
• O shell é visível mais cedo do que com a abordagem do Page Shell.

Shell da Página

• O tamanho total é maior (ou seja, o conteúdo do painel está em dashboard-1234.js e 4567.js)

• O aplicativo leva mais tempo para ficar pronto offline.

• Carga inicial solicita apenas dois arquivos: login.html,login-2345.js

• O carregamento inicial precisa ser carregado: Shell + content

• O shell + contenté visível antes do que com a abordagem do App Shell.

Uma abordagem híbrida pode ser usada em que shell e conteúdo são separados em duas solicitações (consulte a página de administração como exemplo). Isso faz sentido quando o conteúdo é muito maior do que o shell e o shell deve estar visível antes.

ReactJs

• Uma biblioteca JavaScript para criar interfaces de usuário.

Redux

• Uma biblioteca JavaScript usada para gerenciar o estado em um aplicativo da web.

GraphQL

• Uma linguagem de consulta de dados no lado do cliente e uma camada de serviço no lado do servidor.

GraphQL no Magento

Autenticação e esquema

Reduzindo a quantidade de consultas de front-end

Renderização de fase

Compatibilidade com o Desktop Browser

• Não suportado : IE, Safari

Compatibilidade com o navegador móvel

Não suportado : Android Webview, IE, Safari

PWAs são mais seguros

• Como um desenvolvedor web, você pode saber o quanto o Google incentiva os sites que têm httpsem vez de HTTP. As ameaças cibernéticas estão sempre no topo da lista para desenvolvedores de aplicativos e web.
• No passado, HTTPnão era seguro o suficiente para proteger as informações dos usuários.
• Agora, os sites estão sendo programados HTTPse é fácil iniciar um aplicativo progressivo da Web em um ambiente seguro.
• Ao inserir informações pessoais no PWA , como informações de cartão de crédito ou detalhes de contato, elas podem se sentir seguras e tranqüilas.

PWA - Modo offline

O aplicativo offline da Wikipedia é um bom exemplo de um PWA que usa um modelo de shell de aplicativo .

• Carrega instantaneamente em visitas repetidas, mas busca dinamicamente o conteúdo usando JS.
• Esse conteúdo é armazenado em cache offline para futuras visitas.

Progressive Web App é o futuro do desenvolvimento web, sem qualquer dúvida. No futuro, sites de comércio eletrônico, restaurantes e fontes de mídia farão a transição do aplicativo nativo para o Progressive Web App. No entanto, ainda na fase inicial, muitos dos desenvolvedores procurariam ativamente maneiras de aproveitar ao máximo as oportunidades oferecidas pelos PWAs.

Vamos começar com a instalação do Magento 2.3 com PWA

1. Digite o seguinte comando em DIR / var / www / html / (m203 é o meu diretório Magento 2.3):

composer create-project --repository=https://repo.magento.com/ magento/project-community-edition=2.3.* --stability=beta m203

2. Instale o Magento por linha de comando:

bin/magento setup:install --base-url=http://localhost/m230 --db-host=localhost --db-name=m230 --db-user=root --db-password=root --backend-frontname=admin --admin-firstname=admin --admin-lastname=admin --admin-email=admin@admin.com --admin-user=admin --admin-paassword=admin123 --language=en_US --currency=USD --timezone=America/Chicago --use-rewrites=1

3. Crie o tema pwa base, que será o pai deles para o tema PWA Venia.

• Por enquanto, vamos clonar o repositório de temas pwa base. https://github.com/magento-research/theme-frontend-pwa

4. Crie um diretório app/design/frontend/Magento/pwae copie todos os arquivos e diretórios do tema base aqui.

• Vamos verificar que o tema base está disponível ou não.

• Run: php bin/magento setup:upgrade

• E navegue até o Magento Admin-> Conteúdo-> Temas

5. Faça o download do projeto do estúdio PWA.

6. Navegue até o diretório raiz da instalação do Magento e crie uma pasta de link simbólico do Pwa com o link para o diretório do módulo do projeto (pwa-studio / packages / pwa-module).

• deste diretório, executei meu comando - / var / www / html / m230

• Este é um diretório em que minha fonte baixada do pwa é / var / www / html / PWA /

ln -s /var/www/html/PWA/pwa-studio-master/packages/pwa-module app/code/Magento/Pwa

7. Vincule o diretório do tema também. Navegue para o diretório raiz da instalação do Magento e crie uma pasta de link simbólico Pwa com o link para o diretório do módulo do projeto (pwa-studio / packages / venia-concept).

ln -s /var/www/html/PWA/pwa-studio-master/packages/venia-concept app/design/frontend/Magento/venia

8. Agora navegue até o diretório venia-concept do seu projeto pwa-studio, copie .env.distpara um novo .envarquivo e atualize as variáveis ​​com o URL para sua loja de desenvolvimento Magento.

cd /var/www/html/PWA/pwa-studio-master/packages/venia-concept

cp .env.dist .env

9. Instale o tema venia e o módulo Pwa:

run: php bin/magento setup:upgrade

podemos ver que o tema venia foi instalado com sucesso.

10. Configure o tema venia a partir de admin->Content->Configuration

11. Navegue até o caminho ( /var/www/html/PWA/pwa-studio-master) executado:

npm install

ou

npm install webpack-dev-server -g

12. E finalmente, navegue até /var/www/html/PWA/pwa-studio-master/packages/venia-concept

npm start

Parabéns! Você configurou seu ambiente de desenvolvimento para o projeto temático Venia.

PWA - Progressive Web Application são geralmente os aplicativos da Web que são experiências do usuário na Web rica. em forma de:

• Confiável - carregue instantaneamente e também esteja disponível no modo offline.
• Rápido - de um modo de interação em que o usuário interage suavemente com ele e também sem rolagens de rolagem ou animação.
• Envolvente - como indicado acima nos dois pontos, se o aplicativo for confiável e rápido, obviamente ele envolverá mais experiência do usuário e também parecerá um aplicativo natural.

"O que significa que o Magento está se tornando uma plataforma de aplicativo Web progressivo?"

Enquanto o magento se prepara para o lançamento da versão 2.3, está incluindo esse recurso "PWA" para tornar o front-end mais eficiente, de uma maneira que a interação do usuário.

Qual é o problema com APIs REST e PWAs?

Como o magento está usando o "PWA", também está adicionando "GraphQL API" para fornecer uma alternativa de API do lado do desenvolvimento front-end de "REST / SOAP" como API de "GraphQL".

Para obter mais detalhes sobre o "PWA" e o novo recurso do "magento2.3 open-commerce", você pode visitar a página oficial deste magento .

Progressivo significa que o aplicativo é carregado com todos os dados e ativos relevantes, à medida que o usuário navega pelo site. Isso resulta em uma experiência do usuário final com melhor velocidade, usabilidade, operação offline e integração de dispositivos.

Web significa que está escrito nos idiomas da web (HTML, CSS, JavaScript). Isso permite que você crie um site que oferece mais funcionalidades semelhantes a aplicativos sem criar um aplicativo nativo restrito a uma plataforma, como iOS ou Android.

Aplicativo significa que ele instala e executa o código no dispositivo ou no computador do comprador. Isso cria mais velocidade e capacidade do que os aplicativos JavaScript de página única do passado.

Os PWAs são essencialmente um híbrido de páginas da Web regulares e do aplicativo móvel, permitindo experiências semelhantes a aplicativos móveis para a Web.

Magento está se tornando uma plataforma Progressiva de Aplicativos Web. Ou seja, o Magento está criando um conjunto de ferramentas para a construção de lojas on-line como aplicativos da Web progressivos. Essas ferramentas ajudarão os desenvolvedores a aprender técnicas de PWA, criar frontends de PWA extremamente rápidos e criar componentes e extensões de PWA para reutilização ou venda no Magento Marketplace. Juntos, o Magento está chamando esse conjunto de ferramentas de Magento PWA Studio.

Você pode verificar a estrutura do código em https://github.com/magento-research/pwa-studio

O Magento PWA está usando o GraphQL como uma alternativa à API REST para PWA.

Para mais detalhes sobre o Magento PWA, você pode acessar os seguintes links:

• https://magento-research.github.io/pwa-studio/
• https://community.magento.com/t5/Magento-DevBlog/Introducing-Magento-PWA-Studio/ba-p/74636
• https://brandastic.com/ideas/magento-progressive-web-apps/
• https://www.monsoonconsulting.com/blog/progressive-web-apps-magento

• Progressive Web Apps é o meio termo entre aplicativos e sites móveis instaláveis. Esperamos ver mais tráfego na Internet a partir de dispositivos móveis do que a partir de computadores, até 2019. Os PWAs melhoram a aparência dos sites para aumentar a conversão.

Os PWAs oferecem experiências rápidas, sem atrito e "semelhantes a aplicativos", gerando mais tráfego, conversões mais altas e tempos de carregamento de página mais rápidos para os comerciantes Magento

Geralmente, o Magento está transformando sua aparência para aumentar as conversões. Leia mais sobre isso aqui .

• Os PWAs geralmente são criados com JavaScript, CSS e HTML que têm um nível de desempenho e usabilidade quase idêntico aos aplicativos nativos. Os PWAs têm peculiaridades, incluindo:

  1. Eles funcionam com a maioria (se não todos) de navegadores e dispositivos (móveis e computadores) com uma base de código progressiva (geralmente componente baseado em React Js)
  2. Ajustar-se a todas as telas e fatores de forma usando um design responsivo Aproveite os funcionários do serviço para habilitar a conectividade offline (é necessário HTTPS)
  3. Forneça uma experiência semelhante a um aplicativo que aproveite as ferramentas de reengajamento, como notificações por push
  4. Aproveite um manifesto de aplicativo da web para descrever os recursos usados

Você pode ler mais aqui.

• SOAP (Simple Object Access Protocol) e REST (Representational State Transfer) são os protocolos de comunicação de serviço da web mais comuns. O REST é preferível ao SOAP na maior parte ( explicado aqui ). Portanto, é lógico ver as APIs REST sendo usadas lado a lado com uma nova tecnologia como PWAs.

Para responder apenas uma parte da sua pergunta, mas mais específico ao Magento 2.

O PWA será mais fácil de construir graças ao futuro lançamento do Magento 2.3.

https://www.degdigital.com/insights/magento-2-3/

Citado neste artigo:

PWA

Um aplicativo da Web progressivo é um aplicativo criado para tirar proveito dos recursos modernos de tecnologia que "progressivamente" são reduzidos em dispositivos nos quais esses recursos não estão disponíveis. Ele também permite o armazenamento em cache de dados para que o site possa ser usado (parcial ou totalmente) em modo offline quando o serviço de Internet é irregular ou inexistente. Isso geralmente é feito escrevendo o front-end do site com uma estrutura / pilha JavaScript moderna que é distintamente separada do aplicativo de back-end. Esse aplicativo JavaScript pode usar novos recursos do navegador (ish) para realizar a tarefa mencionada acima.

O Magento reconhece os múltiplos benefícios disso e, no final de 2017, anunciou seus esforços na construção do que chama de PWA Studio. O PWA Studio conterá ferramentas para desenvolver e implantar um PWA para o front end do Magento. Junto com o PWA Studio, virá um site de demonstração leve (sem recursos). Os benefícios imediatos serão um grande aumento no desempenho do front-end e um aumento de quase 10 vezes na velocidade de integração de novos desenvolvedores de front-end do Magento.

• Conteúdo relacionado: As PWAs estão aqui e estão mudando tudo

GraphQL

GraphQL é uma linguagem de consulta para o uso de APIs. Com o aumento do PWA, é necessário obter quantidades menores de dados e fazer menos solicitações de API. A linguagem de consulta do GraphQL torna isso possível, permitindo que o solicitante solicite que um subconjunto limitado de atributos seja retornado sobre uma entidade (respostas significativamente menores) e permite encadear solicitações (número menor de solicitações).

Atualmente, o Magento suporta solicitações de API REST e SOAP que usam contratos de serviço. No entanto, para oferecer suporte ao GraphQL, o Magento está escrevendo uma camada totalmente nova que faz interface diretamente com a API de consulta. A implementação do GraphQL será a base de como um front-end da PWA recuperará os dados necessários.

O Aplicativo da Web progressivo usa os recursos do navegador da Web e fornece aos usuários um aplicativo móvel como a experiência.

Ele se desenvolve a partir de uma guia do navegador e torna as páginas mais imersivas com uma experiência do usuário de baixo atrito. É uma tecnologia da Web de criar um site que age e parece um aplicativo.

Um usuário pode iniciar o Aplicativo da Web Progressivo da mesma forma que um aplicativo nativo, independentemente da escolha do navegador.

Para teste de demonstração, você pode visitar neste link: Clique aqui

É um produto do Google lançado durante o I / O 2017 I / O 2017: https://www.youtube.com/watch?time_continue=14&v=cmGr0RszHc8

É um site baseado em HTML.

Ele armazena o cache em um dispositivo para que você possa usá-lo offline também.

No entanto, na primeira vez é lento, o que ocorrerá durante a segunda visita.

Ele está sendo atualizado quando o dispositivo obtém a Internet, portanto, não é necessário atualizar novidades como os APPs.

Ele dispara todos os emails para o servidor quando o dispositivo acessa a Internet se alguém postar algo offline.

Eventualmente, não há necessidade de criar um aplicativo para iphone / android.

Limitação Ele suporta apenas arquivos HTML. Portanto, o dispositivo deve suportar HTML.

There is no store to search PWA application.

Login with FB or else will not be worked.

Not supported in IE.

Configuração do PWA (Linux OS)

Etapa 1: Instalar o magento 2.3.1

Etapa 2: Instalar / atualizar o nó

Use o módulo n do npm para atualizar o nó

sudo npm install n -g

Para a versão estável mais recente:

sudo n stable

Para a versão mais recente:

sudo n latest

Etapa 3: instalar / atualizar o fio:

sudo npm install --global yarn

sudo npm upgrade --global yarn 

Etapa 4: Instalar node-gyp - ferramenta de criação de complementos nativos do Node.js.

sudo npm install -g node-gyp

Etapa 5: clonar o repositório do PWA Studio

Vá para a raiz html e execute:

git clone https://github.com/magento-research/pwa-studio.git

Depois de executar isso, você receberá a pasta pwa-studio

Etapa 6: instalar dependências do PWA Studio

sudo yarn install

Etapa 7: Especifique o servidor back-end Magento

Under the packages/venia-concept directory, copy .env.dist into a new .env file:

Comando de exemplo:

sudo cp packages/venia-concept/.env.dist packages/venia-concept/.env

mudança no arquivo .env (este será o seu URL do magento, não o URL do administrador):

MAGENTO_BACKEND_URL="https://release-dev-231-npzdaky-zddsyhrdimyra.us-4.magentosite.cloud/"

Etapa 8: agora crie uma compilação

sudo yarn run build

Etapa 9: executar o servidor

sudo yarn run watch:venia

Inicia apenas o ambiente de desenvolvimento da loja Venia.

sudo yarn run watch:all

Executa a experiência completa do desenvolvedor do PWA Studio, que inclui recarregamentos a quente da Venia e reconstruções simultâneas do Buildpack / Peregrine.

sudo yarn run build && yarn run stage:venia

Gera artefatos de construção e executa o ambiente de preparação, que usa mais ativos compactados e reflete mais de perto a produção.

Depois de executar um dos comandos acima, você obterá o URL de virtul criado pelo PWA.

NOTA: se você é um usuário rood, use sudo.

Siga os documentos de desenvolvimento oficiais do Magento 2:

https://devdocs.magento.com/guides/v2.3/pwa/