ひとつのドメインで、複数のPWAを配信し、 各ページを独立して「ホーム画面に追加」する事が出来ましたので、 備忘録的にもアウトプットしておきます。

• example.com/hoge
• example.com/fuga

上記2つのページを、それぞれ独立したPWAとして設定するとします。

用意するもの

hoge用

• example.com/hoge
• example.com/hoge/serviceWorker.js
• example.com/hoge/manifest.json

fuga用

• example.com/fuga
• example.com/fuga/serviceWorker.js
• example.com/fuga/manifest.json

各serviceWorker.js

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

hoge/serviceWorker.js

{
  // 中略
  "Scope": "/hoge/",
  "start_url": "/hoge/",
}

fuga/serviceWorker.js

{
  // 中略
  "Scope": "/fuga/",
  "start_url": "/fuga/",
}

以上

気がつければとても単純な事でしたが、 たどり着くまでが、試行錯誤でした。 誰かの助けになれば、幸いです。