Questa pagina è stata tradotta dall'API Cloud Translation.

workbox-webpack-plugin

Workbox fornisce due plug-in webpack: uno che genera un service worker completo per te e uno che genera un elenco di asset da prememorizzare nella cache che vengono inseriti in un file del service worker.

I plug-in sono implementati come due classi nel modulo workbox-webpack-plugin, denominate GenerateSW e InjectManifest. Le risposte alle seguenti domande possono aiutarti a scegliere il plug-in e la configurazione giusti da utilizzare.

Quale plug-in utilizzare

`GenerateSW`

Il plug-in GenerateSW creerà un file di worker di servizio per te e lo aggiungerà alla pipeline di asset di webpack.

Quando utilizzare `GenerateSW`

Vuoi eseguire la memorizzazione nella cache dei file.
Hai esigenze semplici di memorizzazione nella cache di runtime.

Quando NON utilizzare `GenerateSW`

Vuoi utilizzare altre funzionalità di Service Worker (ad es. push web).
Vuoi importare script aggiuntivi o aggiungere logica aggiuntiva per le strategie di memorizzazione nella cache personalizzata.

`InjectManifest`

Il plug-in InjectManifest genera un elenco di URL da memorizzare nella cache e aggiunge il manifest della memorizzazione nella cache a un file di worker di servizio esistente. In caso contrario, il file rimarrà invariato.

Quando utilizzare `InjectManifest`

Vuoi un maggiore controllo sul tuo service worker.
Vuoi eseguire la memorizzazione nella cache dei file.
Devi personalizzare il routing e le strategie.
Vuoi utilizzare il tuo service worker con altre funzionalità della piattaforma (ad es. Web Push).

Quando NON utilizzare `InjectManifest`

Vuoi seguire il percorso più semplice per aggiungere un servizio worker al tuo sito.

Plug-in GeneraSW

Puoi aggiungere il plug-in GenerateSW alla configurazione webpack nel seguente modo:

// Inside of webpack.config.js:
const {GenerateSW} = require('workbox-webpack-plugin');

module.exports = {
  // Other webpack config...
  plugins: [
    // Other plugins...
    new GenerateSW({
      // These are some common options, and not all are required.
      // Consult the docs for more info.
      exclude: [/.../, '...'],
      maximumFileSizeToCacheInBytes: ...,
      navigateFallback: '...',
      runtimeCaching: [{
        // Routing via a matchCallback function:
        urlPattern: ({request, url}) => ...,
        handler: '...',
        options: {
          cacheName: '...',
          expiration: {
            maxEntries: ...,
          },
        },
      }, {
        // Routing via a RegExp:
        urlPattern: new RegExp('...'),
        handler: '...',
        options: {
          cacheName: '...',
          plugins: [..., ...],
        },
      }],
      skipWaiting: ...,
    }),
  ],
};

Verrà generato un service worker con la configurazione del pre-caching per tutti gli asset webpack rilevati dalla configurazione e le regole di memorizzazione nella cache di runtime fornite.

Un insieme completo di opzioni di configurazione è disponibile nella documentazione di riferimento.

`InjectManifest` Plug-in

Puoi aggiungere il plug-in InjectManifest alla configurazione webpack nel seguente modo:

// Inside of webpack.config.js:
const {InjectManifest} = require('workbox-webpack-plugin');

module.exports = {
  // Other webpack config...
  plugins: [
    // Other plugins...
    new InjectManifest({
      // These are some common options, and not all are required.
      // Consult the docs for more info.
      exclude: [/.../, '...'],
      maximumFileSizeToCacheInBytes: ...,
      swSrc: '...',
    }),
  ],
};

Verrà creato un manifest precache basato sugli asset webpack rilevati dalla configurazione e verrà inserito nel file del servizio worker compilato e aggregato.

Un insieme completo di opzioni di configurazione è disponibile nella documentazione di riferimento.

Informazioni aggiuntive

Le indicazioni sull'utilizzo dei plug-in nel contesto di una build Webpack più grande sono disponibili nella sezione "Applicazione web progressiva" della documentazione di Webpack.

Tipi

GenerateSW

