Il futuro è già arrivato o tutto riguarda le applicazioni PWA. Cosa sono le Progressive Web App e quali opportunità offrono alla tua attività

In realtà è abbastanza difficile rispondere a questa domanda. Per ora diciamo questo:

Progressive Web Apps (PWA) è un'app o un sito Web ibrido che funziona su qualsiasi piattaforma, su qualsiasi dispositivo

Proverò a spiegare questa definizione non molto buona.

Ora esiste un numero enorme di dispositivi che possono essere utilizzati per interagire con la nostra azienda, ma condizionatamente, i metodi di tale interazione possono essere suddivisi in due gruppi molto grandi:

1. Siti web
2. Applicazioni mobili

I siti Web ci sono ben noti e occupano una quota predominante nelle comunicazioni aziendali e con gli utenti. Di recente, i siti per la maggior parte sono diventati convenienti per l'uso in quasi tutte le condizioni e su qualsiasi dispositivo, ma c'è una grave limitazione: un canale di comunicazione instabile in condizioni mobili. Tutto sembra fantastico, ma se non c'è internet, non c'è sito web. E se la velocità della connessione Internet aumenta e cambia drasticamente da decine di megabit al secondo a diversi kilobit, è difficile che lavorare con un sito Web possa essere definito comodo. Ricorda come guardi i siti web su un treno o in un vagone della metropolitana...

Le applicazioni mobili dovrebbero essere esenti da questa mancanza, ma anche qui gli sviluppatori dimenticano che l'utente potrebbe non avere Internet. Tuttavia, lo sviluppo e, non meno importante, l'ulteriore manutenzione dell'applicazione, anche su piattaforme diverse!, non è un compito facile. E di conseguenza, otteniamo un'altra stupida applicazione dalla categoria "per spettacolo", il cui valore tende a zero. Inoltre, puoi aggiungere l'impossibilità delle applicazioni mobili di funzionare sul desktop, e questo molto spesso è necessario.

Le Progressive Web App sono progettate per risolvere questi problemi e combinare questi due grandi gruppi di metodi di comunicazione in un unico grande: PWA. Puoi dire questo:

Progressive Web Apps è un modo per creare applicazioni che utilizzano lo stack Web (HTML, CSS JS) che seguono tre principi importanti:

1. Indipendenza dalla connessione di rete: funziona offline

2. Velocità e reattività: risposta rapida alle azioni dell'utente

3. Aspetto nativo: l'ideologia dell'interfaccia del dispositivo non si rompe

Alcuni esempi di PWA

Ecco alcuni link dove puoi trovare le PWA, anche dove non ti aspetteresti di vederle, ad esempio, la maggior parte dei servizi Google sono PWA:

Prova ad aprire questi siti/app (anche su desktop!) e ad attivare la modalità aereo mentre spegni Internet.

Se dai un'occhiata da vicino all'immagine sopra, noterai sicuramente che Google Keep funziona chiaramente su un'interfaccia Windows, il che significa che funziona sul desktop come un'applicazione completa!

PWA su desktop

In effetti, le Progressive Web App possono e funzionano sul desktop (sebbene non tutti i browser lo supportino ancora) come le normali applicazioni.

Ecco un esempio dello schermo del mio computer. Tutto, tutte le applicazioni attualmente aperte sullo schermo sono PWA.

D'accordo, è incredibilmente conveniente! Queste applicazioni non hanno bisogno di essere installate, pochi clic del mouse e tutte le impostazioni, l'intero ambiente di lavoro è già a tua disposizione. E non importa su quale computer lavori, su un desktop o su un laptop. In quale stato il lavoro è stato abbandonato, nello stesso stato sarà in un altro luogo di lavoro.

Ma come è possibile?

Implementazione di app Web progressive (PWA)

Prima di tutto, è importante capire che qualsiasi applicazione PWA è un sito web, o meglio, il pieno utilizzo del Web Stack:

