AngularのPWAのServiceWorkerは、初期状態ではProductionのみで動く

前説

Angularの公式手順の通りにPWAをインストールされたものとします。

ng add @angular/pwa --project *project-name*

このとき、ServiceWorkerが動作するのは、Productionでビルドした場合のみです。
試しにデバッグビルドしたものをブラウザリロードした場合、サイトが開けないはずです。

対応手順

もしangular.json上にproduction以外の設定(例えばstaging)を作っている場合に、それらの環境でもServiceWorkerを動作させるには、以下を変更します。

app.module.ts

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

必要に応じて、 enabled の条件を適宜修正します。
ステージング環境にも production: true の設定を行うような運用ならばこの場所の変更は不要ですが、そうでなければServiceWork動作フラグを別途用意することになります。

environment.staging.ts

export const environment = {
  production: false,
  enableServiceWorker: true,
};

修正後のapp.module.ts

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

angular.json

{
  "version": 1,
  "projects": {
    "*project-name*": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "serviceWorker": true,
              "ngswConfigPath": "*project-name*/ngsw-config.json"

serviceWorker, ngswConfigPath の２項目を、configurations以下の他の項目にコピー

追加後のangular.json

          "configurations": {
            "staging": {
              // 以下２行を追加
              "serviceWorker": true,
              "ngswConfigPath": "*project-name*/ngsw-config.json"

動作確認

以上の手順をおこなったうえで変更した設定で再ビルド、ウェブページを開いてからブラウザリロードしてみてください。
正しく設定されていれば、キャッシングされたページが表示されるはずです。