0

localhost では正常に動作している SW がありますが、キャッシュからオンラインでフェッチしません。いつも通り動いていたのですが、なぜか止まってしまいました。

ファイルはキャッシュされますが、リクエストは常にネットワークに送られます。開発ツールでファイルを確認しました。

また、キャッシュの有効期限の設定についてもわかりません。

次のサイトでオンラインで見ることができます。

関連するコードは次のとおりです。

registerServiceWorker.js

const isLocalhost = Boolean(
  window.location.hostname === 'localhost' ||
  window.location.hostname === '[::1]' ||
  window.location.hostname.match(
    /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
  )
);

export default function register() {
  if ('serviceWorker' in navigator) {
    const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
    if (publicUrl.origin !== window.location.origin) {
      return;
    }
  window.addEventListener('load', () => {
    const swUrl = `/dist/sw-dist.js`;

    if (isLocalhost) {
      checkValidServiceWorker(swUrl);
      navigator.serviceWorker.ready.then(() => {
        console.log(
          'This web app is being served cache-first by a service ' +
            'worker.'
        );
      });
    } else {
      registerValidSW(swUrl);
    }
  });
}
}

function registerValidSW(swUrl) {
navigator.serviceWorker
  .register(swUrl)
  .then(registration => {
    registration.onupdatefound = () => {
      const installingWorker = registration.installing;
      installingWorker.onstatechange = () => {
        if (installingWorker.state === 'installed') {
          registration.pushManager.subscribe({userVisibleOnly: true});
          if (navigator.serviceWorker.controller) {
            console.log('New content is available; please refresh.');
          } else {
            console.log('Content is cached for offline use.');
          }
        }
      };
    };
  })
  .catch(error => {
    console.log('error', error);
    console.error('Error during service worker registration:', error);
  });
}

function checkValidServiceWorker(swUrl) {
fetch(swUrl)
  .then(response => {
    if (
      response.status === 404 ||
      response.headers.get('content-type').indexOf('javascript') === -1
    ) {
      navigator.serviceWorker.ready.then(registration => {
        registration.unregister().then(() => {
          window.location.reload();
        });
      });
    } else {
      // Service worker found. Proceed as normal.
      registerValidSW(swUrl);
    }
  })
  .catch(() => {
    console.log(
      'No internet connection found. App is running in offline mode.'
    );
  });
}

export function unregister() {
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.ready.then(registration => {
    registration.unregister();
  });
}
}

Service Worker の配布コードは以下です。両方を試したので、cacheFirst 戦略を使用したオンライン バージョンが表示される場合があります。

importScripts("precache-manifest.1d6e1c2332794b82f85bd1c2e608d2b6.js", "https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js");


workbox.skipWaiting();
workbox.clientsClaim();
workbox.routing.registerRoute(
  new RegExp('/dist/img/*'),
  workbox.strategies.staleWhileRevalidate({
    cacheName: 'img-cache',
    plugins: [
        new workbox.expiration.Plugin({
            maxAgeSeconds: 360 * 24 * 60 * 60,
        }),
    ],
  })
);
workbox.routing.registerRoute(
  new RegExp('/dist*'),
  workbox.strategies.staleWhileRevalidate({
    cacheName: 'js-cache',
    plugins: [
        new workbox.expiration.Plugin({
            maxAgeSeconds: 30 * 24 * 60 * 60,
        }),
    ],
  })
);
workbox.routing.registerRoute(
  new RegExp('/dist/css*'),
  workbox.strategies.staleWhileRevalidate({
    cacheName: 'css-cache',
    plugins: [
        new workbox.expiration.Plugin({
            maxAgeSeconds: 10 * 24 * 60 * 60,
        }),
    ],
  })
);

workbox.precaching.precacheAndRoute(self.__precacheManifest || []);
4

1 に答える 1

0

私はこれについて多くの点で間違っていました。ローカルホストでもファイルがキャッシュからフェッチされていませんでした。Firefox の開発ツールのネットワーク タブを読み違えていました。正常に動作している場合、ファイルが「サービス ワーカー」によって供給されていることを明確に示す必要があります。

問題は、Service Worker スクリプトが配置された場所でした。ルートにある必要があります。

これは、それを実現した webpack.config.js です ( Webpack 4 ):

 const path = require('path');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 const dist = 'dist';
 const {InjectManifest} = require('workbox-webpack-plugin');


module.exports = {
mode: "production",
entry: {
    home:'./src/entry_home.js',
    rest:'./src/entry_rest.js',
    mini:'./src/entry_mini.js',
},
output: {
    //path: path.resolve(__dirname, dist),
    path: __dirname+'/dist',
    //filename: "[name].[chunkhash].soeez.js",
    filename: "[name].0211.js",
    publicPath: "/dist/"
},
externals: {
    jquery: 'jQuery'
},
module: {
    rules: [
     //{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ]},
    //{ test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ },
    {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
            loader: "babel-loader",
        }
    },
    ]
},
optimization: {
    splitChunks: {
        cacheGroups: {
            commons: {
                name: 'common',
                chunks: 'initial',
                minChunks: 2
            }
        }
    }
},
plugins: [
    new CleanWebpackPlugin([
        dist + '/*.js'
        ]),
    //new BundleAnalyzerPlugin(),
    new InjectManifest({
        swSrc: './src/sw_src.js',
        swDest: '../sw-dist.0211.js',
    }),
]

};

于 2018-11-23T18:14:38.423 に答える