Una guida su come convertire un sito Web in un'app Web progressiva (PWA)

In un arco di tempo molto breve, le PWA hanno lasciato un segno molto importante nel settore delle app mobili.

Il concetto, che Google vuole che tu sappia , è una tregua per l'industria che ha continuamente presentato le stesse lamentele più e più volte -

Per quanto riguarda i siti Web: velocità di caricamento lenta e bassa frequenza di risonanza

Per quanto riguarda le app mobili: le app occupano molto spazio di memoria, dipendono dalla connessione di rete e dai lunghi passaggi che gli utenti dovranno compiere dalla ricerca di un'app all'inizio dell'utilizzo.

Poiché le Progressive Web App (PWA) vengono scaricate direttamente da un sito Web e vengono eseguite anche come sito Web, gli utenti ne traggono vantaggio in tre modi:

• Possono risparmiare sul tempo necessario prima per trovare un'app nello store, installarla e quindi inserire le informazioni per iniziare
• Poiché le app Web progressive funzionano come un sito Web, occupano uno spazio di archiviazione minimo sul dispositivo e
• Poiché funzionano principalmente come un sito Web, vale il concetto di cache, che consente all'app di funzionare anche in assenza di connessione di rete.

Motivi per convertire il tuo sito web esistente in PWA

Oltre a offrire questi ovvi vantaggi agli utenti, le Progressive Web Apps, la combinazione ideale di siti Web e app mobili, sono emerse anche come la formula conveniente per il successo aziendale. Questo è il motivo per cui le persone non vedono l'ora di convertire la pagina Web in un'app.

I vantaggi che le PWA apportano alle aziende essendo facilmente rilevabili, occupando meno spazio di memoria, offrendo bassi costi di sviluppo e, infine, eseguendo offline a grande velocità possono essere misurati osservando il cambiamento nei numeri di crescita di questi famosi marchi –

Storie di successo come queste e molte di queste nel settore sono sufficienti per far sì che ogni azienda mobile moderna cerchi la migliore società di sviluppo di app Web progressive e cerchi modi su come convertire i siti Web in PWA.

Se anche tu hai intenzione di convertire il sito Web in un'app Web progressiva e usufruire di tutti i vantaggi a basso costo di investimento che il concetto ha da offrire, sei nel posto giusto.

Ecco i passaggi esatti per convertire un sito Web PHP in PWA o come trasformare un sito Web in un'app , come condiviso da Google con il nostro team di sviluppatori di app Web progressivi (uno dei vantaggi di essere una delle agenzie di sviluppo Google ufficiali) .

Ma prima cosa. Conoscere gli elementi necessari per creare PWA da un sito Web o se si desidera trasformare una pagina Web in un'app.

Come trasformare un sito Web in PWA

Per convertire il sito Web in PWA , ecco le tre cose necessarie:

1. Un dispositivo Android collegato con Chrome 52 o versioni successive,
2. Una conoscenza di base di Git e Chrome DevTools,
3. Il codice di esempio e
4. Un editor di testo

Una volta che li hai pronti, preparati a convertire il Web in PWA o convertire il sito Web in un'applicazione Web.

Passaggio 1: carica l'URL

Il primo passo per migrare il tuo sito web su PWA è clonare il repository GitHub dalla riga di comando:

 $ git clone https://github.com/googlecodelabs/migrate-to-progressive-web-apps.git

Ciò consentirà di sviluppare una directory Migrate to PWA con il codice completato per ogni passaggio. Per questo codelab specifico, carica il file di lavoro e quindi apporta le modifiche lì.

Una volta che il tuo codice è stato estratto, usa la "Simple HTTP Server Application" per servire il file di lavoro sulla porta 8887.

Successivamente, sarai in grado di caricare l'URL per convertire il sito in PWA.

Passaggio 2: visualizza il sito sul tuo cellulare

Questo è il secondo passaggio per trasformare il sito Web in un'app Web progressiva. Nel caso in cui tu abbia un dispositivo Android collegato al desktop, digita questo nel tuo URL: chrome://inspect. Ciò ti consentirà di impostare una porta in avanti con l'aiuto della porta che hai scritto in precedenza sulla stessa porta sul dispositivo.

Premi Invio per salvare.

Ora sarai in grado di accedere alla versione base del tuo sito Web su – http://localhost:8887/ sul telefono Android connesso.

Passaggio 3: aggiungi i tag testa moderni

