Create-react-app: Serviceworker - cache API response

[metju90]

I've been searching online with no success to see if its possible to cache certain API's responses in order to have a further functional offline site.

If this is already in place, can someone link me to its documentation? if there isn't, I think it would be a great feature to have.

[mhtydv93]

I think it's better if you start using Workbox. It's a tool create by google as a forerunner to sw-precache-plugin which CRA currently uses. Also, this will be an opt-in feature in the next release, so it's better if you learn and implement it yourself. Here are some resources and links that I gathered while learning about Service Worker APIs.

Intro: https://developers.google.com/web/tools/workbox/
Getting Started with Webpack: https://developers.google.com/web/tools/workbox/get-started/webpack
Webpack plugin config options: https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#full_generatesw_config
Use WorkboxSW to write your own SW file. Configuration options:
https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-sw.WorkboxSW#main
Caching strategies: https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-sw.Strategies#.StrategyOptions
Examples: https://workbox-samples.glitch.me/examples/workbox-sw/

* UPDATE *
Workbox 3.0 has released with some major breaking changes, so some of the links above might not work.

[davejm]

@metju90 @mohit-github I created an npm package that solves this issue without ejecting/forking https://www.npmjs.com/package/react-app-rewire-workbox .
I also opened a related pr (#4169) on this repo but they don't want to allow you to configure it.

[metju90]

One of the benefits of create-react-app is to develop and an application which requires zero config. I understand why they are not happy with the required config.

Thanks for this @davejm

[bmmathe]

I have a follow-up question relating to this (maybe this resides in StackOverflow). If your API is hosted on the same origin as your static website, do all GET api calls get cached? For example my static site might be served from https://example.com and my api is at https://example.com/api. The documentation says sw will not intercept or cache any cross-origin traffic like HTTP API-requests.

In my scenario, since the api isn't technically cross-origin, will my api calls be cached?

[Timer]

This is an app level concern and not something which would be a good default for all of our users, I can pretty confidently say this isn't something that we'll be exploring.