Indicizzare le pagine compatibili con la modalità offline con l'API Content Indexing

Consente ai service worker di indicare ai browser quali pagine funzionano offline

Jeff Posnick

Operazione riuscita: API Content Index, che fa parte del progetto di capacità. lanciato in Chrome 84 per Android.

Che cos'è l'API di indicizzazione dei contenuti?

Utilizzare un'app web progressiva significa poter accedere alle informazioni di interesse per le persone (immagini, video, articoli e altro), indipendentemente per cambiare lo stato attuale della connessione di rete. Tecnologie come lavoratori dei servizi, l'API Cache Storage, e IndexedDB ti forniscono i componenti di base per l'archiviazione e la pubblicazione dei dati quando le persone interagiscono direttamente con una PWA. Ma creare una PWA di alta qualità e incentrata sui contenuti offline solo in parte. Se gli utenti non si rendono conto che i contenuti di un'applicazione web sono disponibili quando sono offline, non sfrutteranno appieno il lavoro nell'implementazione di questa funzionalità.

Questo è un problema di scoperta. in che modo la PWA può far conoscere agli utenti compatibili con i contenuti offline in modo che possano scoprire e visualizzare quelli disponibili? La L'API di indicizzazione dei contenuti costituisce una soluzione a questo problema. La parte rivolta agli sviluppatori di questa soluzione è un'estensione ai service worker, che consente agli sviluppatori aggiungi URL e metadati delle pagine offline a un indice locale gestito da il browser. Questo miglioramento è disponibile in Chrome 84 e versioni successive.

Quando nell'indice vengono inseriti i contenuti della PWA e di qualsiasi altra PWA installate, verranno visualizzate dal browser come mostrato di seguito.

. Innanzitutto, seleziona la voce di menu Download nella pagina Nuova scheda di Chrome.

di Gemini Advanced.

.

.

I contenuti multimediali e gli articoli che sono stati aggiunti all'indice verranno visualizzati in Sezione Articoli per te.

Inoltre, Chrome può consigliare in modo proattivo dei contenuti quando rileva che un utente è offline.

L'API di indicizzazione dei contenuti non è un modo alternativo per memorizzare i contenuti nella cache. È un modo per fornire metadati relativi alle pagine già memorizzate nella cache dal tuo servizio worker, in modo che il browser possa mostrare quelle pagine quando è probabile che gli utenti quando vogliamo vederle. L'API di indicizzazione dei contenuti migliora la rilevabilità delle le pagine memorizzate nella cache.

Nota: l'API Content Index non è un indice disponibile per la ricerca. Anche se puoi ottenere un elenco di tutte le voci indicizzate, non c'è modo di eseguire query sui metadati indicizzati. direttamente.

Guarda come funziona

Il modo migliore per avere un'idea dell'API di indicizzazione dei contenuti è provare un esempio un'applicazione.

1. Assicurati di utilizzare un browser e una piattaforma supportati. Al momento, limitato a Chrome 84 o versioni successive su Android. Vai a about://version per scoprire la versione di Chrome installata.
2. Visita la pagina https://contentindex.dev
3. Fai clic sul pulsante + accanto a uno o più articoli nell'elenco.
4. (Facoltativo) Disattiva la connessione alla rete dati e Wi-Fi del dispositivo oppure attiva modalità aereo per simulare l'interruzione del browser.
5. Scegli Download dal menu di Chrome e passa alla scheda Articoli per te.
6. Sfoglia i contenuti salvati in precedenza.

Puoi visualizzare il codice sorgente dell'applicazione di esempio su GitHub.

Un'altra applicazione di esempio, una PWA Scrapbook, illustra l'utilizzo dell'API di indicizzazione dei contenuti con l'API Web Share Target. Il codice dimostra una tecnica per mantenere sincronizzata l'API Content Index con gli elementi archiviati da un'app web utilizzando l'API Cache Storage.

Utilizzo dell'API

Per usare l'API, la tua app deve avere un service worker e URL che siano navigabili offline. Se la tua app web al momento non ha un service worker, le librerie Workbox possono semplificare creandone uno.

Che tipo di URL può essere indicizzato come compatibile con offline?

L'API supporta l'indicizzazione degli URL corrispondenti ai documenti HTML. Un URL per una copia cache un file multimediale, ad esempio, non può essere indicizzato direttamente. Devi invece fornire un URL per una pagina che mostra contenuti multimediali e che funzioni offline.

Un pattern consigliato è creare un "visualizzatore" Pagina HTML che può accettare i l'URL multimediale sottostante come parametro di ricerca, quindi mostra i contenuti file, potenzialmente con ulteriori controlli o contenuti nella pagina.

Le app web possono aggiungere all'indice dei contenuti soltanto URL che si trovano in ambito del Service worker attuale. In altre parole, un'app web non può aggiungere un URL appartenenti a un dominio completamente diverso nell'indice dei contenuti.

Panoramica

L'API di indicizzazione dei contenuti supporta tre operazioni: aggiunta, elenco e rimuovendo i metadati. Questi metodi sono esposti da una nuova proprietà, index, che che è stato aggiunto alla ServiceWorkerRegistration a riga di comando.

Il primo passaggio per l'indicizzazione dei contenuti consiste nell'ottenere un riferimento agli attuali ServiceWorkerRegistration L'utilizzo di navigator.serviceWorker.ready è il modo più semplice:

const registration = await navigator.serviceWorker.ready;

// Remember to feature-detect before using the API:
if ('index' in registration) {
  // Your Content Indexing API code goes here!
}

Se effettui chiamate all'API di indicizzazione dei contenuti dall'interno di un service worker, invece che all'interno di una pagina web, puoi fare riferimento all'ServiceWorkerRegistration direttamente tramite registration. Sarà già definita nell'ambito di ServiceWorkerGlobalScope.

