Работник сервиса workbox-webpack-plugin не извлекает данные из кэша при подключении к сети - PullRequest
Новая
       71

Работник сервиса workbox-webpack-plugin не извлекает данные из кэша при подключении к сети

0 голосов
/ 24 октября 2018

У меня есть 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();
  });
}
}

Код дистрибутива для сервисного работника ниже.Вы можете увидеть онлайн-версию с использованием стратегии 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 || []);

1 Ответ

0 голосов
/ 23 ноября 2018

Я был неправ на многих счетах по этому поводу.Файлы не извлекались из кэша даже на локальном хосте.Я неправильно читал вкладку сети инструментов разработчика Firefox.Должно быть ясно, что файлы получены «сервисным работником», когда все работает правильно.

Проблема заключалась в том, где был размещен скрипт сервисного работника.Он должен быть в корне.

Это файл 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',
    }),
]

};

...