Come creare da zero un’applicazione WEB progressiva (PWA) con conoscenze di base sulla programmazione? Guida passo passo

Forbes, Twitter, Uber, Le Equipe, Telegram o Instagram sono alcuni dei giganti che si sono fatti avanti e hanno creato il proprio PWA, o applicazioni progressive come sono comunemente conosciute. Questo scenario suggerisce la possibilità che i siti Web convenzionali vengano dimenticati .

È normale, i siti Web come li conosciamo si sono evoluti sempre di più fino a diventare repliche meno potenti delle applicazioni native. Un PWA è fondamentalmente il prodotto di tale evoluzione , che ora ha trovato il modo di offrire un’esperienza simile a quella dell’applicazione mobile da qualsiasi browser.

Se non vuoi essere trascinato nel tempo, è importante iniziare a pensare di rendere il tuo sito web progressivo, o almeno il più vicino possibile , poiché questo inizierà ad avere peso quando si posiziona prima piuttosto che dopo.

Che cos’è un’applicazione web progressiva e in cosa differisce da una nativa?

Un’applicazione progressiva è uno strumento programmato e scritto in linguaggi Web come HTML5, JavaScript e CSS, ma che si comporta come un’applicazione mobile , preservandone le caratteristiche come avere un dispositivo di archiviazione sul dispositivo, che consente di utilizzarlo senza connessione a Internet.

Le differenze tra un progressivo e uno nativo non sono molte, dal momento che il primo cerca esattamente di assomigliare al secondo , ma se possiamo identificarne diversi che ci fanno preferire l’uno all’altro:

• Multipiattaforma: la principale differenza tra l’una e l’altra è il fatto che l’applicazione nativa può essere utilizzata solo sul dispositivo su cui è installata, quindi per usarla su un’altra dovrai scaricarla da zero. L’applicazione Web da parte sua è multipiattaforma poiché è possibile accedervi da qualsiasi browser come se fosse un sito Web.
• Peso: attualmente possiamo trovare applicazioni native pesanti come un programma per computer, quindi questo dipende dalla potenza. Da parte sua, i siti Web progressivi raramente superano 1 MB di peso.
• Aggiornamenti rapidi: se un’applicazione è molto grande, ogni volta che viene aggiornata ci vorranno alcuni minuti per farlo. Un’app progressiva è più versatile in questo senso poiché essendo così leggera, gli aggiornamenti vengono effettuati in pochi secondi.

Componenti di un PWA Cosa serve per crearne uno?

Un’applicazione progressiva consiste essenzialmente di quattro parti; manifest, addetto all’assistenza, icona e server. Ognuno di essi ha un ruolo fondamentale nella struttura dell’intero strumento .

Manifesto dell’app

Il manifest di un’applicazione PWA è un file JSON in cui sono specificate tutte le meta informazioni di essa . È dove sono indicati il ​​colore del tema, il nome, il colore di sfondo, l’icona e i dettagli.

Addetto all’assistenza

Questo è forse il componente più importante. Come accennato in precedenza, si tratta di un elemento programmatico che offre soluzioni per lo scambio di informazioni tra la rete e la cache del browser . Inoltre, questi registrano anche le informazioni da caricare quando è presente una connessione, che consente all’app di funzionare senza Internet.

icona

L’icona non è altro che l’immagine che identificherà la tua applicazione dalle altre applicazioni web sul mercato, devi progettarla tu stesso poiché questo sarà il segno distintivo del web .

HTPPS

Infine, sarà necessario disporre di un server sicuro con il relativo certificato SSL. I browser non eseguiranno mai un PWA ospitato su un HTPP come molti siti Web attualmente. La cosa più importante di un’app progressiva è la sua sicurezza e i browser vegliano su di essa .

Di cosa avremo bisogno per programmare questa applicazione web progressiva?

Stiamo raggiungendo il momento della verità in cui dovremo metterci al lavoro per creare la nostra applicazione web progressiva. Questo non sarà altro che un semplice meteorologo che ti dirà la temperatura, l’umidità e la pressione atmosferica .

Consigliato per te:Quali sono le migliori applicazioni per risparmiare batteria su dispositivi mobili Android e iOS? Elenco [anno]

Per crearlo, sarà necessario che soddisfiamo un paio di requisiti importanti che dovremo fare prima di iniziare la programmazione. Questi sono i seguenti:

• Una chiave dell’API Dark Sky : i dati della nostra applicazione meteorologica verranno direttamente da questa API, quindi è necessario ottenere una chiave da essa. Questi sono completamente gratuiti per piccoli progetti senza scopo di lucro come quello che stiamo per creare.
• Conoscenza della programmazione : non ti trufferemo, per capire cosa ti diremo devi almeno capire la programmazione web e il più essenziale dei linguaggi HTML5, CSS e JavaScripts.

Passaggi per creare un’applicazione web progressiva che funziona con e senza Internet

Abbiamo raggiunto dove volevamo arrivare. È tempo che inizi a programmare la tua prima applicazione progressiva , una molto semplice che ti fornirà le conoscenze necessarie per crearne una più completa e potente in futuro. Prestare attenzione e seguire attentamente tutti i passaggi:

Ottieni l’API Dark Sky

Come accennato in precedenza, la prima cosa da fare è ottenere una chiave API Dark Sky , che sarà quella che fornisce i dati meteorologici alla nostra app progressiva. Per fare ciò devi andare direttamente su https://darksky.net/dev , registrarti e richiedere la chiave.

Una volta che lo hai, dovresti controllare che funzioni perfettamente. Per fare ciò devi prendere il seguente link e sostituirlo dove dice «ClaveAqui» con la chiave API appena acquisita. Se tutto va bene, dovresti essere in grado di vedere le previsioni di New York City senza problemi.

https://api.darksky.net/forecast/ClaveAqui/40.7720232,-73.9732319

Ottieni il codice dell’app

Questo è in realtà un laboratorio di prova, quindi abbiamo preso un repository direttamente dagli sviluppatori Google in modo da poter sostenere questo test guidato. Per ottenere questo repository è necessario utilizzare Glitch, una piattaforma molto utile che aiuta gli sviluppatori a scambiare informazioni senza problemi.

Quello che dovresti fare è il seguente:

• Vai su Glitch.com e nell’angolo in alto a destra dello schermo fai clic su “Nuovo progetto” e poi su “Clone from Git Repo”.
• Si aprirà una piccola finestra in cui dovrai incollare il seguente indirizzo «https://github.com/googlecodelabs/your-first-pwapp.git» e fare clic su «Accetta».

• In quel repository sono contenute tutte le informazioni di cui hai bisogno. Ora devi andare al file .env e modificare dove dice DARKSKY_API_KEY = »Password qui» e inserire la tua chiave API Dark Sky dove dice «Password qui».

• Ora devi fare clic su “Mostra la tua app” per vedere l’applicazione in azione.

Audit del faro

Fondamentalmente con quel codice il PWA è completato, ma ha ancora difetti che dobbiamo correggere noi stessi e che scopriremo grazie a questo audit . Questo strumento ha una sezione appositamente progettata per eseguire audit su siti Web progressivi come quello che stiamo creando e per questo dobbiamo fare quanto segue:

• Apri il tuo progetto in una nuova scheda nel browser Chrome.
• Quindi apri Chrome DevTools e posizionati nella scheda Audit. Qui la piattaforma mostra un elenco di categorie di controllo che è necessario lasciare tutte abilitate.
• La prossima cosa da fare è fare clic su Esegui audit e dopo alcuni secondi, Lighthouse ti fornisce un rapporto sulla pagina.

In questo caso ci concentreremo solo sui risultati della sezione PWA, che sono quelli che ci interessano. Sicuramente genererà i seguenti problemi:

• ❗ NON RIUSCITO: la pagina corrente non risponde con un 200 se disconnesso.
• ❗ NON RIUSCITO:start_url non risponde con un 200 se disconnesso.
• ❗ NON RIUSCITO: non registrare un tecnico dell’assistenza che controlla la pagina estart_url.
• ❗ GUASTO: il manifest dell’applicazione Web non soddisfa i requisiti di installazione.
• ❗ FALLITO: non impostato per una schermata iniziale personalizzata.
• ❗ FAILED: non imposta un colore del tema della barra degli indirizzi.

Ora, la nostra missione nel seguente tutorial è di rendere tutto questo approvato, in modo da far funzionare il nostro sito Web progressivo con e senza una connessione a Internet, essere installabile e manifestare un’applicazione decente .