• Interfaccia utente dell'applicazione - HTML/CSS su HTTPS (obbligatorio!)
• Interazione utente (interattiva) - AJAX (preferiamo l'interazione API REST)
• Avvisi, sincronizzazione dati forzata - API push
• Memorizzazione nella cache dei dati per il lavoro offline - Service Workers e Cache API (maggiori dettagli di seguito)

Ecco un piccolo tutorial su come creare la tua prima app da zero, disponibile su Google Сodelabs.

manifesto PWA

È il SW che implementa la politica di memorizzazione nella cache dell'applicazione affinché l'applicazione funzioni in modalità offline. È chiaro che sarà diverso per ogni applicazione, ma molto spesso gli sviluppatori utilizzano la politica Offile First. C'è un articolo meraviglioso (anche vecchio! Le PWA non sono nate oggi né ieri! E non lo sapevi :)), che spiega bene il perché. Assicurati di prenderti il ​​tempo e studiarlo:
https://alistapart.com/article/offline-first

In generale, Service Wordker è tutt'altro che una cosa così innocua come potrebbe sembrare a prima vista, e per sempre richiedono una considerazione dettagliata, ma per ora ti offriremo una soluzione così semplice come primo esperimento.
https://justmarkup.com/log/2016/01/add-service-worker-for-wordpress/

Non pensarla come una soluzione completa per il sito, ma è un'ottima piattaforma per sperimentare e prendere a calci in culo! Forse più avanti scriverò dei nostri dossi e delle numerose trappole che abbiamo calpestato durante le prime implementazioni di PWA sui siti web. Se sei interessato a questo argomento, scrivi domande nei commenti.

Implementazione di PWA su siti WordPress

Stranamente, ma nonostante il fatto che le Progressive Web App siano in circolazione da molto tempo (e l'idea in sé ha già più di un anno!), gli sviluppatori non ne parlano molto. E non ci sono così tante soluzioni già pronte per il CMS più comune al mondo. Ma c'è. Ecco alcuni plugin che ti consentono di incorporare funzionalità PWA nei tuoi siti WordPress:

• Super Progressive Web Apps è un plugin abbastanza semplice ma di grande successo.
• Progressive Web Apps di PWAThemes.com è una soluzione più complessa, ma anche più flessibile che consente, tra le altre cose, di creare temi (aspetto) separati per la visualizzazione PWA.

Installazione pratica di PWA su un sito WordPress

Per cominciare, ho preso un negozio online abbastanza semplice di lingerie erotica - https://www.lustshop.ru/
Nota: HTTPS è richiesto!

Ho installato il plugin Super PWA e impostato le impostazioni iniziali (non ce ne sono molte):

Svuotate le cache del sito e provate ad accedere dal dispositivo mobile:

Ecco un banner per l'installazione dell'applicazione nella parte inferiore dello schermo

L'applicazione è in fase di installazione...

Qualunque cosa! App PWA sul tuo dispositivo mobile!

Ora proviamo a metterlo sul desktop. Per fare ciò, seleziona questa voce nel browser:

Pronto! L'applicazione è apparsa sul desktop!

Brevi conclusioni

Quindi, come vediamo, le Progressive Web Apps uniscono effettivamente siti e applicazioni, sfumando i confini tra di loro.

Utilizzando l'approccio PWA, possiamo creare un servizio conveniente (sito web? applicazione?) che funzionerà in qualsiasi condizione, su qualsiasi piattaforma.

I plugin ti permetteranno di creare una semplice applicazione PWA, ma non risolveranno tutti i problemi. Una buona applicazione deve essere attentamente progettata e sviluppata da te.

Ma questa è una storia completamente diversa...

Il concetto di Progressive Web Applications (PWA) esiste da molto tempo, dalla primavera del 2018, le applicazioni di questa classe sono supportate da tutti i principali browser, ma la prevalenza delle tecnologie PWA, nonostante i loro evidenti “vantaggi”, è ancora molto basso.

Gli specialisti di Google (incluso su Habré) scrivono in modo molto informativo e competente sulla PWA, ma i loro consigli sono più utili per coloro che hanno già familiarità con l'argomento. Questo articolo ha lo scopo di mostrare che le app Web progressive non sono difficili e gli sviluppatori di qualsiasi sito possono e devono utilizzare queste tecnologie in questo momento.

Filosofia PWA

Per cominciare, vale la pena notare che non esiste una definizione esatta di un'applicazione PWA. È impossibile dire chiaramente se si tratta di un sito PWA o meno. Si tratta di una scala estesa, su cui è possibile localizzare la “homepage” del secondo anno Petya, che ha aggiunto un manifest di app Web che crea un'icona del sito nella schermata iniziale di un telefono cellulare; ed esteriormente indistinguibile da un normale sito di notizie, solo i cui utenti possono dire che è sorprendentemente veloce e conveniente, e tutto perché da qualche parte al suo interno batte il cuore caldo di un addetto ai servizi "a".

La relatività di PWA risiede nel nome stesso: "progressista". Progressivo rispetto a cosa e in che misura? Ma questa relatività è in realtà molto buona, perché puoi imparare le tecnologie PWA e applicarle nei tuoi progetti attuali gradualmente, senza rimodellamento e refactoring globale.

D'altra parte, PWA ha un'idea, e l'idea è abbastanza chiara e potente. E la lentezza con cui si svolge potrebbe indicare l'entità delle conseguenze.

Architettura PWA

PWA è un'applicazione web creata utilizzando determinate tecnologie per raggiungere determinati obiettivi.

Gli indicatori target sono decifrati come segue:

Affidabilità(Affidabile) - l'applicazione viene caricata e visualizzata immediatamente, indipendentemente dallo stato e dalla qualità della connessione di rete.
Rapidità(Veloce): la comunicazione di rete è veloce, l'interfaccia utente è fluida e reattiva.
attrattiva(Coinvolgente) - rende l'esperienza di lavoro con l'applicazione comoda e piacevole per l'utente, incoraggiandolo a volerlo sperimentare ancora, e ancora, e ancora ...

Dal punto di vista di Google, questo è ciò che ora separa l'aspetto grafico (aspetto grafico) dei siti Web dalle applicazioni native.

In altre parole, allo sviluppatore vengono offerti strumenti (Service Worker, Push Notifications, ecc.) e vengono indicati gli obiettivi (il sito/applicazione deve essere veloce da caricare, lavorare su una connessione debole, non “lag”, lavorare offline se necessario) . Quanto lontano avanzerà lo sviluppatore lungo questo percorso dipende solo da lui.

PWA e app native

Il fatto che le PWA siano simili nell'aspetto alle applicazioni native è piuttosto una decisione estetica (sebbene sia importante per l'utente da un punto di vista psicologico). Ma il fatto che siano simili internamente (tutte le risorse principali dell'applicazione possono essere archiviate sul client, solo i contenuti modificati verranno trasmessi in rete) è un enorme risultato.

Si potrebbe anche chiamarla una rivoluzione nascosta. In effetti, il browser viene utilizzato come una sorta di macchina virtuale che archivia e avvia l'applicazione PWA in sé. Proprio come Android è una macchina virtuale per app Android, il browser diventa una macchina virtuale per PWA. Proprio come un'applicazione nativa accede alle sue risorse attraverso il file system, anche PWA accede alle sue risorse, sebbene tramite HTTP, ma archiviate localmente.

E per una volta, funziona tutto allo stesso modo su tutti i principali browser e su tutte le principali piattaforme.

Google attacca iOS

Esistono applicazioni mobili che devono essere native (richiede prestazioni, accesso alle risorse di sistema, ecc.), ma esistono applicazioni che, nella loro funzionalità, sono completamente implementate come PWA. Per loro ora:

Non è necessario scrivere versioni diverse per Android e iOS (e Windows)
- Non è necessario registrarsi su Google Play e App Store e pagarlo
- Accesso diretto aperto al desktop

Finora il mercato delle applicazioni mobili è stato chiuso agli appassionati che possono scrivere un programma utile, ma non possono/non vogliono pagarne l'hosting. E non vogliono farsi coinvolgere dalla burocrazia di Google e Apple per rivedere l'applicazione, dopo di che i tempi del monopolio di Microsoft vengono ricordati con nostalgia.

Ora quelle barriere sono state infrante. E Google li ha infranti. Considerando che è lei il fiore all'occhiello delle tecnologie Internet, un tale ingresso nel territorio di iOS è molto probabilmente ben congegnato e calcolato. Resta da aspettare il boom del PWA.

Naturalmente, ci sono differenze tra PWA e applicazioni native - principalmente nei diritti di accesso alle risorse di sistema, ma si sta lavorando in questa direzione anche nel campo del puro HTML5, e per PWA i privilegi aggiuntivi non saranno un problema.

APK vs PWA

Per esperienza personale, possiamo ricordare come, dopo il trasferimento di un sito di notizie per lavorare con Service Worker, si sia deciso di abbandonare l'applicazione Android, realizzata in base alle funzionalità del sito. E non tanto perché il suo supporto richiedeva risorse umane, ma perché la versione PWA, sorprendentemente, era più veloce, più carina e più comoda da usare di un'applicazione java.

Tecnologia

Diamo una rapida occhiata ai principali driver di PWA.

Operaio di servizio

Il cuore di PWA è il Service Worker. Questo è un livello proxy tra il frontend e il backend, situato nel browser. Tutte le richieste del browser passano attraverso di essa. Questa divisione in due livelli indipendenti ha permesso di rendere il più semplice possibile il passaggio di un normale sito Web a PWA.

Dall'archiviazione, Service Worker "a ha accesso a Cache Storage per le risorse Web e IndexDB per i dati. Ma, soprattutto, completa libertà di implementare la logica aziendale.

È possibile, ad esempio, accettare una richiesta dal browser, controllare lo stato della rete, prelevare dati dalla memoria, eseguire operazioni con essi e restituire alcuni risultati al browser, che penserà che la risposta provenga dal server. O non lo sarà - come vuole lo sviluppatore, lo farà. Due livelli del browser (client frontend e Service Worker) consentono di scrivere applicazioni a tutti gli effetti.

Allo stesso tempo, per la maggior parte dei siti, la funzionalità di memorizzazione nella cache del Service Worker "a sarà sufficiente per trasformarsi in una PWA.

PWA non dipende da alcun framework, è puro javascript, anche se anche gli esperti di Google su Habré per qualche motivo consigliano di utilizzare i generatori di codice della libreria. Service Worker è scritto magnificamente a mano e questo è necessario per comprendere e controllare bene la logica della tua applicazione.

Dal punto di vista di un programmatore, Service Worker è un file javascript incluso nel codice html della pagina. In esso, lo sviluppatore definisce la logica per lavorare con le richieste provenienti dal frontend e altre funzionalità.

HTTPS

PWA richiede che tutte le risorse del sito siano trasferite su HTTPS. Puoi ottenere un certificato SSL gratuitamente, alcuni host lo fanno per te. Ma è fondamentale che il sito non abbia collegamenti a risorse non sicure: alcuni browser semplicemente non visualizzeranno il sito in questo caso.

Il problema principale riscontrato in questi casi sono le immagini. Spesso gli editori oi commentatori inseriscono nel materiale collegamenti a immagini da Internet, a volte ci arrivano automaticamente (nel materiale). Devi salvare le immagini su te stesso o su un servizio con accesso tramite HTTPS.

Shell dell'applicazione

La shell dell'app è solo uno scheletro della GUI, un modello. Ad esempio, prendiamo un sito medio con un'intestazione, due colonne e altro ancora. In parole povere, eliminiamo il contenuto della pagina corrente e tutte le informazioni dinamiche da essa, il resto statico è la shell dell'app.

La linea di fondo è che la shell dell'app viene archiviata sul client e caricata all'avvio dell'applicazione, quindi le informazioni dinamiche vengono caricate in essa dalla rete. E durante il caricamento, la shell dell'app dovrebbe avere un bell'aspetto ("caricatori" in posizione, ecc.)

Questa architettura del sito - caricamento di contenuti e altre informazioni dinamiche tramite chiamate ajax - può essere pensata e implementata sul sito in anticipo, quindi il passaggio a PWA sarà abbastanza semplice.

Una shell dell'app è come una shell per un programma nativo. Pensa alla tua PWA come a un programma nativo e le cose diventeranno più facili.

manifesto dell'app Web

File JSON che definisce in modo dichiarativo il nome dell'applicazione per il browser, l'icona, l'aspetto della PWA (schermo intero, standalone, ecc.) e alcuni altri parametri. Ti permette di "installare" PWA come applicazione standalone sulla schermata iniziale del tuo smartphone.

Notifiche push

Se navighi sul Web con Chrome DevTools aperto nella scheda Applicazione, puoi vedere quanti pochi siti utilizzano la tecnologia PWA. E il 90% di coloro che lo usano lo fanno solo per il bene delle notifiche push.

Finora, questa è la tecnologia PWA più popolare e abusata: negli ultimi mesi è cresciuto il numero di siti in cui si cerca per la prima volta il pulsante "Blocca" con il mouse sull'offerta per ricevere le ultime notizie, ad esempio sensazione, molte volte, e il desiderio stesso di imporre il proprio Push è simile allo Spam.

Ma puoi anche offrire un abbonamento alla seconda o terza visita dell'utente al sito, quando è già chiaro che non è qui per caso.

12.04.2017

Questa è una delle tendenze più calde nello sviluppo web, sempre più persone vogliono conoscere questo concetto. In questo articolo cercherò di spiegare la tecnologia PWA (progressive web application) in un modo comprensibile non solo per i professionisti IT, ma anche per coloro che sono interessati ad approfondire il tema delle nuove tendenze nel settore web.

Se guardi i quadrati colorati sulla schermata iniziale del tuo smartphone, ora verranno chiamati "nativi" o "applicazioni native". Sono “nativi” perché progettati per il sistema operativo del tuo smartphone (che sia iOS o Android).

Che cosastessocomeApp Web progressive

Applicazione Web progressiva (PWA)è un sito Web che si presenta e si comporta proprio come un'app mobile, il che significa che può essere aggiunta alla schermata iniziale dello smartphone, inviare notifiche push, accedere all'hardware del dispositivo e lavorare offline. Sì, avete letto bene. L'app Progressive Web funziona in modo altrettanto fluido su una connessione instabile o offline come farebbe con un accesso Internet completo.

Come può un browser aprire un sito Web senza accedere a Internet, chiedi? Che tu ci creda o no, il tuo browser ora è dotato di molte funzioni interessanti che non ti saresti aspettato solo un paio di anni fa.

Siti come whatwebcando.today sono in grado di analizzare l'API del tuo browser e mostrare quali delle funzionalità nativamente disponibili sui dispositivi mobili sono supportate anche dal browser. Provalo e rimarrai sorpreso. La versione di Chrome (57) nel mio esempio supporta 27 delle 36 funzionalità.

Diciamo che il mio browser supporta tutte queste funzionalità: fantastico. Ma ho così tante app native sul mio smartphone che uso ogni giorno, non posso semplicemente abbandonare tutto e passare a PWA. Ma forse qui ci sbagliamo.

Uno studio condotto nel 2015 da marketingland.com ha mostrato una statistica sorprendente: gli utenti mobili trascorrono l'80% del loro tempo sui propri dispositivi utilizzando solo tre app native prioritarie.

Percentuale di tempo trascorso nelle applicazioni prioritarie, da vari utenti

Quindi, ci sono buone probabilità che molte applicazioni native non siano state utilizzate per molto tempo. Devi eseguire la procedura di download, quindi eliminare le applicazioni che non hanno superato il crash test o che sono diventate irrilevanti per te nel tempo. Alcune app mobili rimangono una priorità per la maggior parte di noi, come Facebook, Instagram, app di posta o altre.

Il numero di applicazioni native scaricate sta diminuendo di anno in anno. Negli ultimi anni è diminuito del 20% e questa cifra continua ad aumentare. Nel 2016, il numero di applicazioni scaricate è stato inferiore al numero di quelle eliminate.

Numero medio di app native installate al mese

Un altro svantaggio delle app mobili è che queste app devono essere cercate. Che sia App Store o Google Play, per scaricare un'app dallo store devi prima trovarla lì (il che significa che devi sapere esattamente cosa stai cercando, altrimenti dovrai provarne decine app per trovare quella che fa per te). Clicca su "Download", accetta i termini, attendi che l'applicazione venga scaricata e poi installala... Quando tutto sarà finito, potrai facilmente dimenticare cosa stavi cercando e perché.

Il bello della Progressive Web App è che è molto facile da scoprire, proprio come un normale sito Web: lo cerchi su Google, fai clic sul collegamento per aprirlo e il gioco è fatto, hai l'app sul tuo dispositivo, pronta per essere mostrata. In questo caso, il browser stesso ti chiederà di aggiungere un'icona al desktop. Se sei d'accordo, vedrai l'icona della tua app sulla schermata iniziale del tuo telefono, seduta pacificamente accanto alle app native. Ora puoi avviare PWA proprio come un'app mobile, con una bella schermata iniziale, riconoscimento dell'orientamento, ecc.

Il peso dell'applicazione è un altro fattore importante. Il peso medio di un'applicazione nativa è di circa 25 MB. Alcuni di loro sono stati nutriti. Più servizi appaiono vari, più applicazioni si affollano nei nostri smartphone e non sempre c'è spazio sufficiente per tutti.

Il peso medio delle Progressive Web App è di soli 2 MB.

Quali sono i vantaggi delle Progressive Web App

• Gli sviluppatori Web che non hanno avuto paura di essere i primi ad affrontare le nuove tecnologie affermano che le PWA sono facili da sviluppare rispetto ai siti moderni.
• Le Progressive Web App stanno diventando indispensabili nel campo della SEO. Google sta spingendo le PWA significativamente più in alto nelle SERP. Inoltre, tutte le applicazioni web progressive funzionano rispettivamente sul protocollo HTTPS, anche Google risponde positivamente a questo e premia il sito con un ranking del sito più favorevole.
• Le app Web progressive multipiattaforma ci danno la possibilità di creare un'applicazione Web che funzionerà su tutti i dispositivi in ​​cui è presente un browser.
• La possibilità di continuare a utilizzare la tua app quando la tua connessione Internet si interrompe e la maggiore velocità di caricamento con PWA ti impediranno di perdere potenziali conversioni e aumentare le frequenze di rimbalzo.

così, L'app Web progressiva èsito web, che il:

• può essere "installato" su uno smartphone
• sembra un'app nativa
• funziona offline
• invia notifiche push

Allo stesso tempo, i suoi vantaggi rispetto alle applicazioni native:

• multipiattaforma
• indicizzato
• poco peso
• l'installazione è suggerita dal browser
• installazione istantanea
• non c'è bisogno di aggiornare, fornisci sempre contenuto e interfaccia aggiornati
• Miglioramenti SEO

D'accordo, tali punti di forza delle Progressive Web Apps ti fanno pensare che le applicazioni mobili native saranno presto condannate.

È importante capire che "Progressive Web Apps" non è un framework o un linguaggio di programmazione. È più simile a un insieme di requisiti che un'applicazione Web deve soddisfare per funzionare correttamente come applicazione progressiva. Questa è la capacità delle applicazioni Web di combinare le funzionalità delle applicazioni mobili native e mantenere i vantaggi del sito.

Diamo un'occhiata a come una PWA può funzionare come app mobile nativa.

Cache della shell dell'applicazione

Questo è il set minimo di HTML, CSS e JavaScript richiesto per visualizzare la pagina principale dell'applicazione. Quando vai online e apri un sito web, stai aspettando che l'intera pagina master venga caricata, e questo include non solo il contenuto dinamico della pagina, ma tutte le immagini, i caratteri, i fogli di stile, i JavaScript utilizzati nella pagina e la maggior parte di essi .rimanere lo stesso, non importa quante volte apri il sito. Quindi perché non memorizzare nella cache tutto?

Al primo avvio, PWA memorizza nella cache tutte le risorse statiche e la shell dell'applicazione. La prossima volta che l'app viene avviata, estrarrà le informazioni statiche dell'app direttamente dalla cache, migliorando notevolmente il tempo impiegato dall'utente per vedere quei preziosi pixel sullo schermo. Se hai mai provato ad aprire un sito web su una connessione 3G, capirai cosa intendo.

Leggi anche: 10 motivi per cui il tuo pubblico su Instagram non sta crescendo e come risolverlo

Memorizzazione nella cache delle risposte

Questa è forse la cosa più potente di cui sono capaci le PWA. Possono memorizzare nella cache non solo i componenti statici della shell dell'applicazione, ma anche intere risposte dalle richieste GET.

Diciamo che ieri hai visitato una PWA di notizie per leggere le notizie. Se lo apri oggi, riceverai immediatamente il feed delle notizie di ieri mentre l'app scarica nuovi contenuti in background, iniettandoli dinamicamente nel feed che stai già guardando. Se non riesci a ottenere nuovi contenuti, ad esempio perché sei offline, rimarrai con il feed di ieri, ma almeno non riceverai errori.

Esistono diversi algoritmi di memorizzazione nella cache che possono essere implementati, la scelta dipende dallo scopo dell'applicazione.

Algoritmi di memorizzazione nella cache

Cache con fallback alla rete	Rete con fallback alla cache	Corsa alla cache e alla rete
"Cache con riserva per la rete" Da utilizzare se stai creando una prima app autonoma. Se la risposta è già nella cache, verrà passata all'utente e la richiesta online non verrà mai completata. Se la risposta non è ancora memorizzata nella cache, l'applicazione tenterà di scaricarla online e quindi memorizzarla nella cache. Questo approccio dovrebbe essere utilizzato per i contenuti che cambiano molto raramente o non cambiano affatto.	"Una rete con fallback alla cache" Questo è l'approccio in cui gli utenti online ottengono sempre la versione online aggiornata e gli utenti offline ottengono la versione memorizzata nella cache. Usalo per le risorse che vengono aggiornate frequentemente.	"Cache e corsa alla rete" Questo è quando stai cercando una risposta nella cache mentre richiedi contemporaneamente contenuti online. Per prima cosa mostri la risposta memorizzata nella cache dell'utente e poi la sostituisci con nuovi contenuti non appena viene visualizzata, oppure aggiungi nuovi contenuti in cima alle pagine memorizzate nella cache come Facebook e Twitter.

ManifestoPWA

Indipendentemente dal modello utilizzato, c'è sempre un caso in cui la risposta non viene memorizzata nella cache e non può essere recuperata online. In questo caso, viene servita una pagina HTML statica (che è anche memorizzata nella cache come parte della shell dell'applicazione) che dirà qualcosa di grazioso per placare l'utente, come "Scusa amico, la tua cache è vuota e Internet non funziona". Questo è un modo per far sapere all'utente che qualcosa è andato storto e che non c'è modo di servire quel particolare contenuto al momento. Ciò renderà l'applicazione a prova di errore e la manterrà in esecuzione anche durante l'apocalisse.

Il supporto offline è estremamente importante, ma per sostituire correttamente un'app nativa, una PWA deve apparire e comportarsi come un'app nativa. Ciò si ottiene utilizzando il file manifest.json, che contiene le proprietà dell'applicazione in formato JSON come nome, URL della home page, icone per varie risoluzioni, colori della schermata iniziale, orientamento del dispositivo e così via.

( "nome": "Nome dell'applicazione", "short_name": "Short name" , "icons": [( "src" : "images/icons/icon-128x128.png", "dimensioni": "128x128" , "tipo": "image/png" ), ( "src": "images/icons/icon-144x144.png", "sizes" : "144x144" , "type": "image/png" ), (...), ( "src": "images/icons/icon-256x256.png", "sizes": "256x256" , "type": "image/png" )], "stert_url": "/index.html" , "display": standalone" ,//browser? interfaccia utente minima, schermo intero"background_color": "#3E4EB8 "display": "2F3BA2 )

Se apri l'app due volte sul tuo dispositivo mobile, almeno 5 minuti tra le visite, ti verrà chiesto di installarla sul tuo dispositivo, come abbiamo già spiegato sopra (supponendo che il manifest sia a posto, ovviamente).

Operaio di servizio

Tutta la memorizzazione nella cache che è stata detta viene eseguita da un piccolo browser helper chiamato "Service Worker" che essenzialmente non è altro che un file JavaScript che risiede nell'applicazione, ma viene eseguito in un processo separato, il che significa che non verrà completato. chiudendo l'applicazione nel browser (o anche nel browser stesso). Dopo la registrazione con la home page dell'applicazione, Service Worker memorizza nella cache le informazioni statiche nella shell dell'applicazione e inizia a elaborare le richieste inviate dall'applicazione, memorizzando nella cache e fornendo le risposte in base alla logica programmata in essa.

Le app Web progressive trasformano siti Web e servizi Web in quelle che sembrano essere applicazioni autonome. Questo approccio presenta numerosi vantaggi, in particolare, gli utenti possono eseguire applicazioni direttamente dal sistema operativo e persino utilizzarle senza una connessione di rete.

Il supporto offline dipende molto dall'app specifica e dalle funzionalità che fornisce. L'applicazione Blocco note dovrebbe funzionare correttamente offline, mentre i servizi Spotify o Twitter potrebbero non funzionare o supportare solo un insieme limitato di funzioni, poiché per scaricare i dati sul dispositivo dell'utente è necessaria una connessione Internet attiva.

Le PWA possono anche utilizzare le funzionalità fornite dal sistema operativo. Ad esempio, in Windows 10, le applicazioni possono utilizzare il centro notifiche del sistema operativo o rispettare regole e criteri specifici del sistema operativo.

Nota: gli utenti Linux e Mac OS X devono abilitare il criterio del browser chrome://flags/#enable-desktop-pwas impostandolo su Abilitato. Google prevede di aggiungere il supporto PWA per impostazione predefinita per questi sistemi solo in Chrome 72.

Installa PWA in Chrome

Google ha integrato il supporto per le app Web progressive in Chrome 70, che è stato rilasciato nell'ottobre 2018. Per installare tali applicazioni, viene utilizzato un approccio abbastanza semplice.

Gli utenti di Chrome devono visitare la pagina PWA, ad esempio la pagina dell'app Blocco note ">Blocco note , e selezionare dal menu principale Installazione dell'app "Blocco note"... per l'installazione.

Chrome quindi carica l'app nella sua interfaccia nativa e quindi la aggiunge all'elenco delle app installate sul sistema operativo. Gli utenti di Windows 10 potranno trovare l'applicazione nel menu di avvio e avviarla in qualsiasi momento.

Poiché l'applicazione è elencata nel menu Start, puoi interagire con l'applicazione come qualsiasi altra applicazione installata. Fare clic con il pulsante destro del mouse per aggiungere un'app al menu Start o alla barra delle applicazioni, disinstallare l'app, aprirne la posizione o eseguirla come amministratore.

Chrome elenca anche le app Web progressive installate e offre agli utenti opzioni da gestire. Google ha deciso di integrarli con le applicazioni nel browser. Quindi, per vedere l'elenco completo delle applicazioni installate, visita la pagina chrome://apps/.

Puoi aprire qualsiasi app installata con un clic o toccare il touch screen. Diverse opzioni utili sono disponibili nel menu di scelta rapida: rimuovere PWA da Chrome, creare un collegamento o disabilitare l'opzione "Apri in una nuova finestra" per aprire il programma di avvio in una nuova scheda del browser.

Chrome e PWA

Il supporto PWA funziona subito dopo l'installazione del browser ed è implementato per la massima comodità dell'utente. La limitazione più grande in questo momento è che Google non gestisce un negozio o un repository di app Web progressive.

La società potrebbe aggiungere app progressive al Chrome Web Store, ma al momento non sono stati annunciati piani di questo tipo.

Gli utenti di Chrome che desiderano utilizzare PWA devono visitare l'indirizzo esatto dell'app ogni volta per installarla nel menu principale di Chrome. Puoi cercare tali applicazioni manualmente oppure puoi utilizzare elenchi di terze parti, ad esempio l'elenco su "> Outweb .

Trovato un errore di battitura? Premi Ctrl+Invio

I siti moderni con Progressive Web Apps (PWA) possono convertire il sito in un'applicazione mobile. Al momento della visita di un tale sito, da dispositivo mobile, il browser offre un messaggio pop-up " AGGIUNGERE ALLA SCHERMATA HOME" e se l'utente è d'accordo, il sito viene installato come applicazione in background. D'ora in poi, il sito su Internet rimane un sito e su un dispositivo mobile è un'applicazione mobile.

No, non mi sbaglio. Ora il sito sta diventando un'applicazione mobile con tutte le sue caratteristiche e vantaggi. Non è molto bello! Nota questo punto, non abbiamo bisogno di andare in un App Store speciale o in un app store mobile di Google Play, eseguiamo un'installazione diretta, il che è molto più interessante.

Questa app ha dei limiti? Assolutamente no! Le restrizioni possono essere solo nella funzionalità, ma non dipendono dall'applicazione stessa, ma dalla funzionalità che è incorporata in essa. Successivamente, toccheremo le risorse per la creazione e l'implementazione di app Web progressive sui siti.

Attenzione. Sito moderno con tecnologia App Web progressive carica molto velocemente. Funziona con qualsiasi connessione Internet, sia essa a banda larga 4g o debole 2g, o nessuna connessione Internet, offline. Il funzionamento offline del sito si basa sulle informazioni tratte dalle visite predittive.

Come funziona un'applicazione del genere? L'applicazione che abbiamo installato funziona offline e non necessita di un browser. Quando lo avvii, vedi lo stesso sito di Internet con tutte le sue funzionalità: leggi notizie, fai acquisti, lascia commenti. Inoltre, puoi usarlo offline con una connessione Internet debole o assente. Ad esempio, scrivi un messaggio o riempi il carrello di merci, e in quel momento c'è stata una pausa con Internet, non preoccuparti, le tue azioni verranno salvate offline e, quando la connessione verrà ripristinata, verranno trasferite al posto. Non è fantastico!

Vantaggi principali dei siti Web con app Web progressive

1. Progressività. Con ogni nuovo aggiornamento, otteniamo nuove innovazioni tecnologiche. Avendo connesso una volta, rimaniamo, per così dire, nello sviluppo di nuove tecnologie.
2. Adattabilità. La capacità di adattarsi ai diversi sistemi operativi dei dispositivi, ai loro schermi e alle loro capacità.
3. Connessione Internet indipendente. Lavoro autonomo fuori rete - offline.
4. Come un'app nativa. Nativo significa avere la propria shell software che si carica rapidamente.
5. Sicuro. Lavorando su protocollo HTTPS sicuro.
6. Ricercabile su Internet. Un'applicazione web progressiva è ancora un sito su Internet, è ricercabile, è indicizzata.
7. tecnologia push. Possibilità di comunicazione tra il titolare e l'utente tramite l'invio di messaggi (notifiche push) al dispositivo.
8. Facile installazione e distribuzione. Installazione con un clic, bypassando l'App Store o gli app store di Google Play. Puoi condividere con un link.

Perché è necessario implementare PWA su siti moderni?

Non è un segreto che nel 2014 si sia svolto un evento storico che ha cambiato il volto di Internet. Richiamare. Quindi il numero di visitatori Internet da dispositivi mobili ha superato il pubblico di visitatori da computer desktop. Da allora, sempre più spesso sentiamo, sito mobile, design adattivo. Vedi il grafico della crescita degli utenti di Internet mobile.

I motori di ricerca hanno immediatamente risposto ai nuovi requisiti per i siti. È diventato obbligatorio disporre di una versione mobile del sito o di una versione adattiva, altrimenti, come minimo, il sito perderebbe visitatori mobili.

Più della metà della popolazione mondiale è attualmente online. Il numero di utenti Internet nel mondo aumenta di oltre il 20% ogni anno.

• Due terzi della popolazione mondiale usa uno smartphone.
• Il numero di visitatori mobili unici al mondo è cresciuto del 4% in un anno.
• Gli smartphone sono il dispositivo preferito per l'accesso a Internet, costituendo la maggior parte degli utenti web messi insieme.

Come iniziare a utilizzare PWA nei siti Web moderni

Sviluppo di siti Web moderni con WordPress

App Web progressive (PWA)è una nuova tecnologia che combina i migliori siti per dispositivi mobili e le migliori app per dispositivi mobili per creare un'esperienza Web mobile superiore. Si installano sul telefono come una normale applicazione (applicazione web) e sono accessibili dalla schermata iniziale.

Gli utenti possono tornare al tuo sito avviando l'app dalla schermata iniziale e interagendo con il tuo sito tramite l'interfaccia dell'app. I tuoi visitatori si accenderanno quasi istantaneamente e godranno dei grandi vantaggi della tua PWA!

Una volta installato SuperPWA, gli utenti che navigano nel tuo sito da un dispositivo mobile vedranno una notifica "Aggiungi alla schermata iniziale" (nella parte inferiore dello schermo) e potranno "Installare il tuo sito" sulla schermata iniziale del proprio dispositivo. Ogni pagina che visiti è memorizzata localmente su quel dispositivo e sarà leggibile anche offline!

SuperPWA è facile da configurare, ci vuole meno di un minuto per installare l'app web progressiva. SuperPWA esegue una disinstallazione pulita, eliminando ogni voce e file di database che crea. Infatti, nessuna delle impostazioni predefinite viene memorizzata nel database finché non vengono salvate manualmente per la prima volta. Provalo.

Cosa c'è nella scatola

Ecco le caratteristiche attuali delle app Web Super Progressive:

• Impostazione di un'icona per la tua applicazione web progressiva.
• Imposta il colore di sfondo per la schermata iniziale dell'app Web progressiva.
• Il tuo sito web visualizzerà una notifica "Aggiungi alla schermata principale" quando si accede da un browser.
• Caching aggressivo della pagina tramite l'API CacheStorage.
• Le pagine che una volta erano memorizzate nella cache vengono servite anche se l'utente è offline.
• Imposta una pagina offline personalizzata: se vuoi servirla all'utente e non è nella cache e sarà disponibile anche quando l'utente è offline.
• Supporto per il colore tematico.
• Ora puoi modificare il nome dell'app e la breve descrizione.
• Imposta la pagina iniziale della tua PWA.
• Imposta le Accelerated Mobile Pages (AMP) come pagina iniziale.
• Plugin supportati: AMP per WordPress, AMP per WP, Better AMP, AMP Supremacy, WP AMP.
• Aggiunto supporto per splash screen di alta qualità.
• È ora possibile impostare un'icona 512px × 512px per la schermata iniziale dell'app Web progressiva.
• Le app Web super progressive ora rispettano gli aggiornamenti dei contenuti e aggiornano la cache quando il sito Web viene aggiornato.
• Gestione migliorata degli aggiornamenti desktop nel browser.
• Ora puoi impostare l'orientamento predefinito della tua PWA. Selezionare Qualsiasi (Orientamento dispositivo), Verticale o Orizzontale.
• Ora puoi impostare la proprietà theme_color nel manifest.
• Integrazione OneSignal per le notifiche push.
• Compatibile con la rete multiutente di WordPress.

Come convertire il tuo sito WordPress in un'app Web progressiva

Installazione in WordPress in cinque passaggi:

1. Accedi come amministratore di WordPress
2. Plugin
3. Aggiungere nuova
4. Nella barra di ricerca scrivi: "PWA"
5. Fare clic su "Installa" e poi su "Attiva"

Per installare manualmente:

1. Carica la cartella Super Progressive Web Apps nella directory /wp-content/plugins/ sul tuo server
2. Vai a Amministrazione WordPress > Plugin
3. Attiva il plug-in Super Progressive Web Apps dall'elenco.

La tua app Web progressiva dovrebbe essere pronta per l'uso con le impostazioni predefinite al momento dell'attivazione. Puoi anche personalizzarlo ulteriormente e renderlo veramente tuo.