App web progressive: dalla scheda alla barra delle app

1. Ti diamo il benvenuto

In questo lab, prenderai un'applicazione web esistente e la renderai installabile. Questo è il quarto di una serie di codelab complementari per il workshop sulle app web progressive. Il codelab precedente era IndexedDB. Questa serie include altri quattro codelab.

Obiettivi didattici

  • Scrivere un service worker manualmente
  • Aggiungere un service worker a un'applicazione web esistente
  • Utilizza il service worker e l'API Cache Storage per rendere disponibili le risorse offline

Che cosa devi sapere

  • HTML e JavaScript di base

Che cosa ti serve

2. Configurazione

Inizia clonando o scaricando il codice iniziale necessario per completare questo codelab:

Se cloni il repository, assicurati di trovarti nel ramo pwa04--tab-to-taskbar. Il file zip contiene anche il codice per questo ramo.

Questo codebase richiede Node.js 14 o versioni successive. Una volta disponibile il codice, esegui npm ci dalla riga di comando nella cartella del codice per installare tutte le dipendenze necessarie. Poi, esegui npm start per avviare il server di sviluppo per il codelab.

Il file README.md del codice sorgente fornisce una spiegazione per tutti i file distribuiti. Inoltre, i seguenti sono i file esistenti chiave con cui lavorerai durante questo codelab:

File delle chiavi

  • index.html - HTML dell'applicazione principale

3. Creare un manifest dell'app web

I file manifest delle app web descrivono la tua PWA in modo che, insieme a un service worker funzionante, un browser sappia che la tua app web è installabile e, soprattutto, come rappresentarla sul dispositivo su cui verrà installata. Prima, però, deve essere creato. Aggiungi un file denominato manifest.json nella cartella public della tua app web e aggiungi quanto segue:

{
  "name": "PWA Edit",
  "short_name": "PWA Edit",
  "start_url": "/?source=pwa",
  "display": "standalone",
  "icons": [
    {
      "type": "image/png",
      "sizes": "192x192",
      "src": "/images/icons/logo-192.png"
    },
    {
      "type": "image/png",
      "sizes": "48x48",
      "src": "/images/icons/logo-48.png"
    },
    {
      "type": "image/png",
      "sizes": "72x72",
      "src": "/images/icons/logo-72.png"
    },
    {
      "type": "image/png",
      "sizes": "128x128",
      "src": "/images/icons/logo-128.png"
    },
    {
      "type": "image/png",
      "sizes": "384x384",
      "src": "/images/icons/logo-384.png"
    },
    {
      "type": "image/png",
      "sizes": "512x512",
      "src": "/images/icons/logo-512.png"
    },
    {
      "type": "image/png",
      "sizes": "96x96",
      "src": "/images/icons/logo-96.png"
    },
    {
      "type": "image/png",
      "sizes": "1024x1024",
      "src": "/images/icons/maskable-1024.png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#282c34",
  "background_color": "#282c34",
  "description": "A PWA markdown editor",
  "categories": ["productivity", "utilities"]
}

Non dimenticare di includere un'icona Apple Touch per i dispositivi iOS. Aggiungi la seguente riga di codice subito dopo il tag <title> in <head> in index.html

<link rel="apple-touch-icon" href="/images/icons/apple-touch.png" />

Spiegazione

Questo manifest include campi obbligatori, consigliati e promozionali, quindi ci sono molte cose da fare. Innanzitutto, i campi obbligatori in cui sono definiti il nome, l'URL di avvio, la modalità di visualizzazione e le icone della PWA. Tieni presente che l'ultima icona è un'icona adattabile, che consente di visualizzare più icone in base all'UI di un dispositivo. Poi ci sono i campi per il tema e il colore dello sfondo consigliati. Infine, ci sono i campi promozionali, una descrizione e le categorie in cui rientra questa PWA. Quando questo manifest viene allegato a una PWA, questi campi controllano la modalità di visualizzazione e gestione dell'app installata della PWA.

4. Allegare il manifest alla PWA

Una volta creato il file manifest, è necessario allegarlo per associarlo alla PWA. Per farlo, apri index.html e aggiungi quanto segue subito sotto il tag <title> in <head>:

<link rel="manifest" href="/manifest.json" />

Spiegazione

Un link manifest indica ai browser che lo supportano che il file manifest dell'app web collegata descrive il sito web corrente. Se è valido e disponibile, con un service worker funzionante e dopo che l'app web supera eventuali criteri di installazione aggiuntivi specifici del browser, consente di installare l'app direttamente sul dispositivo di un utente.

5. Aggiungere scorciatoie

Un ottimo modo per integrare più profondamente la PWA con un dispositivo è fornire scorciatoie del menu contestuale per funzionalità specifiche dell'app. Il pulsante di attivazione/disattivazione della modalità Buio nella PWA consente di scegliere la modalità impostando un parametro di query mode su night o day. Configura due scorciatoie in manifest.json che:

  • Avvia la PWA in modalità night o day
  • Utilizza /images/logo.svg con dimensioni 150x150 per un'icona

6. Complimenti!

Hai appena imparato a creare un file manifest dell'app web, allegarlo a una pagina web e aggiungere scorciatoie dell'app quando viene installata.

Il prossimo codelab della serie è Prompting & Measuring Install.