Aggiunta all'indice in corso...

Utilizza il metodo add() per indicizzare gli URL e i metadati associati. Sta a te puoi scegliere quando aggiungere gli elementi all'indice. Potresti voler aggiungere indice in risposta a un input, come fare clic su "Salva offline" . Oppure tu potrebbe aggiungere automaticamente articoli ogni volta che i dati memorizzati nella cache vengono aggiornati tramite un meccanismo come la sincronizzazione periodica in background.

await registration.index.add({
  // Required; set to something unique within your web app.
  id: 'article-123',

  // Required; url needs to be an offline-capable HTML page.
  url: '/articles/123',

  // Required; used in user-visible lists of content.
  title: 'Article title',

  // Required; used in user-visible lists of content.
  description: 'Amazing article about things!',

  // Required; used in user-visible lists of content.
  icons: [{
    src: '/img/article-123.png',
    sizes: '64x64',
    type: 'image/png',
  }],

  // Optional; valid categories are currently:
  // 'homepage', 'article', 'video', 'audio', or '' (default).
  category: 'article',
});

L'aggiunta di una voce influisce solo sull'indice dei contenuti; non aggiunge nulla cache.

Caso limite: chiama add() dal contesto window se le tue icone si basano su un gestore fetch

Quando chiami add(), Chrome effettua una richiesta per l'URL di ogni icona per assicurarti che abbia una copia dell'icona da utilizzare quando che mostra un elenco di contenuti indicizzati.

• Se chiami add() dal contesto window (in altre parole, dal tuo sito web ), questa richiesta attiverà un evento fetch sul tuo service worker.

• Se chiami add() all'interno del tuo service worker (ad esempio all'interno di un altro evento ), la richiesta non attiverà il gestore fetch del service worker. Le icone verranno recuperate direttamente, senza l'intervento del service worker. Conserva Tieni presente che se le icone si basano sul gestore fetch, forse perché esiste solo nella cache locale e non in rete. In questo caso, assicurati che chiami add() solo dal contesto window.

Elenco dei contenuti dell'indice

Il metodo getAll() restituisce una promessa per un elenco iterabile di voci indicizzate e i relativi metadati. Le voci restituite conterranno tutti i dati salvati con add().

const entries = await registration.index.getAll();
for (const entry of entries) {
  // entry.id, entry.launchUrl, etc. are all exposed.
}

Rimozione di elementi dall'indice

Per rimuovere un elemento dall'indice, chiama delete() con il id dell'elemento per rimuovi:

await registration.index.delete('article-123');

La chiamata a delete() influisce solo sull'indice. Non elimina nulla cache.

Avviso:una volta indicizzate, le voci non scadono automaticamente. È presentare un'interfaccia nell'app web per rimuovere voci precedenti o rimuovere periodicamente quelle meno recenti che non dovrebbero più essere disponibile offline.

Gestione di un evento di eliminazione utente

Quando il browser visualizza i contenuti indicizzati, potrebbe includere il proprio utente con la voce di menu Elimina, che offre agli utenti la possibilità di indicare hanno finito di visualizzare i contenuti indicizzati in precedenza. Questa è la modalità di eliminazione dell'interfaccia utente in Chrome 80:

Quando qualcuno seleziona quella voce di menu, il service worker della tua applicazione web riceverà un evento contentdelete. Sebbene la gestione di questo evento sia facoltativa, fornisce un la possibilità che il service worker "ripulisca" ad esempio i contenuti multimediali memorizzati localmente che qualcuno ha indicato di avere terminato.

Non è necessario chiamare registration.index.delete() all'interno del tuo Gestore contentdelete; se l'evento è stato attivato, l'indice pertinente l'eliminazione è già stata eseguita dal browser.

self.addEventListener('contentdelete', (event) => {
  // event.id will correspond to the id value used
  // when the indexed content was added.
  // Use that value to determine what content, if any,
  // to delete from wherever your app stores it—usually
  // the Cache Storage API or perhaps IndexedDB.
});

Nota: l'evento contentdelete viene attivato solo quando l'eliminazione avviene a causa di interazione con l'interfaccia utente integrata del browser. Non viene attivato quando Chiamata registration.index.delete(). Se la tua app web attiva l'indice l'eliminazione utilizzando questo metodo API, dovrebbe anche ripulire la cache nella contemporaneamente.

Feedback sulla progettazione dell'API

L'API presenta problemi o non funziona come previsto? Oppure: mancano degli elementi che ti servono per realizzare la tua idea?

Segnala un problema nel repository GitHub esplicativo dell'API Content Index o aggiungi le tue opinioni a un problema esistente.

Problemi con l'implementazione?

Hai trovato un bug nell'implementazione di Chrome?

Segnala un bug all'indirizzo https://new.crbug.com. Includi il più possibile il più possibile i dettagli, semplici istruzioni per la riproduzione e imposta i componenti a Blink>ContentIndexing.

Hai intenzione di utilizzare l'API?

Vuoi utilizzare l'API Content Index nella tua app web? Il tuo supporto pubblico aiuta Chrome a dare la priorità alle funzionalità e indica ad altri fornitori di browser quanto sia fondamentale per supportarli.

• Invia un tweet a @ChromiumDev utilizzando l'hashtag #ContentIndexingAPI: e i dettagli su dove e come lo usi.

Quali sono alcune implicazioni relative alla sicurezza e alla privacy dell'indicizzazione dei contenuti?

Controlla le risposte forniti in risposta al questionario su sicurezza e privacy del W3C. Se se hai altre domande, avvia una discussione tramite il repository GitHub del progetto.

Immagine hero di Maksym Kaharlytskyi su Unsplash.