Le app native sono note per le loro ampie funzionalità, dato che sono perfettamente integrate con il dispositivo su cui sono installate. Le app Web non vantano le stesse funzionalità delle app native. Tuttavia, poiché dipendono dal browser sul quale vengono eseguite, sono note per avere una maggiore compatibilità. Le PWA combinano il meglio dei due mondi. Queste app sono sviluppate con linguaggi di programmazione e scripting standard come CSS, HTML, JavaScript, proprio come qualsiasi sito Web. È possibile accedere a una PWA tramite qualsiasi browser conforme agli standard. Hanno funzionalità offline e notifiche push e possono anche accedere all’hardware di qualsiasi dispositivo, proprio come le app native. Forse la parte migliore è che possono essere utilizzati da qualsiasi tipo di attività, dalle autorità di marketing digitale come Neil Patel ai servizi di revisione della scrittura personalizzati come Best Writers Online e Online Writers Rating. Chiunque può utilizzare app Web a proprio vantaggio.
Come puoi sviluppare un PWA?
Il modo più popolare sarebbe tramite Google Workbox. Qualsiasi sviluppatore che ha utilizzato SolidWorks toolbox e sq-precache, apprezzerà il passaggio a Workbox. Può essere utilizzato per la generazione di service worker, per eseguire il precaching, il routing e la cache di runtime, grazie ai suoi solidi strumenti e librerie. Workbox può anche aiutarti a sincronizzare il tuo service worker con Google Analytics e la sincronizzazione in background.
Scrivere il proprio PWA con Workbox implica essenzialmente la creazione di un service worker. Per questo, dovrai lavorare attraverso la libreria workbox-sw.js e anche Node.js (il modulo workbox-cli).
Prerequisiti per lo sviluppo di PWA tramite Workbox:
● Conoscenza di base dello sviluppo front-end di JavaScript, HTML e CSS
● Conoscenza delle Promises su ES2015 (ES6)
● Conoscenza del funzionamento da riga di comando
● Buona esperienza con i service worker
● Esperienza ragionevole con Node.js
● Connessione a Internet
● Browser conforme agli standard
● Accesso al terminale / shell tramite un desktop / laptop
● Qualsiasi editor di testo
● Node.js e Node Package Manager (npm)
I seguenti passaggi ti aiuteranno a eseguire un service worker di base per un semplice PWA stile blog tramite Google Workbox. In questo modo potrai avere un’idea di cosa può fare per te un PWA .
# 1 Installa Node.js
Segui questo link per ottenere l’ultima versione di Node.js LTS (lungo termine di supporto). Visita Github per scaricare il codice di avviamento in formato zip. Oppure potresti semplicemente clonarlo da Github con questo comando:
git clone https://github.com/googlecodelabs/workbox-lab.git
Questo passaggio non è necessario se si dispone già di Lode Node.js.
# 2 Imposta le dipendenze del progetto e avvia il server
Nella riga di comando, accedi alla directory del progetto, usando:
cd workbox-lab/project
Quindi eseguire i comandi seguenti:
npm install npm install --global workbox-cli@^3.0.0
Questi prepareranno le dipendenze del progetto.
Quindi, esegui questi comandi di creazione e pubblicazione di app:
npm run build npm run start
Apri http: // localhost: 8081 / per avviare l’app e verificarla. Tieni presente che a questo punto, abbiamo un service worker vuoto.
# 3 Usa workbox-sw per creare un service worker di base
Ora che disponiamo di un’app di avvio funzionale, aggiungi lo snippet di codice seguente nel file del service worker, src / sw.js (questo file può essere nella cartella workbox-lab / project):
src/sw.js
importScripts ( 'https://storage.googleapis.com/workbox-cdn/releases/3.5.0/workbox-sw.js');
if (casella di lavoro) {
console.log (`Yay! Workbox è caricato 🎉`);
workbox.precaching.precacheAndRoute ([]);
} else {
console.log (`Boo! Workbox non ha caricato 😬`);
}
Salva dopo aver inserito questo nel file src/sw.js.
# 4 Configura la casella di lavoro
Il prossimo passo è creare il file di configurazione per il workbox-cli. Questo è il passaggio preliminare da eseguire per iniettare il service worker con un precache manifest .
Immettere questo comando dalla directory del progetto.
procedura guidata casella di lavoro –injectManifest
La riga di comando fornirà alcuni prompt dopo aver eseguito questo comando.
● Quando il primo prompt richiede il percorso principale dell’utente. Rispondi a questa richiesta digitando “build /.” Questa risposta può essere suggerita dal prompt stesso, nel qual caso puoi semplicemente scegliere “build /” dall’elenco.
● Il prompt che segue richiederà i tipi di file della cache. Seleziona solo i file CSS della cache.
● Qui fornirai il percorso di origine del tuo service worker – src/sw.js. Basta inserire questo nome file e fare clic su Invio.
● Il prompt successivo è il percorso per scrivere il service worker di produzione. Immettere “build/sw.js” e fare nuovamente clic su Invio.
● Questo, l’ultimo comando, richiederà di assegnare un nome al file di configurazione. Basta fare clic su “a capo” e utilizzare “workbox-config.js”, che dovrebbe essere fornito come risposta predefinita dal prompt.
Per ora, ignora qualsiasi istruzione di registro che viene visualizzato per aiutarti a creare il tuo service worker. Questo passaggio verrà seguito più avanti nel processo di creazione.
# 5 Iniettare il lavoratore del servizio con manifest precache utilizzando il workbox-cli
Per eseguire il comando injectManifest in Workbox, è necessario aggiornare lo script di compilazione in package.json.
{
"name": "workbox-lab",
"versione": "1.0.0",
"descrizione": "un laboratorio per l'apprendimento della casella di lavoro",
"main": "index.js",
"script": {
"test": "echo \" Errore: nessun test specificato \ "&& exit 1",
"copy": "copyfiles -u 1 src / ** / ** / * src / ** / * src / * build",
"build": "npm esegui copia && workbox injectManifest workbox-config.js",
"start": "node server.js"
},
"autore": "",
"licenza": "ISC",
"dipendenze": {
"express": "^ 4.16.3"
},
"devDependencies": {
"copyfiles": "^ 1.2.0",
"workbox-cli": "^ 3.5.0"
}
}
Esegui il comando npm run build dopo aver salvato il file. A questo punto, il file build / sw.js dovrebbe essere aggiornato con la chiamata precacheAndRoute. Controlla lo stile / main.css nel file manifest di build / sw.js tramite l’editor di testo.
Di nuovo, apri http://localhost: 8081/ e vai agli strumenti per sviluppatori nel tuo browser (usa il collegamento Ctrl + Maiusc + I in Google Chrome; e Cmd + Opt + I per Mac). Per testare il nuovo service worker, Annullare la registrazione ed eliminare la cache locale del service worker. In alternativa, puoi semplicemente fare Applicazione> Cancella archiviazione> Cancella dati del sito in Chrome DevTools.
Eseguire un refresh della pagina per garantire la corretta installazione del nuovo service worker. Inoltre, ricontrollare la cache per assicurarsi che il file main.css sia archiviato.
# 6 Reiniettare un manifest aggiornato
Estrarre il contenuto del file workbox-config.js e sostituirlo con il frammento di codice seguente:
module.exports = {
"globDirectory": "build /",
"globPatterns": [
"** / *. Css",
"Index.html",
"JS / animation.js",
"Images / home / *. Jpg",
"Images / icona / *. Svg"
],
"swSrc": "src / sw.js",
"swDest": "build / sw.js",
"globIgnores": [
"../Workbox-config.js"
Salva il file. Eseguire npm run build dalla directory del progetto per l’aggiornamento del manifest precache build/sw.js. Il file manifest dovrebbe ora includere index.html, business.jpg, icon.svg, main.css e anche animation.js.
Per aggiornare il nuovo service worker, per prima cosa esegui un aggiornamento dell’app. E poi in Chrome DevTools fai Applicazione> service workero> skipWaiting. Il file globPatterns dovrebbe essere nella cache ora.
Spegni il server nella finestra della riga di comando in cui hai eseguito il comando npm run start. Fallo premendo Ctrl + C. La tua home page dovrebbe comunque essere caricata se la aggiorni adesso.
# 7 Rotte dei service worker addizionali
Il codice seguente è per l’aggiunta di percorsi al tuo service worker.
workbox.routing.registerRoute (
/(.*)articles(.*)\.(?:png|gif|jpg)/,
workbox.strategies.cacheFirst ({
cacheName: 'images-cache',
plugin: [
new workbox.expiration.Plugin ({
maxEntries: 50,
maxAgeSeconds: 30 * 24 * 60 * 60, // 30 giorni
})
]
})
);
Il codice sopra deve essere inserito nella chiamata precacheAndRoute nel file src/sw.js. Assicurati di non toccare build/sw.js per evitare di sovrascrivere il file quando workbox injectManifest viene eseguito di nuovo.
Salvare il file ed eseguire un riavvio del server. Quindi utilizzare i comandi seguenti per ricostruire nuovamente l’app e il service worker.
npm run build npm inizio corsa
Ancora una volta, aggiorna il lavoratore del servizio aggiornato per attivarlo. E assicurati che la cache delle immagini sia nella cache.
# 8 Utilizza e personalizza una strategia di cache networkFirst
L’uso della strategia networkFirst è l’opzione migliore per mantenere i contenuti aggiornati sul tuo PWA. In questo modo, il vecchio contenuto verrà recuperato dall’operatore del servizio solo se questa strategia cache non funziona.
In src/sw.js, aggiungi il codice seguente:
const articleHandler = workbox.strategies.networkFirst ({
cacheName: 'articoli-cache',
plugin: [
new workbox.expiration.Plugin ({
maxEntries: 50,
workbox.routing.registerRoute (/(.*) articolo (. *) \. html /, args => {
articolo di ritorno: Handler.handle (args);
});
Come sempre, salva il file, esegui npm run build, svuota la cache in Chrome DevTools e usa il browser per aggiornare il lavoratore del servizio.
Premi Aggiorna sulla home page e fai clic su uno degli articoli di tendenza. Ricordarsi di verificare e assicurarsi che la creazione degli articoli nella cache abbia avuto esito positivo. Inoltre, controlla se l’articolo di tendenza è presente nella cache.
# 9 Prova le funzionalità offline e asincrone delle app
Questo passaggio è opzionale. Per valutare la memorizzazione dinamica nella cache, fai clic su altri articoli all’interno dell’app e visitali. Quindi usa Ctrl + C per portare l’app offline nella finestra della riga di comando. Apri l’app offline e rivisita gli articoli. Dovresti comunque vedere l’articolo memorizzato nella cache anziché la pagina offline del browser. Non dimenticare di riavviare il server utilizzando il comando npm run start.
Un altro controllo. Scegli uno degli articoli memorizzati nella cache e modificane il contenuto. Esegui npm run build per l’aggiornamento dei file di build. Quindi ricaricare l’articolo. Anche con il vecchio articolo ancora memorizzato nella cache, dovresti ricevere l’articolo modificato e la cache dovrebbe essere aggiornata.
Conclusione
A questo punto, capisci come lavorare con Workbox e i passaggi di base per costruire un service worker che sia funzionale e pronto per la produzione.
Facci sapere che tipo di app web hai intenzione di creare? Ricorda che l’unico limite è la tua tua immaginazione !
Articolo scritto grazie alla partecipazione di Gregory appassionato di ricerche sulle nuove tecnologie sia su cellulare, web e WordPress. Gregory adora le storie e i fatti, quindi Gregory cerca sempre di ottenere il meglio da entrambi i mondi.