CODEWITHSUNDEEP
javascriptnode.jsangulartypescriptprogressive-web-apps
Muhammad Aadil Banaras
Muhammad Aadil Banaras

Reputation: 1274

Angular progressive web app working on localhost but not on IP

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: enter image description here

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

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)"
        ]
      }
    }
  ]
}

Upvotes: 4

Views: 2458

Answers (2)

Barnee
Barnee

Reputation: 3389

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>

Upvotes: 0

Tony
Tony

Reputation: 20092

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.

Upvotes: 1

Related Questions