Questa classe supporta la creazione di un nuovo file di worker di servizio pronto all'uso nell'ambito del processo di compilazione di webpack.

Utilizza un'istanza di GenerateSW nell'array plugins di una configurazione webpack.

// The following lists some common options; see the rest of the documentation
// for the full set of options and defaults.
new GenerateSW({
  exclude: [/.../, '...'],
  maximumFileSizeToCacheInBytes: ...,
  navigateFallback: '...',
  runtimeCaching: [{
    // Routing via a matchCallback function:
    urlPattern: ({request, url}) => ...,
    handler: '...',
    options: {
      cacheName: '...',
      expiration: {
        maxEntries: ...,
      },
    },
  }, {
    // Routing via a RegExp:
    urlPattern: new RegExp('...'),
    handler: '...',
    options: {
      cacheName: '...',
      plugins: [..., ...],
    },
  }],
  skipWaiting: ...,
});

Proprietà

constructor

nullo

Crea un'istanza di GenerateSW.

La funzione constructor ha questo aspetto:
```
(config?: GenerateSWConfig) => {...}
```
- config
  
  GenerateSWConfig facoltativo
- returns
  GenerateSW
config

GenerateSWConfig

GenerateSWConfig

Proprietà

additionalManifestEntries

(stringa | ManifestEntry)[] facoltativo

Un elenco di voci da prememorizzare nella cache, oltre a quelle generate come parte della configurazione della build.
babelPresetEnvTargets

string[] facoltativo
Il valore predefinito è: ["chrome >= 56"]

I target da passare a babel-preset-env durante il transpile del bundle del service worker.
cacheId

stringa facoltativa

Un ID facoltativo da anteporre ai nomi della cache. Questa opzione è utile principalmente per lo sviluppo locale, in cui è possibile pubblicare più siti dalla stessa originehttp://localhost:port.
blocchi

stringa[] facoltativo

Uno o più nomi di chunk i cui file di output corrispondenti devono essere inclusi nel manifest di precache.
cleanupOutdatedCaches

booleano facoltativo
Valore predefinito: false

Indica se Workbox deve tentare di identificare ed eliminare eventuali pre-cache create da versioni precedenti e incompatibili.
clientsClaim

booleano facoltativo
Il valore predefinito è false

Indica se il worker del servizio deve iniziare a controllare qualsiasi client esistente non appena si attiva.
directoryIndex

stringa facoltativa

Se una richiesta di navigazione per un URL che termina con / non corrisponde a un URL precompilato, questo valore verrà aggiunto all'URL e verrà controllato se esiste una corrispondenza precompilata. Deve essere impostato sul valore utilizzato dal server web per l'indice della directory.
disableDevLogs

booleano facoltativo
Valore predefinito: false
dontCacheBustURLsMatching

Espressione regolare facoltativa

Per gli asset corrispondenti a questo valore si presume che abbiano una versione univoca tramite il loro URL e che siano esenti dalla normale eliminazione della cache HTTP eseguita durante il completamento della precache. Sebbene non sia obbligatorio, se il tuo processo di compilazione esistente inserisce già un valore [hash] in ogni nome file, ti consigliamo di fornire un'espressione regolare che lo rileverà, in quanto ridurrà la larghezza di banda consumata durante il pre-caching.
escludi

(stringa | RegExp | funzione)[] facoltativo

Uno o più specificatori utilizzati per escludere le risorse dal manifest precache. Questo viene interpretato seguendo le stesse regole dell'opzione exclude standard di webpack. Se non viene fornito, il valore predefinito è [/\.map$/, /^manifest.*\.js$].
excludeChunks

stringa[] facoltativo

Uno o più nomi di blocchi i cui file di output corrispondenti devono essere esclusi dal manifest di pre-cache.
ignoreURLParametersMatching

RegExp[] facoltativo

Tutti i nomi dei parametri di ricerca che corrispondono a una delle espressioni regolari in questo array verranno rimossi prima di cercare una corrispondenza di preregistrazione. Questa opzione è utile se gli utenti potrebbero richiedere URL che contengono, ad esempio, parametri URL utilizzati per monitorare l'origine del traffico. Se non viene fornito, il valore predefinito è [/^utm_/, /^fbclid$/].
importScripts

