7

Workbox Webpack プラグインを開発モード (ローカル) で使用すると、次の Service Worker エラーが発生します。

PrecacheController.mjs:62 キャッチされない add-to-cache-list-conflicting-entries: 'workbox-precacheing.PrecacheController.addToCacheList()' に渡された 2 つのエントリの URL は未定義ですが、異なるリビジョンの詳細がありました。Workbox はアセットを正しくキャッシュおよびバージョン管理できません。エントリの 1 つを削除してください。

これは、webpack の再ビルド時に、静的アセットがプリキャッシュ呼び出しに 2 回追加されるように見えるため、発生していると考えられます。ファイルに1 回、service-worker.jsファイルにもう 1precache-manifest.XXX.js回。両方のファイルを見ると、チャンクとエントリ スクリプトが両方の場所に追加されていることがわかりますservice-worker.js。

すべてのビルドが消去され、最初から再構築されるため、これは本番環境では問題になりません。

これが私の Workbox Webpack Plugin 構成です:

new GenerateSW({
  swDest: '../service-worker.js',
  globDirectory: 'priv/static',
  globPatterns: ['**/*.{js,css,png,jpg,gif,woff2}'],
  runtimeCaching: [
    {
      urlPattern: /^https:\/\/js.intercomcdn.com\/[a-zA-Z0-9-/_.]*(js|woff)/,
      handler: 'NetworkFirst'
    }, {
      urlPattern: /^https:\/\/fonts\.googleapis\.com/,
      handler: 'NetworkFirst',
      options: {
        cacheName: 'google-fonts-stylesheets'
      }
    },
    {
      urlPattern: /^https:\/\/fonts\.gstatic\.com/,
      handler: 'CacheFirst',
      options: {
        cacheName: 'google-fonts-webfonts',
        cacheableResponse: {
          statuses: [0, 200]
        },
        expiration: {
          maxEntries: 5,
          maxAgeSeconds: 60 * 60 * 24 * 365, // one year
        }
      }
    },
    {
      urlPattern: /^https:\/\/logo.clearbit.com/,
      handler: 'CacheFirst',
      options: {
        cacheName: 'clearbit-logos',
        cacheableResponse: {
          statuses: [0, 200]
        },
        expiration: {
          maxAgeSeconds: 60 * 60 * 24 * 30, // approx one month
        }
      }
    }, {
      urlPattern: /^https:\/\/www.gravatar.com\/avatar\//,
      handler: 'NetworkFirst'
    }
  ]
})
4

0 に答える 0