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.

Images not caching while using PWA

See original GitHub issue

The website is here & the code is here

I have put my images in public/assets folder but don’t know how to configure service-worker to cache images when there is no internet connection

I did read the docs & from what I understood it caches automatically I guess 🤔, but not sure

So when I visit the above website offline, it shows only text & no images are served while offline 😢

Please take a look

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:11 (3 by maintainers)

github_iconTop GitHub Comments

5reactions
Timercommented, Sep 22, 2017

The public/ folder is not processed by webpack, and thus cannot be added to the service worker or any other benefits.

Having them in src/ and using require makes webpack aware of them and automatically puts them in your build for you.

2reactions
Timercommented, Sep 22, 2017

If you follow my example in that issue it’ll work fine, you need to use require not import to grab arrays of images.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Placeholder image fallbacks for PWAs - harrytheo.com
Cases where images will not be available: Cached images have been expired. User is offline but no images are cached.
Read more >
How to fix an issue of images from cache not being displayed ...
While the images are being cached properly,they are not being displayed when offline mode is activated. Here is my app.js file : const...
Read more >
Caching - web.dev
In your PWA, you are in charge of deciding when to cache files. While one approach is to store as many assets as...
Read more >
14 Service Worker: How to cache images | React | CacheFirst
Chapter 14 : Learn how to cache images using CacheFirst in React | Ultimate Guide to PWAs with Workbox | React Beginner Tutorialworkbox ......
Read more >
How To Configure Placeholder Image Fallbacks for PWAs
Creating PWAs that feel native app-like by adding an image placeholder in case the original image is not found · Cached images have...
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