stringa[] facoltativo

Un elenco di file JavaScript da passare a importScripts() all'interno del file del worker di servizio generato. Questa opzione è utile quando vuoi lasciare che Workbox crei il file del tuo worker di servizio di primo livello, ma vuoi includere del codice aggiuntivo, ad esempio un gestore di eventi push.
importScriptsViaChunks

stringa[] facoltativo

Uno o più nomi di chunk webpack. I contenuti di questi chunk verranno inclusi nel servizio worker generato tramite una chiamata a importScripts().
includi

(stringa | RegExp | funzione)[] facoltativo

Uno o più specificatiri utilizzati per includere gli asset nel manifest di pre-cache. Questo viene interpretato seguendo le stesse regole dell'opzione include standard di webpack.
inlineWorkboxRuntime

booleano facoltativo
Il valore predefinito è false

Indica se il codice di runtime della libreria Workbox deve essere incluso nel servizio worker di primo livello o suddiviso in un file separato che deve essere disegnato insieme al servizio worker. Mantenere separato il runtime significa che gli utenti non dovranno scaricare nuovamente il codice Workbox ogni volta che cambia il service worker di primo livello.
manifestEntries

ManifestEntry[] facoltativo
manifestTransforms

ManifestTransform[] facoltativo

Una o più funzioni che saranno applicate in sequenza al manifest generato. Se vengono specificati anche modifyURLPrefix o dontCacheBustURLsMatching, le relative trasformazioni verranno applicate per prime.
maximumFileSizeToCacheInBytes

number facoltativo
Il valore predefinito è 2097152

Questo valore può essere utilizzato per determinare le dimensioni massime dei file che verranno precaricati. In questo modo, eviterai di pre-cachere inavvertitamente file molto grandi che potrebbero corrispondere accidentalmente a uno dei tuoi pattern.
modalità

stringa facoltativa

Se impostato su "produzione", verrà generato un bundle di service worker ottimizzato che esclude le informazioni di debug. Se non viene configurato esplicitamente qui, verrà usato il valore mode configurato nell'attuale compilazione webpack.
modifyURLPrefix

Oggetto facoltativo

Un oggetto che mappa i prefissi della stringa in base ai valori stringa sostitutivi. Può essere utilizzato, ad esempio, per rimuovere o aggiungere un prefisso di percorso da una voce manifest se la configurazione dell'hosting web non corrisponde alla configurazione del file system locale. Come alternativa più flessibile, puoi utilizzare l'opzione manifestTransforms e fornire una funzione che modifichi le voci nel file manifest utilizzando la logica che preferisci.

Esempio di utilizzo:
```
// Replace a '/dist/' prefix with '/', and also prepend
// '/static' to every URL.
modifyURLPrefix: {
  '/dist/': '/',
  '': '/static',
}
```
navigateFallback

stringa facoltativa
Il valore predefinito è null

Se specificato, tutte le richieste di navigazione per gli URL non prememorizzati nella cache verranno soddisfatte con il codice HTML dell'URL fornito. Devi passare l'URL di un documento HTML elencato nel manifest precache. Questa opzione deve essere utilizzata in uno scenario dell'app a pagina singola, in cui vuoi che tutte le navigazioni utilizzino l'HTML della shell di app comune.
navigateFallbackAllowlist

Espressione regolare[] facoltativa

Un array facoltativo di espressioni regolari che limita gli URL a cui viene applicato il comportamento navigateFallback configurato. Questo è utile se solo un insieme di URL del tuo sito deve essere considerato parte di un'app a pagina singola. Se sono configurati sia navigateFallbackDenylist sia navigateFallbackAllowlist, ha la precedenza la lista di rifiuto.

Nota: queste regex possono essere valutate in base a ogni URL di destinazione durante una navigazione. Evita di utilizzare espressione regolare complessa , altrimenti gli utenti potrebbero riscontrare ritardi durante la navigazione sul tuo sito.
navigateFallbackDenylist

RegExp[] facoltativo

