Angular pwa (service worker) is not running on live server/production in angular 20.

[afaqraja]

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

Yes

Description

hi folks .i am wokring in angular 20.i configured as pwa and its running in local env even i got offline.the service worker is running in the the browser.but when i visti app in live server ,there is no service worker running and when i checkout offline and refresh the page i got no internet message.

Web.config

<staticContent>
  <remove fileExtension=".json" />
  <mimeMap fileExtension=".json" mimeType="application/json" />
  <remove fileExtension=".woff" />
  <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
  <remove fileExtension=".woff2" />
  <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
  <mimeMap fileExtension=".ttf" mimeType="application/font-sfnt" />
  <mimeMap fileExtension=".webmanifest" mimeType="application/manifest+json" />
</staticContent>

<httpProtocol>
  <customHeaders>
    <add name="X-Frame-Options" value="DENY" />
    <add name="X-Content-Type-Options" value="nosniff" />
    <add name="Referrer-Policy" value="strict-origin-when-cross-origin" />
    <add name="Permissions-Policy" value="camera=(), microphone=(), geolocation=()" />
    <add name="Service-Worker-Allowed" value="/" />
  </customHeaders>
</httpProtocol>

<urlCompression doStaticCompression="true" doDynamicCompression="true" />
<httpCompression>
  <dynamicTypes>
    <add mimeType="text/*" enabled="true" />
    <add mimeType="message/*" enabled="true" />
    <add mimeType="application/javascript" enabled="true" />
    <add mimeType="application/json" enabled="true" />
  </dynamicTypes>
  <staticTypes>
    <add mimeType="text/*" enabled="true" />
    <add mimeType="message/*" enabled="true" />
    <add mimeType="application/javascript" enabled="true" />
    <add mimeType="application/json" enabled="true" />
  </staticTypes>
</httpCompression>

</system.webServer>

/////
ngsw-confi.json
{
"$schema": "./node_modules/@angular/service-worker/config/schema.json",
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/manifest.webmanifest",
"/.css",
"/.js"
]
}
},
{
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/",
"/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
]
}
}
],
"dataGroups": [
{
"name": "api-performance",
"urls": [
"https://app-kosher-authsecurity-prod.azurewebsites.net/api",
"https://app-kosher-authsecurity-dev.azurewebsites.net/api**",
"https://app-kosher-apiservice-uat.azurewebsites.net/api**",
"https://app-kosher-apiservice-dev.azurewebsites.net/api**",
"https://app-kosher-apiservice-prod.azurewebsites.net/api**"
],
"cacheConfig": {
"strategy": "performance",
"maxSize": 100,
"maxAge": "1h",
"timeout": "10s"
}
},
{
"name": "api-freshness",
"urls": [
"https://app-kosher-authsecurity-prod.azurewebsites.net/api**",
"https://app-kosher-authsecurity-dev.azurewebsites.net/api**",
"https://app-kosher-apiservice-prod.azurewebsites.net/api**",
"https://app-kosher-apiservice-uat.azurewebsites.net/api**",
"https://app-kosher-apiservice-dev.azurewebsites.net/api**"
],
"cacheConfig": {
"strategy": "freshness",
"maxSize": 100,
"maxAge": "1h",
"timeout": "5s"
}
}
]
}

////

angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"fr-portal-frontend": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular/build:application",
"options": {
"browser": "src/main.ts",
"index": "src/index.html",
"polyfills": [
"zone.js"
],
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/assets",
"src/favicon.ico",
"src/manifest.webmanifest",
"src/Web.config",
"src/app.config.json",
"src/app.config-macOS.json"
],
"styles": [
"src/styles.scss",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/@fortawesome/fontawesome-free/css/all.min.css",
"node_modules/ngx-toastr/toastr.css"
]
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "2MB",
"maximumError": "4MB"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2MB",
"maximumError": "4MB"
}
],
"outputHashing": "all",
"serviceWorker": "ngsw-config.json"

        },
        "development": {
          "optimization": false,
          "extractLicenses": false,
          "sourceMap": true,
          "serviceWorker": "ngsw-config.json"
        }
      },
      "defaultConfiguration": "production"
    },
    "serve": {
      "builder": "@angular/build:dev-server",
      "configurations": {
        "production": {
          "buildTarget": "fr-portal-frontend:build:production"
        },
        "development": {
          "buildTarget": "fr-portal-frontend:build:development"
        }
      },
      "defaultConfiguration": "development"
    },
    "extract-i18n": {
      "builder": "@angular/build:extract-i18n"
    },
    "test": {
      "builder": "@angular/build:karma",
      "options": {
        "polyfills": [
          "zone.js",
          "zone.js/testing"
        ],
        "tsConfig": "tsconfig.spec.json",
        "inlineStyleLanguage": "scss",
        "assets": [
          {
            "glob": "**/*",
            "input": "public"
          }
        ],
        "styles": [
          "src/styles.scss"
        ]
      }
    }
  }
}

},
"cli": {
"analytics": "87b29336-eb18-438b-b584-6b8882299d67"
}
}

///
manifest.webmanifest
{
"name": "FR Portal",
"short_name": "FR Portal",
"description": "Visit Portal application for FR Portal access",
"theme_color": "#2c5aa0",
"background_color": "#f5f5f5",
"display": "standalone",
"scope": "/",
"start_url": "/",
"orientation": "portrait-primary",
"categories": ["business", "productivity"],
"lang": "en",
"dir": "ltr",
"icons": [
{
"src": "assets/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "assets/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "assets/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "assets/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "assets/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "assets/icons/icon-180x180.png",
"sizes": "180x180",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "assets/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "assets/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "assets/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any maskable"
}
],
"screenshots": [
{
"src": "assets/screenshots/mobile-login.png",
"sizes": "375x812",
"type": "image/png",
"form_factor": "narrow",
"label": "Login screen"
}
],
"shortcuts": [
{
"name": "Login",
"short_name": "Login",
"description": "Quick access to login",
"url": "/login",
"icons": [
{
"src": "assets/icons/icon-96x96.png",
"sizes": "96x96"
}
]
}
],
"related_applications": [],
"prefer_related_applications": false,
"edge_side_panel": {
"preferred_width": 375
}
}

///

index.html

<!doctype html>

<title>Fr Portal Frontend</title> Please enable JavaScript to continue using this application.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

Please provide the environment you discovered this bug in (run ng version)

"@angular/animations": "^20.2.4",
    "@angular/common": "^20.2.0",
    "@angular/compiler": "^20.2.0",
    "@angular/core": "^20.2.0",
    "@angular/forms": "^20.2.0",
    "@angular/platform-browser": "^20.2.0",
    "@angular/router": "^20.2.0",
    "@angular/service-worker": "^20.2.4",
    "@fortawesome/fontawesome-free": "^7.0.1",


node 20v

Anything else?

No response

[JoostK]

Hello, we reviewed this issue and determined that it doesn't fall into the bug report or feature request category. This issue tracker is not suitable for support requests, please repost your issue on StackOverflow using tag angular.

If you are wondering why we don't resolve support issues via the issue tracker, please check out this explanation.