1

I'm currently learning PWA with React JS (create-react-app). I need to precache the files so it can be loaded when it's offline. But somehow all the files from public folder won't precaching so it's failed whenever I accessing my website offline.

failed

failed2

all that status failed files was from public folder, while others like background3.jpg was imported from React src. I was told by my friend that it should be cached, but actually it didn't

panji gemilang
  • 759
  • 2
  • 10
  • 25
  • Did you create a service worker and add code to precache site assets in the install event handler? If so, share the code so we can help. – Chris Love Nov 23 '19 at 03:38
  • I just changed the `serviceWorker.unregister()` to `serviceWorker.register()` just like the React documentation. – panji gemilang Nov 23 '19 at 05:59
  • I'm using `create-react-app` – panji gemilang Nov 23 '19 at 05:59
  • The default scaffolding does not really create a service worker that does anything. You still have to program your service worker to run logic you need to manage everything. No site has the same caching rules as the next, so the react CLI cannot just create a magic service worker for everyone. You still need to write the code :) – Chris Love Nov 25 '19 at 12:26
  • as the documentation said, I don't need to edit the serviceWorker.js. I just need to `register` it or else I need to eject the `create-react-app` and create my own serviceWorker.js – panji gemilang Nov 25 '19 at 14:24
  • that sounds great....but trust me you need to actually develop your service worker. I have built about 100 PWAs so far and a few were even React apps. I had to create custom service workers for each application. There is not a good way to just magically manage how your specific application assets are cached, invalidated, etc. No one size fits all. – Chris Love Nov 25 '19 at 23:41
  • Hey, did you manage to solve your issue? I am starting with react.js PWA and I'm stuck at the exact same problem, I did try to develop my own service-worker but i am getting even more errors... – khaled alsamman May 17 '21 at 02:38
  • you need to build your custom service worker like @ChrisLove mentioned – panji gemilang May 18 '21 at 07:17

1 Answers1

0

As I understand it you can't modify service workers entirely freely in create-react-app without ejecting your app. Having said that there are dev libraries out there like react-app-rewired that allow to modify parts of the build process without ejecting. Currently facing a similar issue, this might help --

React (CRA) SW Cache "public" folder

bowejg
  • 1