Un array facoltativo di espressioni regolari che limita gli URL a cui si applica il comportamento di navigateFallback configurato. Questa operazione è utile se solo un sottoinsieme di URL del tuo sito deve essere considerato come parte di un'app a pagina singola. Se sono configurati entrambi i criteri navigateFallbackDenylist e navigateFallbackAllowlist, la lista bloccata ha la precedenza.

Nota: queste espressioni regolari possono essere valutate in base a ogni URL di destinazione durante una navigazione. Evita di utilizzare espressione regolare complessa , altrimenti gli utenti potrebbero riscontrare ritardi durante la navigazione sul tuo sito.
navigationPreload

booleano facoltativo
Valore predefinito: false

Indica se attivare o meno il precaricamento della navigazione nel service worker generato. Se impostato su true, devi anche utilizzare runtimeCaching per impostare una strategia di risposta appropriata che corrisponda alle richieste di navigazione e utilizzare la risposta precaricata.
offlineGoogleAnalytics

booleano | GoogleAnalyticsInitializeOptions facoltativo
Il valore predefinito è false

Controlla se includere o meno il supporto per Google Analytics offline. Quando true, la chiamata a initialize() di workbox-google-analytics verrà aggiunta al tuo service worker generato. Se il valore è impostato su Object, l'oggetto verrà passato alla chiamata initialize(), consentendoti di personalizzare il comportamento.
runtimeCaching

RuntimeCaching[] facoltativo

Quando utilizzi gli strumenti di compilazione di Workbox per generare il tuo worker di servizio, puoi specificare una o più configurazioni della memorizzazione nella cache in fase di runtime. Queste vengono quindi tradotte in chiamate workbox-routing.registerRoute utilizzando la configurazione di corrispondenza e gestore da te definita.

Per tutte le opzioni, consulta la documentazione di workbox-build.RuntimeCaching. L'esempio seguente mostra una configurazione tipica, con due route di runtime definiti:
skipWaiting

booleano facoltativo
Valore predefinito: false

Indica se aggiungere una chiamata incondizionata a skipWaiting() al servizio worker generato. Se false, verrà aggiunto un ascoltatore message, che consentirà alle pagine client di attivare skipWaiting() chiamando postMessage({type: 'SKIP_WAITING'}) su un worker di servizio in attesa.
mappa di origine

booleano facoltativo
Valore predefinito: true

Indica se creare un file sourcemap per i file del service worker generati.
swDest

stringa facoltativa
Valore predefinito: "service-worker.js"

Il nome dell'asset del file del worker del servizio creato da questo plug-in.

InjectManifest

Questa classe supporta la compilazione di un file di worker di servizio fornito tramite swSrc e l'inserimento in questo file di un elenco di URL e informazioni sulle revisioni per il precaching in base alla pipeline delle risorse webpack.

Utilizza un'istanza di InjectManifest nell'array plugins di una configurazione webpack.

Oltre a iniettare il manifest, questo plug-in eseguirà una compilazione del file swSrc utilizzando le opzioni della configurazione webpack principale.

// The following lists some common options; see the rest of the documentation
// for the full set of options and defaults.
new InjectManifest({
  exclude: [/.../, '...'],
  maximumFileSizeToCacheInBytes: ...,
  swSrc: '...',
});

Proprietà

constructor

nullo

Crea un'istanza di InjectManifest.

La funzione constructor ha questo aspetto:
```
(config: WebpackInjectManifestOptions) => {...}
```
- config
  
  WebpackInjectManifestOptions
- returns
  InjectManifest
config

WebpackInjectManifestOptions

workbox-webpack-plugin

Quale plug-in utilizzare

GenerateSW

Quando utilizzare GenerateSW

Quando NON utilizzare GenerateSW

InjectManifest

Quando utilizzare InjectManifest

Quando NON utilizzare InjectManifest

Plug-in GeneraSW

InjectManifest Plug-in

Informazioni aggiuntive

Tipi

GenerateSW

Proprietà

GenerateSWConfig

Proprietà

InjectManifest

Proprietà

Proprietà

default

Tipo

Proprietà

`GenerateSW`

Quando utilizzare `GenerateSW`

Quando NON utilizzare `GenerateSW`

`InjectManifest`

Quando utilizzare `InjectManifest`

Quando NON utilizzare `InjectManifest`

`InjectManifest` Plug-in