Создание углового приложения с сервис-работником для использования в подкаталоге

Question

Есть ли способ создать угловое приложение, чтобы оно работало в нескольких подкаталогах, например:

example.com/customerOne/  
example.com/customerTwo/  
example.com/customerThree/

Если я просто использую ng build --prod, сервисный работник захочет получить файлы из example.com когда пользователи находятся в автономном режиме.

Мой index.html использует

<base href="./" />

ServiceWorkerModule зарегистрирован следующим образом:

    ServiceWorkerModule.register('./ngsw-worker.js', { enabled: environment.production  })

Если возможно, я не хочу строитьдля каждого клиента, или используйте работника сферы обслуживания.
Возможно ли это?

Обновление

Я пробовал сейчас разные конфиги для сборки:

ng build --prod --base-href ./ --deploy-url ./

похоже, он генерирует файл ngsw.json, который должен работать ?!но, к сожалению, при выходе из сети это не работает.

{
  "configVersion": 1,
  "index": "./index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "urls": [
        "./common.99ba582125e1578d10cd.js",
        "./index.html",
        "./main.4bfd5158f8760f6437ea.js",
        "./polyfills.0fbb99b6827212146275.js",
        "./runtime.3d2d705784cd950436e9.js",
        "./styles.268bb547bc6265af274a.css",
        "./vendor.605927c5807ddc13f37d.js"
      ],
      "patterns": []
    },
    {
      "name": "assets",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "urls": [
        "./assets/background.jpg",
        "./assets/i18n/de.json",
        "./assets/icon/favicon.png",
        "./assets/splash/ipad_splash.png",
        "./assets/splash/ipadpro1_splash.png",
        "./assets/splash/ipadpro2_splash.png",
        "./assets/splash/iphone5_splash.png",
        "./assets/splash/iphone6_splash.png",
        "./assets/splash/iphoneplus_splash.png",
        "./assets/splash/iphonex_splash.png",
        "./assets/splash/splash_2208px.png"
      ],
      "patterns": []
    }
  ],
  "dataGroups": [],
  "hashTable": {
    "./common.99ba582125e1578d10cd.js": "8a6798ba18b916daaaf2d02f82a9534a2e18194c",
    "./index.html": "8b5f0e32aea68bd7bbd5702eddd921c31727dfec",
    "./main.4bfd5158f8760f6437ea.js": "6d24a5d2a8a78dec6d88561322b0b42c684f6bba",
    "./polyfills.0fbb99b6827212146275.js": "0640677f20e93d8ac14140a2b65321a620805f53",
    "./runtime.3d2d705784cd950436e9.js": "6d6cf18db89319bbf712acced49f91d0ca23f8fa",
    "./styles.268bb547bc6265af274a.css": "32604c26369aa52d21a3c3cde5fb11fa92eb1500",
    "./vendor.605927c5807ddc13f37d.js": "8edcc68ede502aacf57469e56fcd3751c52f8e8b"
     ...
  },
  "navigationUrls": [
    {
      "positive": true,
      "regex": "^\\/.*$"
    },
    {
      "positive": false,
      "regex": "^\\/(?:.+\\/)?[^/]*\\.[^/]*$"
    },
    {
      "positive": false,
      "regex": "^\\/(?:.+\\/)?[^/]*__[^/]*$"
    },
    {
      "positive": false,
      "regex": "^\\/(?:.+\\/)?[^/]*__[^/]*\\/.*$"
    }
  ]
}

какие-либо предложения?

Answer 1

Я нагнулся, используя @ngular/serviceworker, потому что я не мог заставить его работать.

Вместо этого я использую рабочий ящик.

Конфиг:

module.exports = {
   globDirectory: 'www',
   globPatterns: ['**/*.{css,html,js,json,png,jpg,jpeg,svg,ico}'],
   swDest: 'www\\sw.js',
   swSrc: 'src\\sw.js',
   maximumFileSizeToCacheInBytes: 28 * 1024 * 1024
};

sw.js:

importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js');

workbox.setConfig({
    debug: false
});

self.addEventListener('message', function (event) {
    if (event.data.action === 'skipWaiting') {
        self.skipWaiting();
    }
});

if (workbox) {
    console.log(`Yay! Workbox is loaded ?`);

    workbox.precaching.precacheAndRoute([]);
} else {
    console.log(`Boo! Workbox didn't load ?`);
}

и для строительства:

workbox injectManifest

это работает из коробки