Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Angular pwa does not work offline

See original GitHub issue

I trying to achive the following.

Angular pwa with angular version 6 and 7 works fine when I follow the online guides. I create new ng app be it 6 or 7. Then I execute ng build --prod and then a go to the dist folder and run the command http-server -o And everything works fine as promised.

But when I cretate a local IIS (with the cert that google browser accepts) app by poiting it to my ng dist folder and I browse to https://localhost/test/pwatest the project work fine my manifest json work and the ngsw worker is registered. But when I go offline the tyrex appears. Nothing is fetched. I really google a lot and saw many people having this issue but this problem persists.

manifest.json { "name": "pwatest", "short_name": "pwatest", "theme_color": "#1976d2", "background_color": "#fafafa", "display": "standalone", "scope": "/", "start_url": "/", "icons": [ { "src": "assets/icons/icon-72x72.png", "sizes": "72x72", "type": "image/png" }, { "src": "assets/icons/icon-96x96.png", "sizes": "96x96", "type": "image/png" }, { "src": "assets/icons/icon-128x128.png", "sizes": "128x128", "type": "image/png" }, { "src": "assets/icons/icon-144x144.png", "sizes": "144x144", "type": "image/png" }, { "src": "assets/icons/icon-152x152.png", "sizes": "152x152", "type": "image/png" }, { "src": "assets/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "assets/icons/icon-384x384.png", "sizes": "384x384", "type": "image/png" }, { "src": "assets/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" } ] }

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

index.html `<!doctype html>

<html lang="en"> <head> <meta charset="utf-8"> <title>Pwatest</title> <base href="/test/pwatest/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="manifest" crossorigin="use-credentials" href="manifest.json" /> <meta name="theme-color" content="#1976d2"> </head> <body> <app-root></app-root> <noscript>Please enable JavaScript to continue using this application.</noscript> </body> </html> ` what is the problem? I also tried adding the router to manifest.json no success.

By the way when I perform audit it shows Failures: Service worker does not successfully serve the manifest’s start_url, Timed out waiting for fetched start_url.

Issue Analytics

State:
Created 5 years ago
Comments:10 (3 by maintainers)

Top GitHub Comments

8reactions

BLechacommented, Mar 8, 2019

so Ladies thanks for your help I nailed it and yes it is a bug! It is an issue of base href and absolute and relative paths ! And yes by the way doing ng build --prod --baseHref=/test/pwatest/ has absolutely no effect!

8reactions

BLechacommented, Mar 8, 2019

@gkalpak The steps reproduce are,

create new angular pwa project or do you need the steps how to do this? set up certificate on localhost do you need the steps how to this? on iis add the angular app you just created or do you need the steps?

These are such trivial things man why dont you better redirect this issue to someone more advanced? And yes it is a bug! Im here to discuss with someone a bit more into this topic. If you dont mind can you just open back this ticket and let someone else have a look at it? Thank you very much!

And really do not think (BTW, I have served an Angular PWA with IIS before, so 🤷‍♂️) you did!