Consigliato per te:Come copiare e scaricare audio e video da YouTube dal tuo cellulare o computer? Guida passo passo

Crea manifest dell’applicazione

Il motivo per cui l’app non è riuscita nel manifest è perché sostanzialmente non ne ha uno, quindi dovremo crearlo, anche se nel tuo caso dovrai semplicemente modificare il codice di base di un manifesto che abbiamo preparato per te .

{
 "name": "Clima",
 "short_name": "Clima",
 "icons": [{
  "src": "/images/icons/icon-128x128.png",
   "sizes": "128x128",
   "type": "image/png"
  }, {
   "src": "/images/icons/icon-144x144.png",
   "sizes": "144x144",
   "type": "image/png"
  }, {
   "src": "/images/icons/icon-152x152.png",
   "sizes": "152x152",
   "type": "image/png"
  }, {
   "src": "/images/icons/icon-192x192.png",
   "sizes": "192x192",
   "type": "image/png"
  }, {
   "src": "/images/icons/icon-256x256.png",
   "sizes": "256x256",
   "type": "image/png"
  }, {
   "src": "/images/icons/icon-512x512.png",
   "sizes": "512x512",
   "type": "image/png"
  }],
 "start_url": "/index.html",
 "display": "standalone",
 "background_color": "#3E4EB8",
 "theme_color": "#2F3BA2"
}

Per aggiungere questo manifest alla tua applicazione. Successivamente, dobbiamo informare il browser del nostro manifest aggiungendolo <link rel="manifest"... a ciascuna pagina della nostra applicazione. Ora aggiungi la seguente riga all’elemento <head>nel file index.html.

<!-- CODELAB: Add link rel manifest -->
<link rel="manifest" href="/manifest.json">

Successivamente dobbiamo aggiungere una meta descrizione alla nostra applicazione . Per questo dobbiamo semplicemente aggiungere la seguente riga di codice all’intestazione dell’applicazione:

<meta name="description" content="Un simple aplicación meteorológica">

Infine impostiamo il colore della barra degli indirizzi della nostra applicazione progressiva , per la quale è necessario copiare la seguente riga di codice nella <head> della propria applicazione.

<!-- CODELAB: Add meta theme-color -->
<meta name="theme-color" content="#2F3BA2" />

Rendi il Web offline

Ora arriva una delle parti più complicate di tutta la guida, perché entreremo nella programmazione pura e difficile per creare correttamente il nostro addetto all’assistenza , un elemento che abbiamo menzionato in precedenza come indispensabile per qualsiasi applicazione progressiva.

Tutti gli utenti che ci aspettiamo da un’app è che può essere utilizzato senza una connessione Internet, in modo che sia facile per noi accedere al contenuto senza essere su alcuna rete . Questo è altrettanto importante in un’app progressiva, quindi la necessità per il dinosauro Chrome di non uscire mai è imperativa.

Quello che faremo qui è una pagina offline personalizzata. Quindi, quando qualcuno entra nell’app e non ha alcuna connessione, è quella che viene visualizzata al posto del fastidioso dinosauro. Per questo creeremo il nostro primo addetto all’assistenza .

Se non hai molta familiarità con loro, ti consigliamo di farlo. Questo è un universo completamente nuovo nel mondo della programmazione per te, quindi è molto conveniente specializzarti in essi. In questo modo crescerai professionalmente man mano che imparerai conoscenze all’avanguardia che ti permetteranno di fare un passo avanti dalla tua gilda .

La prima cosa che faremo è registrare il lavoratore del servizio, per il quale dovrai aggiungere la seguente riga di codice al file Index dell’applicazione progressiva :

// CODELAB: Register service worker.
if ('serviceWorker' in navigator) {
 window.addEventListener('load', () => {
  navigator.serviceWorker.register('/service-worker.js')
    .then((reg) => {
     console.log('Service worker registered.', reg);
    });
 });
}

Ora devi indicare al tecnico dell’assistenza la pagina che verrà visualizzata quando sei offline. All’interno del repository abbiamo già creato una pagina offline personalizzata in ( public/offline.html). Quello che dovresti fare è semplicemente andare su Public / service-worker.js nel repository e nella sezione “FILES_TO_CACHE = [
];” includi il valore “offline.html”. Dovrebbe apparire come in figura:

Ora la prossima cosa da fare è aggiungere questa riga di codice all’evento “installa” per dire al lavoratore del servizio di patchare il web progressivo offline:

evt.waitUntil(
  caches.open(CACHE_NAME).then((cache) => {
   console.log('[ServiceWorker] Pre-caching offline page');
   return cache.addAll(FILES_TO_CACHE);
  })
);

Finora andiamo a metà strada. La prossima cosa è fare in modo che il nostro addetto all’assistenza pulisca la cache in modo che non rimanga alcun dato precedente. Ecco perché dobbiamo aggiungere questo codice nella cartella public / service-worker.js :

// CODELAB: Remove previous cached data from disk.
evt.waitUntil(
  caches.keys().then((keyList) => {
   return Promise.all(keyList.map((key) => {
    if (key !== CACHE_NAME) {
     console.log('[ServiceWorker] Removing old cache', key);
     return caches.delete(key);
    }
   }));
  })
);

Infine, aggiungeremo un’altra riga di codice per rendere più efficaci le richieste di rete del lavoratore del servizio e in caso di guasto, verremo reindirizzati alla pagina offline che abbiamo menzionato sopra . Quello che dovresti fare è aggiungere quanto segue nella cartella public / service-worker.js:

// CODELAB: Remove previous cached data from disk.
evt.waitUntil(
  caches.keys().then((keyList) => {
   return Promise.all(keyList.map((key) => {
    if (key !== CACHE_NAME) {
     console.log('[ServiceWorker] Removing old cache', key);
     return caches.delete(key);
    }
   }));
  })
);

Con questo avremo creato uno strumento che fornisce un’esperienza offline piuttosto semplice ma che soddisfa perfettamente i requisiti di un’app progressiva. Tuttavia, questo è solo l’inizio di tutto, ci sono ancora cose da sostenere .

Consigliato per te:Come accedere ad Amazon in spagnolo in modo facile e veloce? Guida passo passo

Offri un’esperienza offline completa

Per capire meglio questo, è molto importante indagare sul ciclo di vita di un addetto all’assistenza , poiché questi passaggi sono strettamente correlati a questo.

La prima cosa che faremo è cambiare la logica dell’applicazione , cosa viene fatto in modo che possa far funzionare correttamente le richieste asincrone. Queste richieste sono una per la rete e una per la cache. Per fare ciò devi andare sul percorso pubblico / script / app e modificare la seguente riga di codice:

// CODELAB: Add code to get weather forecast from the caches object.
if (!('caches' in window)) {
 return null;
}
const url = `${window.location.origin}/forecast/${coords}`;
return caches.match(url)
  .then((response) => {
   if (response) {
    return response.json();
   }
   return null;
  })
  .catch((err) => {
   console.error('Error getting data from cache', err);
   return null;
  });

Ora la prossima cosa è modificare l’elemento Updatedata, che è inferiore a quello precedente . Per fare ciò, modifichiamo il codice come segue:

// CODELAB: Add code to call getForecastFromCache.
getForecastFromCache(location.geo)
  .then((forecast) => {
   renderForecast(card, forecast);
  });

Con questo abbiamo già risolto il problema delle richieste asincrone che devi fare , fino ad ora sei in grado di fornire un’esperienza offline più o meno completa. Ma non è ancora in grado di funzionare al 100% senza connessione a Internet .

Per fare ciò dobbiamo prima precachear le risorse dell’app, che viene fatto aggiungendo un Data_Cache_NAME nella cartella public / service-worker. Lo facciamo con il seguente codice:

// CODELAB: Update cache names any time any of the cached files change.
const CACHE_NAME = 'static-cache-v2';
const DATA_CACHE_NAME = 'data-cache-v1';

Ora, la prossima cosa è aggiornare File_TO_CACHE nella stessa cartella del lavoratore del servizio, quindi aggiungiamo l’elenco completo dei file. Questo viene fatto con il seguente codice:

// CODELAB: Add list of files to cache here.
const FILES_TO_CACHE = [
 '/',
 '/index.html',
 '/scripts/app.js',
 '/scripts/install.js',
 '/scripts/luxon-1.11.4.js',
 '/styles/inline.css',
 '/images/add.svg',
 '/images/clear-day.svg',
 '/images/clear-night.svg',
 '/images/cloudy.svg',
 '/images/fog.svg',
 '/images/hail.svg',
 '/images/install.svg',
 '/images/partly-cloudy-day.svg',
 '/images/partly-cloudy-night.svg',
 '/images/rain.svg',
 '/images/refresh.svg',
 '/images/sleet.svg',
 '/images/snow.svg',
 '/images/thunderstorm.svg',
 '/images/tornado.svg',
 '/images/wind.svg',
];

