Che cos'è Progressive Web App o PWA in Magento 2?

• Cosa significa che Magento sta diventando una piattaforma di applicazioni Web progressiva?
• Quale sarà la struttura del codice dei PWA in Magento?
• Qual è l'accordo con le API REST e le PWA?

Che cos'è Progressive Web Apps?

• Sembra e si comporta come un'app mobile.
• Prendere vantaggio di mobili native funzioni del dispositivo, senza richiedere all'utente finale di visitare un app store, fare un acquisto e scaricare esso a livello locale .

Perché PWA

• Veloce
• Sicuro (secondo ultimo argomento di risposta)
• di risposta
• Compatibile con più browser
• Modalità offline (controlla l'ultimo argomento nella risposta)
• "Installa" mobile
• Contenuto condivisibile

Questa risposta riguarda anche - Installazione di Magento 2.3 con PWA

Facciamo un esempio di Flipkart

Flipkart , il più grande sito di e-commerce in India, ha deciso di combinare la presenza sul web e l'app nativa in un'applicazione Web progressiva che ha comportato un aumento del 70% delle conversioni

Flipkart

Approccio

1. Sviluppato Flipkart Lite, un'app Web progressiva
2. Aggiunti addetti all'assistenza per tempi di caricamento più rapidi
3. Navigazione fluida e scorrimento a 60 frame / secondo
4. Creato un prompt "Aggiungi alla schermata principale" per incoraggiare gli utenti ad aggiungere la pagina Web mobile alle schermate Home

   ---

risultati

La nuova app Web progressiva consente a Flipkart di aumentare le conversioni del 70%

Flipkart funziona anche in modalità offline

• Gli addetti all'assistenza possono essere programmati per intercettare ogni richiesta di rete e servire una risposta dalla cache anche quando l'utente è offline.
• Libreria wrapper di Service Workers che consente l'utilizzo di modelli semplici come NetworkFirst, CacheFirsto NetworkOnly. SW-Toolboxfornisce una LRU cache utilizzata nell'app Flipkart per l'archiviazione dei risultati di ricerca precedenti nella pagina di ricerca e nelle ultime pagine di prodotti visitati.
• La casella degli strumenti ha anche un meccanismo di invalidazione della TTL-based cache che utilizziamo per eliminare i contenuti non aggiornati. Gli addetti all'assistenza forniscono primitive scrivibili di basso livello che lo rendono possibile.

MA ... MA ... MA ...

Cos'è Magento PWA Studio?

• • Il progetto Magento PWA Studio è un insieme di strumenti per sviluppatori che consentono lo sviluppo, l'implementazione e la manutenzione di un negozio PWA in aggiunta a Magento 2

Il progetto Magento PWA Studio fornisce i seguenti strumenti:

---

PWA modulo

• Ha moduli come helper, funzionalità lato server e funge da base per tutti i temi creati utilizzando Magento PWA Studio.

pwa-buildpack -

• Buildpack è un set di Webpackplugin e strumenti che viene utilizzato per lo sviluppo di temi Magento PWA.

• Viene anche utilizzato per impostare e configurare l'ambiente di sviluppo locale per la piattaforma Magento 2.

Contiene i seguenti strumenti:

• PWADevServer
• Magento Resolver
• Plug-in Magento Root Components
• magento-layout loader
• Service Worker Plugin

Peregrine - Peregrine è un insieme diReact componentscreata per gestire le funzionalità Magento-specifici, comerouting,root-components, gestore di layout, elenchi di prodotti, visualizzazione del prezzo, etc.

Tema di Venia -venia-conceptè un tema demo creato da Magento usando Magento PWA studio. Mostra tutte le funzionalità, il flusso di lavoro e le pagine attualmente disponibili

PWA Studio NON lo è

• Una nuova versione di Magento

• Una sostituzione di tutti i front-end

• Un'applicazione desktop

Strumenti e librerie utilizzati in PWA Studios

Webpack

• La funzione principale di Webpack è quella di creare uno o più bundle dalle dipendenze nei moduli del progetto.

Shell app

• La dimensione totale è più piccola
• Carico iniziale richiede tre file: login.html, shell-1234.js,3456.js
• Il caricamento iniziale deve caricare: Shell + Router + content
• La shell è visibile prima rispetto all'approccio Page Shell.

Pagina Shell

• La dimensione totale è più grande (ovvero il contenuto della dashboard è in dashboard-1234.js e 4567.js)

• L'app richiede più tempo per essere pronta offline.

• Carico iniziale richiede solo due file: login.html,login-2345.js

• Il caricamento iniziale deve caricare: Shell + content

• Il shell + contentè visibile prima che con approccio App Shell.

È possibile utilizzare un approccio ibrido in cui shell e contenuto sono separati in due richieste (vedere la pagina di amministrazione come esempio). Questo ha senso quando il contenuto è molto più grande di shell e shell dovrebbe essere visibile prima.

ReactJs

• Una libreria JavaScript per la creazione di interfacce utente.

Redux

• Una libreria JavaScript utilizzata per la gestione dello stato in un'applicazione Web.

GraphQL

• Un linguaggio di query dei dati sul lato client e un livello di servizio sul lato server.

GraphQL in Magento

Autenticazione e schema

Riduzione della quantità di query front-end

Rendering di fase

Compatibilità del browser desktop

• Non supportato : IE, Safari

Compatibilità con browser mobile

Non supportato : Android Webview, IE, Safari

Le PWA sono più sicure

• Come sviluppatore web, potresti sapere quanto Google incoraggia i siti Web httpsinvece di HTTP. Le minacce informatiche sono sempre in cima alla lista per gli sviluppatori web e app.
• In passato, HTTPnon era abbastanza sicuro per proteggere le informazioni degli utenti.
• I siti Web sono ora in fase di programmazione HTTPsed è facile avviare un'app Web progressiva in un ambiente sicuro.
• Durante l'immissione di informazioni personali in PWA come le informazioni della carta di credito o i dettagli di contatto, possono sentirsi sicuri e avere la tranquillità.

PWA - Modalità offline

l'applicazione Wikipedia offline è un buon esempio di PWA che utilizza un modello di shell di app .

• Si carica istantaneamente su visite ripetute, ma recupera dinamicamente i contenuti utilizzando JS.
• Questo contenuto viene quindi memorizzato nella cache offline per visite future.

Progressive Web App è senza dubbio il futuro dello sviluppo web. In futuro, i siti di e-commerce, i ristoranti e le fonti multimediali passeranno dall'app nativa all'app Web progressiva. Tuttavia, ancora nella fase iniziale, molti sviluppatori sarebbero attivamente alla ricerca di modi per sfruttare al meglio le opportunità offerte dai PWA.

Iniziamo con l'installazione di Magento 2.3 con PWA

1. Immettere il seguente comando in DIR / var / www / html / (m203 è la mia directory Magento 2.3):

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

2. Installa Magento dalla riga di 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. Crea un tema pwa di base che sarà il genitore per il tema PWA Venia.

• Per ora consente di clonare il repository di temi pwa base. https://github.com/magento-research/theme-frontend-pwa

4. Crea una directory app/design/frontend/Magento/pwae copia tutti i file e le directory del tema di base qui.

• Consente di controllare che il tema di base sia disponibile o meno.

• Run: php bin/magento setup:upgrade

• E vai al tuo Magento Admin-> Contenuto-> Temi

5. Scarica il progetto PWA studio.

6. Passare alla directory principale dell'installazione di Magento e creare una cartella Pwa symlink che si colleghi alla directory del modulo del progetto (pwa-studio / pacchetti / pwa-module).

• da questa directory ho eseguito il mio comando - / var / www / html / m230

• Questa è una directory dove la mia fonte scaricata da pwa è / var / www / html / PWA /

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

7. Collega anche la directory dei temi. Naviga nella directory root della tua installazione Magento e crea una cartella Pwa symlink che si collega alla directory del modulo del progetto (pwa-studio / pacchetti / venia-concept).

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

8. Ora vai alla directory venia-concept del tuo progetto pwa-studio, copia .env.distin un nuovo .envfile e aggiorna le variabili con l'URL al tuo negozio di sviluppo Magento.

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

cp .env.dist .env

9. Installa il tema venia e il modulo Pwa:

run: php bin/magento setup:upgrade

possiamo vedere che il tema venia è stato installato con successo.

10. Configura il tema venia da admin->Content->Configuration

11. Passare alla /var/www/html/PWA/pwa-studio-mastercorsa path ( ):

npm install

o

npm install webpack-dev-server -g

12. E infine naviga verso /var/www/html/PWA/pwa-studio-master/packages/venia-concept

npm start

Congratulazioni! Hai impostato il tuo ambiente di sviluppo per il progetto tematico Venia.

PWA - Progressive Web Application è in genere l'applicazione Web che è l'utente sperimenta il Web ricco. in modo di:

• Affidabile : carica istantaneamente e disponibile anche in modalità offline.
• Veloce - in un modo di interazione in cui l'utente interagisce senza problemi con esso, e anche senza alcuno scorrimento o animazione.
• Coinvolgimento - come indicato sopra entrambi i punti se l'applicazione è affidabile e veloce, ovviamente è coinvolgere più esperienza utente e anche sentirsi come un'app naturale.

"Cosa significa che Magento sta diventando una piattaforma di applicazioni Web progressiva?"

Mentre Magento si sta preparando per la versione 2.3, include questa funzione "PWA" per rendere il frontend più efficiente, in modo da interagire con l'utente.

Qual è l'accordo con le API REST e le PWA?

Poiché Magento utilizza "PWA", aggiunge anche "API GraphQL" per fornire API API di sviluppo front-end alternative di "REST / SOAP" come API "GraphQL".

Per avere maggiori dettagli sulla "PWA" e le nuove funzionalità di "Magento2.3 open-commerce" Puoi visitare la pagina ufficiale di questo magento .

Progressivo significa che l'applicazione viene caricata insieme a tutti i dati e le risorse pertinenti, mentre un utente naviga nel tuo sito Web. Ciò si traduce in un'esperienza per l'utente finale con velocità, usabilità, funzionamento offline e integrazione dei dispositivi migliori.

Web significa che è scritto nelle lingue del web (HTML, CSS, JavaScript). Ciò consente di creare un sito che offre più funzionalità simili a un'app senza creare un'app nativa limitata a una piattaforma, come iOS o Android.

Applicazione significa che installa ed esegue il codice sul dispositivo o sul computer dell'acquirente. In questo modo si creano più velocità e funzionalità rispetto alle app JavaScript a pagina singola del passato.

Le PWA sono essenzialmente un ibrido delle normali pagine Web e dell'app per dispositivi mobili, consentendo esperienze simili a quelle delle app mobili per il Web.

Magento sta diventando una piattaforma di applicazioni Web progressiva. Vale a dire, Magento sta creando una suite di strumenti per la creazione di negozi online come applicazioni Web progressive. Questi strumenti aiuteranno gli sviluppatori ad apprendere le tecniche PWA, costruire front-end PWA estremamente veloci e creare componenti ed estensioni PWA per il riutilizzo o la vendita sul mercato Magento. Nel loro insieme, Magento chiama questa suite di strumenti Magento PWA Studio.

Puoi controllare la struttura del codice su https://github.com/magento-research/pwa-studio

Magento PWA utilizza GraphQL come alternativa all'API REST per PWA.

Per maggiori dettagli su Magento PWA, puoi consultare i seguenti link:

• 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 è la via di mezzo tra app mobili e siti Web installabili. Prevediamo di vedere più traffico su Internet dai dispositivi mobili che dai desktop, entro il 2019. Le PWA migliorano l'aspetto dei siti Web per aumentare la conversione.

Le PWA offrono esperienze rapide, senza attriti e "simili a app" che guidano più traffico, conversioni più elevate e tempi di caricamento della pagina più rapidi per i commercianti di Magento

Quindi, in generale, Magento sta trasformando il suo aspetto per aumentare le conversioni. Leggi di più qui .

• Le PWA sono generalmente realizzate con JavaScript, CSS e HTML che hanno un livello di prestazioni e usabilità quasi identico alle app native. Le PWA hanno peculiarità tra cui:

  1. Funzionano con la maggior parte (se non tutti) browser e dispositivi (mobili e desktop) con una base di codice progressiva (spesso basata su componenti come in React Js)
  2. Adatta tutti gli schermi e i fattori di forma utilizzando un design reattivo Sfrutta gli addetti ai servizi per abilitare la connettività offline (HTTPS richiesto)
  3. Fornisci un'esperienza simile a un'app che sfrutta gli strumenti di coinvolgimento, come le notifiche push
  4. Sfrutta un manifest di app Web per descrivere le risorse utilizzate

Puoi leggere di più qui.

• SOAP (Simple Object Access Protocol) e REST (Representational State Transfer) sono i protocolli di comunicazione più comuni per i servizi Web. REST è preferito a SOAP per la maggior parte ( spiegato qui ). È quindi logico vedere le API REST utilizzate insieme a una nuova tecnologia come le PWA.

Per rispondere solo a una parte della tua domanda ma più specifica per Magento 2.

PWA sarà più facile da costruire grazie alla futura versione di Magento 2.3.

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

Citato da questo articolo:

PWA

Un'app Web progressiva è un'applicazione creata per sfruttare le moderne funzionalità tecnologiche che "progressivamente" si ridimensiona sui dispositivi in ​​cui tali funzionalità non sono disponibili. Consente inoltre la memorizzazione nella cache dei dati in modo che il sito Web possa essere utilizzato (parzialmente o completamente) in modalità offline quando il servizio Internet è imprevedibile o inesistente. Ciò si ottiene generalmente scrivendo il front-end del sito Web con un moderno framework / stack JavaScript che è nettamente separato dall'applicazione back-end. Questa applicazione JavaScript può utilizzare le nuove funzionalità del browser (ish) per eseguire l'attività sopra menzionata.

Magento riconosce i molteplici vantaggi di questo e alla fine del 2017 ha annunciato i suoi sforzi per costruire quello che chiama PWA Studio. PWA Studio conterrà strumenti per sviluppare e distribuire un PWA per il front-end di Magento. Insieme a PWA Studio arriverà un sito demo leggero (non pieno di funzionalità). I vantaggi immediati saranno un notevole aumento delle prestazioni del front-end e un aumento di quasi 10 volte maggiore della velocità di onboarding dei nuovi sviluppatori front-end Magento.

• Contenuto correlato: I PWA sono qui e stanno cambiando tutto

GraphQL

GraphQL è un linguaggio di query per l'utilizzo delle API. Con l'ascesa della PWA, è necessario ottenere minori quantità di dati e fare meno richieste API. Il linguaggio di query di GraphQL rende possibile ciò consentendo al richiedente di richiedere un sottoinsieme limitato di attributi da restituire su un'entità (risposte significativamente più piccole) e consente di concatenare le richieste (numero inferiore di richieste).

Magento attualmente supporta le richieste API REST e SOAP che utilizzano Contratti di servizio. Tuttavia, per supportare GraphQL, Magento sta scrivendo un livello completamente nuovo che si interfaccia direttamente all'API Query. L'implementazione di GraphQL sarà alla base di come un frontend PWA recupererà i dati di cui ha bisogno.

L'applicazione Web progressiva utilizza le funzionalità del browser Web e offre agli utenti un'app mobile come l'esperienza.

Si sviluppa da una scheda del browser e rende le pagine più coinvolgenti con un'esperienza utente a basso attrito. È una tecnologia web per creare un sito Web che agisce e sembra un'applicazione.

Un utente può avviare un'applicazione Web progressiva come un'applicazione nativa indipendentemente dalla scelta del browser.

Per i test dimostrativi, puoi visitare questo link: Fai clic qui

È un prodotto google lanciato durante l'I / O 2017 I / O 2017: https://www.youtube.com/watch?time_continue=14&v=cmGr0RszHc8

È un sito Web basato su HTML.

Memorizza la cache in un dispositivo in modo da poterla utilizzare anche offline.

Tuttavia, la prima volta è lento che sarà attivo durante la seconda visita.

Si sta aggiornando quando il dispositivo ottiene Internet, quindi non è necessario aggiornare nuove cose come le APP.

Attiva tutte le e-mail sul server quando il dispositivo ottiene Internet se qualcuno pubblica qualcosa offline.

Alla fine, non è necessario creare app per iPhone / Android.

Limitazione Supporta solo file HTML. Quindi il dispositivo dovrebbe supportare HTML.

There is no store to search PWA application.

Login with FB or else will not be worked.

Not supported in IE.

Setup PWA (sistema operativo Linux)

Passaggio 1: installare magento 2.3.1

Passaggio 2: Installa / aggiorna nodo

Utilizzare n module da npm per aggiornare il nodo

sudo npm install n -g

Per l'ultima versione stabile:

sudo n stable

Per l'ultima versione:

sudo n latest

Passaggio 3: installare / aggiornare il filo:

sudo npm install --global yarn

sudo npm upgrade --global yarn 

Passaggio 4: installare node-gyp - strumento di creazione del componente aggiuntivo nativo Node.js

sudo npm install -g node-gyp

Passaggio 5: clonare il repository PWA Studio

Vai a html root ed esegui:

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

Dopo aver eseguito questo, otterrai la cartella pwa-studio

Passaggio 6: installare le dipendenze di PWA Studio

sudo yarn install

Passaggio 7: specificare il server back-end Magento

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

Esempio di comando:

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

modifica nel file .env (questo sarà il tuo URL magento, non l'URL di amministrazione):

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

Passaggio 8: ora crea una build

sudo yarn run build

Passaggio 9: eseguire il server

sudo yarn run watch:venia

Avvia solo l'ambiente di sviluppo del negozio Venia.

sudo yarn run watch:all

Esegue l'esperienza completa dello sviluppatore di PWA Studio, che include Ricarica a caldo di Venia e ricostruzioni simultanee Buildpack / Peregrine.

sudo yarn run build && yarn run stage:venia

Genera manufatti di costruzione e gestisce l'ambiente di gestione temporanea, che utilizza più risorse compresse e riflette più da vicino la produzione.

Una volta eseguito uno dei comandi sopra, otterrai l'URL virtul creato da PWA.

NOTA: se sei un utente rood, usa sudo.

Segui i documenti di sviluppo ufficiale di Magento 2:

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