Images not caching while using PWA
See original GitHub issueThe 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:
- Created 6 years ago
- Comments:11 (3 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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 usingrequire
makes webpack aware of them and automatically puts them in your build for you.If you follow my example in that issue it’ll work fine, you need to use require not import to grab arrays of images.