Ciò che dobbiamo tenere presente è che dobbiamo costantemente aggiornare Cache_NAME quando aggiungiamo un nuovo file. Abbiamo eliminato offline.html perché il nostro sito Web non ne ha bisogno perché ora ha tutte le risorse necessarie per operare offline e non mostrare più una pagina “nessuna connessione”.

Consigliato per te:Quali sono i migliori programmi di acquisizione dello schermo per PC Windows per fare uno screenshot del computer? Elenco [anno]

Per garantire che il nostro evento “attiva” non elimini alcun tipo di file, dobbiamo modificare il valore “if (chiave! == CACHE_NAME) {“ in “if (chiave! == CACHE_NAME && chiave! == DATA_CACHE_NAME) {“.Nella nostra cartella Service-worker.js.

Il prossimo passo nella nostra programmazione è assicurarsi che l’app salvi le previsioni meteorologiche in modo da poterle accedere più facilmente in futuro . Per fare ciò dovrai aggiungere quanto segue nel file service-worker.js:

// CODELAB: Add fetch event handler here.
if (evt.request.url.includes('/forecast/')) {
 console.log('[Service Worker] Fetch (data)', evt.request.url);
 evt.respondWith(
   caches.open(DATA_CACHE_NAME).then((cache) => {
    return fetch(evt.request)
      .then((response) => {
       // If the response was good, clone it and store it in the cache.
       if (response.status === 200) {
        cache.put(evt.request.url, response.clone());
       }
       return response;
      }).catch((err) => {
       // Network request failed, try to get it from the cache.
       return cache.match(evt.request);
      });
   }));
 return;
}
evt.respondWith(
  caches.open(CACHE_NAME).then((cache) => {
   return cache.match(evt.request)
     .then((response) => {
      return response || fetch(evt.request);
     });
  })
);

Dopo aver fatto tutto ciò avremo un’applicazione progressiva che offre un’esperienza completa senza connessione a Internet che possiamo usare da qualsiasi browser . Abbiamo praticamente fatto tutto il lavoro, ma c’è ancora un ultimo dettaglio da sostenere:

Rendi l’app installabile

Per finire la nostra guida, ciò che dobbiamo fare è semplicemente che la nostra applicazione è installabile nel browser, qualcosa che, sebbene sembri difficile, è la cosa più semplice da fare nell’intero processo che ti abbiamo insegnato finora.

La prima cosa che faremo è aggiungere il file install.js al nostro index.html, che si ottiene copiando questo codice nel file:

<!-- CODELAB: Add the install script here -->
<script src="/scripts/install.js"></script>

Ora dobbiamo andare all’evento install.js e scrivere la seguente riga di codice per continuare il processo di installazione della nostra app:

// CODELAB: Add event listener for beforeinstallprompt event
window.addEventListener('beforeinstallprompt', saveBeforeInstallPromptEvent);

Quindi per mostrare il pulsante di installazione, che è fondamentale in tutto ciò, dobbiamo continuare a modificare il nostro install.js con il seguente codice:

// CODELAB: Add code to save event & show the install button.
deferredInstallPrompt = evt;
installButton.removeAttribute('hidden');

Ora è il momento di programmare per mostrare il prompt e nascondere il pulsante di installazione poiché questo può essere fatto solo una volta. Quindi seguendo il file install.js aggiungiamo quanto segue:

// CODELAB: Add code show install prompt & hide the install button.
deferredInstallPrompt.prompt();
// Hide the install button, it can't be called twice.
evt.srcElement.setAttribute('hidden', true);

Pronta, ora l’applicazione progressiva che abbiamo creato è completamente installabile e hai imparato a fare con internetpasoapaso.com che ti insegniamo sempre tutto ciò che devi sapere su Internet e sull’informatica. Ci auguriamo che queste informazioni siano molto utili.

In caso di domande, lasciarle nei commenti, ti risponderemo al più presto e sarà sicuramente di grande aiuto per più membri della community. Grazie!