Angular progressive web app working on localhost but not on IP

Question

I have developed Angular progressive app, which works fine when running on localhost:3004, like if i open in browser and then close the server it works fine with cached data. But when i run it on ip i.e 192.168.33.123:3004 it open and when i close the server it does not works. I also followed complete guide on this link : ServiceWorker

here is progressive app audit when i run in localhost:

here is audit when running on ip 192.168.33.123:3004. ]

I could not figure where is the error. This issue is when i open browser using localhost, In application tab in chrome console, it shows service worker registered. but when i open using ip, then in application tab it does not show any service worker registered.

here if my service worker file

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

well take a look at this: https://developer.mozilla.org/en-US/docs/Web/Manifest only setting up a service worker does not turn your app in a pwa. There is some more work to do. — JohnnyDevNull, Sep 18 '19 at 06:46
I have already gone through this link, and i have added manifest file too. — Muhammad Aadil Banaras, Sep 18 '19 at 06:51
the service worker only works on localhost or https for security purposes. That's why you have 12 insecure requests found. — Gérôme Grignon, Sep 18 '19 at 07:41

score 1 · Answer 1 · answered Sep 18 '19 at 06:46

Update your serivce worker like this by removing $schema, my configuration is the same as your

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

You have the problem because when you build into production mode your code is looking for this file ./node_modules/@angular/service-worker/config/schema.json. So your service worker will not work.

no, but i got it. service worked only runs on localhost or https, i am trying with http://192.33.33.33:3004 so it is not registering — Muhammad Aadil Banaras, Sep 18 '19 at 07:59

score 0 · Answer 2 · answered Apr 09 '20 at 12:19

I had the same issue, hosting on Azure. But I've found the solution here.
Just add to the web.config these lines:

<?xml version="1.0"?>

<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".json" mimeType="application/json" />
            <mimeMap fileExtension=".webmanifest" mimeType="application/manifest+json" />
        </staticContent>
    </system.webServer>
</configuration>

Angular progressive web app working on localhost but not on IP

2 Answers2