question-mark
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 not load all files from cache

See original GitHub issue

Hello,

I’am working on a Angular 8.1.0 PWA and when I test it offline on a device the .svg and font files got not loaded from the cache – png files work fine! If i check it with Chrome inspect the files are listed in “Application -> Cache Storage” but the service worker can not load it.

Here the error from the console.log

ngsw-worker.js:596 Uncaught (in promise) Error: Response not Ok (fetchAndCacheOnce): request for https://xxx.com/assets/pfeil-full-rechts.svg returned response 504 Gateway Timeout

Here a screenshot from the Chrome Inspect Tool

screen_shot_1

And here the ngsw-config.json

{
  "$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": "prefetch",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

The interesting thing is that also the preview from the cache works, f.e. if i select in the Dev Tool the ‘/assets/pfeil-links.svg’ from the Cache Storage the preview works (look at the screenshot)

The version of Chrome on my device is 75.0.3770

Thanks for your help!

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:16 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
michaelholzknechtcommented, Jul 23, 2019

Just to finish this issue. I did’t figured out where the problem is – also on a different server / device the same problem pops up - it works randomly. So finally I replaced all the svg’s to png’s or use the svg in a html template.

Thanks for your help and time!

0reactions
angular-automatic-lock-bot[bot]commented, Sep 15, 2019

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular PWA not loading in Offline Mode - Latitude Technolabs
There are two possible reasons for angular PWA not loading in offline mode. ... We can add all files to the new cache....
Read more >
Angular PWA not caching server requests - Stack Overflow
I think the problem that you're facing is that POST requests are not cached by Angular's Service Worker no matter how it was...
Read more >
How to Cache HTTP Requests in an Angular App (PWA)
As default when installing Angular PWA, static content, such as assets, javascript and CSS files, will be cached to make the page load...
Read more >
Service worker configuration - Angular
The ngsw-config.json configuration file specifies which files and data URLs the Angular service worker should cache and how it should update the cached...
Read more >
Making PWAs work offline with Service workers
The service worker does not install until the code inside waitUntil ... Here, we open a cache with a given name, then add...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found