Per convertire il sito Web in un'app mobile, la prima cosa che dovrai fare è rendere il sito Web mobile friendly e in secondo luogo dovrai aggiungere un manifesto dell'app Web. Il manifest descriverà le metainformazioni del sito in modo tale da apparire nella schermata iniziale dell'utente.

Se non disponi di un sistema di creazione di modelli, aggiungi queste righe:

 <testa>

<meta name= “viewport” content=”width=device-width, user-scalable=no” />

<link rel= “manifest” href= “manifest.json” />

</testa>

• Viewport : la prima riga è costituita da un meta tag che specifica il viewport. Questo elemento ti aiuterà con la reattività. Dopo aver scritto la riga di codice una volta ricaricato il sito, troverai il sito che si adatta perfettamente al tuo dispositivo.
• Manifesto : nella seconda riga del codice hai fatto riferimento al file, un movimento necessario per controllare il modo in cui il sito viene aggiunto alle schermate iniziali.

Una volta terminato, apri un editor di testo. È ora di scrivere JSON. Nella sezione short_name, specifica cosa verrà mostrato nella schermata iniziale e prova a mantenerlo entro 15 caratteri .

Successivamente, salva il tuo file come nomenclatura manifest.json e ricarica la pagina sul dispositivo Android e vai nel menu in alto a destra e opta per ' Aggiungi alla schermata principale '. Ora potrai vedere la tua icona nella schermata iniziale!

Passaggio 4: aggiungere un addetto al servizio

Service Worker è lo script in background che il browser può eseguire mentre l'utente non è nella pagina. È l'elemento che fornisce il supporto offline e si attiva quando viene inviata la notifica.

Crea un addetto ai servizi

Copia questo codice in un nuovo file e poi salvalo come sw.js.

 /** Un addetto ai servizi vuoto! */

self.addEventListener ('fetch', funzione(evento)

{

/** Un gestore di recupero vuoto! */

});

E questo è tutto.

Registra il lavoratore del servizio

Dovrai registrare il codice nel codice del tuo sito web per trasformare la pagina web in un'app, per questo apri il tuo file site.js e incollalo -

 navigator.serviceWorker && navigator.serviceWorker.register('./sw.js').then(function(registration) { console.log('Eccellente, registrato con ambito: ', registration.scope);});

Ora, il codice verrà eseguito ad ogni singola pagina caricata. Controlla se funziona correttamente ricaricando la pagina e quindi controllando – chrome://serviceworker-internals/

Ora il tuo sito Web sarà in grado di richiedere agli utenti di installarlo sulle loro schermate iniziali e, in secondo luogo, sarai in grado di rendere il tuo sito in grado di supportare le notifiche push e persino di funzionare offline.

Passaggio 5: fai in modo che il sito funzioni offline

Il primo passo sarebbe aprire lo script sw.js e ottenere l'oggetto cache. Una volta che lo hai, aggiorna il codice e applichi l'intero sito Web nella cache.

Prova come funziona ora. Disinstalla l'app attuale e caricala su Chrome. Quindi, aggiorna la pagina e seleziona " Aggiungi alla schermata principale " nel menu nell'angolo destro.

Per rispettare la regola secondo cui quando Service Worker cambia, la pagina deve essere ricaricata e reinstallata, tutto ciò che devi fare è aggiungere un componente che abbia la "versione" del Service Worker. Quando ciò cambia, il movimento di installazione si verifica di nuovo, memorizzando nella cache le risorse che sarebbero state modificate.

Congratulazioni, ora sai come convertire l' app Web in PWA e se hai seguito i passaggi fianco a fianco, ora hai persino migrato il tuo sito Web in un'app Web progressiva!

*Disclaimer*: questi passaggi ti daranno, lo sviluppatore, un'idea esatta di come dovrai riempire gli spazi vuoti e passare dal punto A nel processo al punto C. Se stai leggendo questo come un imprenditore entusiasta che desidera converti wordpress in un'app web progressiva o vuoi creare un'app da un sito web, direi, non farlo senza avere il supporto di un fornitore esperto di servizi di sviluppo di app progressive.

Sebbene questi passaggi siano esplicativi su come trasformare un sito Web in un'app o convertire un'app Web in un'app Web progressiva, ci sono una serie di elementi che emergono come parte del processo quando ti siedi con il processo di sviluppo effettivo . Quindi, invece di provare i passaggi per creare app dal sito Web e trovare un risultato diverso perché non eri sicuro degli elementi tra le righe, affida il lavoro a una società di sviluppo PWA specializzata nel dominio. Gli esperti risponderanno a tutte le domande relative a come convertire un sito Web in un'app, come trasformare un sito Web in un'app.