Блог

У меня есть веб-интерфейс ReactJS с двумя режимами: разработка и производство.

• режим разработки с использованием порта: 3001
• производство с использованием порта: 3000

Сервисный работник в режиме разработки работает нормально. Но после того, как я запущу процесс сборки. результат работы выходного скрипта отличается от режима разработки.

Как сделать так, чтобы вывод сценария service worker был одинаковым (режим разработки и производства)?

service-worker.js (сценарий вывода режима разработки)

 const OFFLINE_VERSION = 1;
const CACHE_NAME = 'v-208';
// const OFFLINE_URL = 'offline.html';
const OFFLINE_URL = [    
  '/offline.html', 
  '/media/error/bg6.jpg',
  '/favicon.ico'
];

self.addEventListener('message', (event) => {
  if (event.data amp;amp; event.data.type === 'SKIP_WAITING') {
    self.skipWaiting();
  }
});

self.addEventListener('install', (event) => {
  event.waitUntil(async function() {
    const cache = await caches.open(CACHE_NAME);
    await cache.addAll(OFFLINE_URL);
  }());
});

self.addEventListener('activate', (event) => {
  
  var cacheWhitelist = [CACHE_NAME];
   
  event.waitUntil(async function() {
    
    caches.keys().then(function(keyList) {
      return Promise.all(keyList.map(function(key) {
        if (cacheWhitelist.indexOf(key) === -1) {
          return caches.delete(key);
        }
      }));
    })

    // Feature-detect
    if (self.registration.navigationPreload) {
      // Enable navigation preloads!
      await self.registration.navigationPreload.enable();
    }
  }());
});

self.addEventListener('fetch', (event) => {
  const { request } = event;

  // Always bypass for range requests, due to browser bugs
  if (request.headers.has('range')) return;
  event.respondWith(async function() {
    // Try to get from the cache:
    const cachedResponse = await caches.match(request);
    if (cachedResponse) return cachedResponse;

    try {
      // See https://developers.google.com/web/updates/2017/02/navigation-preload#using_the_preloaded_response
      const response = await event.preloadResponse;
      if (response) return response;

      // Otherwise, get from the network
      return await fetch(request);
    } catch (err) {
      // If this was a navigation, show the offline page:
      if (request.mode === 'navigate') {
        return caches.match('offline.html');
      }

      // Otherwise throw
      throw err;
    }
  }());
});
 

процесс сборки :

 npm run build
 

затем я запускаю его, используя pm2 :

 pm2 serve build --watch --name ekinerja-frontend 3000 --spa
 

service-worker.js (сценарий вывода производственного режима)

 
importScripts(
  "/precache-manifest.4cd8995656b1c33c355715652d9d2264.js"
);

self.addEventListener('message', (event) => {
  if (event.data amp;amp; event.data.type === 'SKIP_WAITING') {
    self.skipWaiting();
  }
});

workbox.core.clientsClaim();

self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

workbox.routing.registerNavigationRoute(workbox.precaching.getCacheKeyForURL("/index.html"), {
  
  blacklist: [/^/_/,//[^/?] .[^/] $/],
});

 

Вам необходимо изменить путь регистрации для service worker. После сборки весь код переместится в новую папку. Поэтому будет предложено сохранить вашего работника службы за пределами src в статической папке и использовать его при регистрации вашего SW- if ("serviceWorker" in navigator) { navigator.serviceWorker .register("/static/js/serviceWorker.js") .then(....)}