Create-react-app: Images not caching while using PWA

[deadcoder0904]

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

[chee]

if you import the images from within the javascript (similar to how you've imported the css) they will be precached

for instance, you could put your assets directory inside src and do

import add from '../assets/add.jpg'

const SausageComponent = () =>
  <img src={add} />

[chee]

or indeed:

import add from '../assets/add.jpg'

const SausageComponent = () =>
  <Parallax.Layer
    style={{
      backgroundImage: `url(${add})`
    }}
  />

[deadcoder0904]

Ok let me check

[deadcoder0904]

Also my question is can't we do it by keeping it in public folder only ❓

[deadcoder0904]

Great it works now, I did put it in the src directory. Thanks @chee 👍

[deadcoder0904]

Also can it import() programmatically (perhaps using System.import()) an Array of Images & I've read #2545 where the solution doesn't work ❔

[Timer]

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

[deadcoder0904]

Yep it works. Sorry in that issue someone said it doesn't work so I didn't test 😂

[Timer]

I'll close this as resolved then. 😄

[deadcoder0904]

Also my question is can't we do it by keeping it in public folder only ❓

Can you answer this ❔

[Timer]

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.