构建后开发模式 Service Worker 脚本不同答案

【问题标题】：Development Mode Service Worker Script is Different after Build构建后开发模式 Service Worker 脚本不同
【发布时间】：2021-01-04 14:06:06
【问题描述】：

我有一个具有两种模式的 ReactJS 网络：开发和生产。

开发模式使用端口：3001
生产使用端口：3000

处于开发模式的 Service Worker 运行正常。但是，在我运行构建过程之后。输出脚本的结果与开发模式不同。

如何让 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 && 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 && 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: [/^\/_/,/\/[^/?]+\.[^/]+$/],
});

【问题讨论】：

标签： javascript reactjs progressive-web-apps service-worker workbox

【解决方案1】：

您需要更改注册 Service Worker 的路径。构建后，整个代码将移动到一个新文件夹。因此，建议将您的服务人员保留在 src 之外的静态文件夹中，并在注册您的 SW 时使用它- if ("serviceWorker" in navigator) { navigator.serviceWorker .register("/static/js/serviceWorker.js") .then(....)}

【讨论】：