I have a react app that I am deploying to a single domain

我有一个要部署到单个域的Reaction应用程序

https://app.*.com

Https://app.*.com

the * is basically the name of the domain, that can be multiple app.A.com app.B.com.

*基本上是域名的名称，可以是多个app.A.com app.B.com。

In firebase, we configured those domain to serve the hosting so no matter what URL you reach you will see the same content, but some stuff on the page will change based on the domain. There is basically a firebase function replacing the header before service the index.html that will write down manifest.A.json or manifest.B.json based on what domain the request is from.

在Firebase中，我们配置了这些域名来为主机提供服务，所以无论你到达什么URL，你都会看到相同的内容，但页面上的一些内容会根据域名的不同而改变。基本上有一个Firebase函数在提供服务之前替换头文件index.html，它将根据请求来自哪个域来写下标志.A.json或标志.B.json。

I setup a manifest.A.json and a manifest.B.json, I register them the same way

我设置了一个manifest.A.json和一个manifest.B.json，我以相同的方式注册它们

webpack.config.js

Webpack.config.js

      new InjectManifest({
        swSrc: path.resolve(__dirname, 'src/service-worker.ts'),
        // this is the output of the plugin,
        // relative to webpack's output directory
        swDest: 'service-worker.js',
        // vendor currently is 4.21MB so limit set to 5MB
        maximumFileSizeToCacheInBytes: 7 * 1024 * 1024,
      })

then in my main.json

然后在我的Main中。json

  serviceWorkerRegistration.register({
    path: 'service-worker.js',
    onSuccess: () => pwaStore.setState((state) => ({ ...state, isReady: true })),
    onUpdate: () => pwaStore.setState((state) => ({ ...state, hasUpdate: true })),
  });

service-worker.js

Service-worker.js

/// <reference lib="webworker" />
import * as Sentry from '@sentry/react';
import { clientsClaim } from 'workbox-core';
import { setCacheNameDetails } from 'workbox-core';
import { precacheAndRoute } from 'workbox-precaching';

import { environment } from '~anyx/app-core/env';

// ServiceWorkerGlobalScope is a type from the workbox-precaching module
declare const self: Window & ServiceWorkerGlobalScope;

const version = process.env['NX_VERSION'] || '';
setCacheNameDetails({
  prefix: environment.appName,
  suffix: version,
});

if (version === '') {
  Sentry.captureException(new Error('Encountered Empty Version Name!'));
}

// Tells the Service Worker to skip the waiting state and become active.
self.skipWaiting();

// Will make the Service Worker control the all clients right away
// (even if they're controlling other tabs or windows). Without this,
// we could be seeing different versions in different tabs or windows.
clientsClaim();

precacheAndRoute([...self.__WB_MANIFEST]);

Problem is, when I visit A.com, all is fine, but B.com return

问题是，当我访问a.com时，一切都很好，但b.com返回

Error during service worker registration: TypeError: Failed to register a ServiceWorker for scope ('https://B.com/') with script ('https://B.com/service-worker.js'): ServiceWorker script evaluation failed

I am unsure why this issue happen only on B.com, maybe I have something more to configure for it to work ?

我不确定为什么这个问题只发生在b.com上，也许我有更多的东西需要配置才能工作？

Try to clear cache and let's see what happens.
If you've previously registered a Service Worker with the same scope, it might be interfering with the new registration. Try clearing the browser cache or unregistering the old Service Worker.

尝试清除缓存，让我们看看会发生什么。如果您以前注册了具有相同作用域的Service Worker，则可能会干扰新注册。请尝试清除浏览器缓存或注销旧的服务工作进程。

You can obtain additional logs by configuring this in service-worker.js as follows.

您可以通过在service-worker.js中进行如下配置来获取其他日志。

self.addEventListener('install', event => {
  console.log('Service Worker installed');
  // Your code for installation...
});

self.addEventListener('activate', event => {
  console.log('Service Worker activated');
  // Your code for activation...
});

self.addEventListener('fetch', event => {
  console.log('Fetching:', event.request.url);
  // Your code for handling fetch events...
});