Create-react-app: [PWA] Use Workbox instead of sw-precache

[Sgiath]

It would be nice to use Workbox instead of sw-pracache for genrating service-worker.js file since it is officially supported by Google and has more features than sw-pracache. It has also official Webpack plugin so integration shouldn't be hard.
Some more info about Workbox is here https://developers.google.com/web/tools/workbox/

[wtgtybhertgeghgtwtg]

It's not the best argument, but switching to workbox-sw would trim the dependency tree, too, since sw-precache depends on meow and update-notifier.

[gaearon]

I don't really know much about either.
@jeffposnick Can you provide your insights?

[jeffposnick]

We just launched Workbox v1.0 last week, and I think it would be prudent to give it some time to mature before trying to integrate it into a general-purpose project like create-react-app. (sw-precache is a mature project, having been around since early 2015.)

In the medium-term, yes, migration should hopefully be a smooth process and would make sense. Maybe keep this issue open to track that?

CC: @addyosmani

[gaearon]

Sure, sounds good.

[sidharthachatterjee]

It's been a while since Workbox landed v1.0. I've used it in a few production apps and I think its mature enough to include in CRA.

What do you think, @gaearon and @jeffposnick? I'd be happy to work on a PR for this if you agree.

[jeffposnick]

Hello @sidharthachatterjee! I'm glad that Workbox has been... working... for you 😄

We're working on a pretty major rewrite of the Webpack integration as part of our upcoming Workbox v3 release, and have felt that once that's ready, it would be the right time to start moving over projects like create-react-app to use Workbox.

Moving over to Workbox now would lead to another potentially large transition when we went from v2 to v3.

CC: @goldhand @addyosmani

[bob-lee]

@jeffposnick trying to convert my personal project which was built on Angular and [email protected] for caching static assets and dynamic contents of api calls, etc. to React using c-r-a. Wondering if it is possible to accomplish a 'complete' offline capability without doing eject?

Edit: Without doing eject, I could replace the default service-worker with workbox-generated one to add runtime caching, etc. Anyone interested can refer these changes:

// in registerServiceWorker.js
      const swUrl = `${process.env.PUBLIC_URL}/sw-default.js`;
      // const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;

[gaearon]

@jeffposnick What's the current status on this?

[jeffposnick]

Workbox v3 is currently in alpha, with a target for final release towards the end of the month: https://github.com/GoogleChrome/workbox/releases

Moving to Workbox v3 would give a nicer local development experience, as it includes logging information about what the service worker's doing enabled by default on localhost.

I've been locally testing out Workbox integration with projects like c-r-a and there shouldn't be any technical reason why we couldn't migrate in the future, assuming service worker generation remains part of the c-r-a project.

[davejm]

@jeffposnick @Sgiath @gaearon @wtgtybhertgeghgtwtg @sidharthachatterjee I just published an npm package that can remove the SWPrecacheWebpackPlugin and replace it with Workbox webpack plugins, allowing you to fully generate the service worker or injecting the precache assets into a custom service worker - all without ejecting.
Hopefully can be of some use until Workbox is integrated in c-r-a or for people that want config options/custom service worker without ejecting or forking! The default config should do the same as what the current master branch of c-r-a does.

https://www.npmjs.com/package/react-app-rewire-workbox

[davejm]

I'm going to try and make a PR to actually get this into c-r-a. My current idea to be able to customise the config is to look for a file like e.g. '.workbox-config.js' in the root directory. Would that be ok?

[vaibhavi3t]

@jeffposnick I have a very complex project which is built on CRA. Currently using sw-precache for caching, I want to use workbox for same. How can I do it?

[simonedavico]

@vaibhavi3t I think your best bet right now is https://github.com/davejm/react-app-rewire-workbox

[Braj65]

@vaibhavi3t I have setup my CRA project to work with workbox 3.0. The setup is complete but i am stuck at one point. Let me describe the setup
i) Under root of the CRA project create a file 'workbox-config.js'. Whose content should be as follows
module.exports = {
globDirectory: "build/",
globPatterns: [
"*/.{json,ico,html,js,css,woff2,woff}"
],
swSrc: "./src/myservice-worker.js",
swDest: "./build/myservice-worker.js",
globIgnores: ["../workbox-config.js", "asset-manifest.json"]
};

The glob pattern you need to figure out according to your preference.
ii) Then create a file in src/myservice-worker.js. In which mandatory things are
importScripts(
"https://storage.googleapis.com/workbox-cdn/releases/3.2.0/workbox-sw.js"
);
workbox.skipWaiting();
workbox.clientsClaim();
Apart from this you can use registerRoute() and other eventListeners. Remember workbox 3.0 doesn't needs a constructor to create workbox object.

iii)Create a function to register our custom myservice-worker.js in src/mysw-register.js
export default function LocalServiceWorkerRegister() {
const swPath = ${process.env.PUBLIC_URL}/myservice-worker.js;
console.log("PUBURL", process.env.PUBLIC_URL);
if ("serviceWorker" in navigator) {
console.log("1");
window.addEventListener("load", function() {
console.log("2");
navigator.serviceWorker.register(swPath).then(
function(registration) {
console.log("3");
// Registration was successful
console.log(
"ServiceWorker registration successful with scope: ",
registration.scope
);
},
function(err) {
// registration failed :(
console.log("ServiceWorker registration failed: ", err);
}
);
});
}
}

iv) Modify src/index.js by removing existing 'registerServiceWorker' call and add your own two lines to call your registration
import LocalServiceWorkerRegister from "./mysw-register";
LocalServiceWorkerRegister();

v) Now modify package.json build script
"build": "react-scripts build && workbox injectManifest workbox-config.js"

vi) npm install workbox-cli and workbox-sw in prod scope(not in dev scope).
vii) Now run 'npm run build' and then 'serve -s build'(after npm install -g serve)

@vaibhavi3t If you have any clue about below problem please share

Now @jeffposnick i seek your help. In my react app i have different components and path for them mentioned in src/App.js
div className="container" Route exact path="/initial" component={Initial} / Route exact path="/orderreceive" component={Receive} Route exact path="/orderdeliver" component={Deliver} div

To cache them, i am not sure whether i can precache them or use registerroute(), what should i do. I tried with both precache and registerRoute() but the components are not getting cached. I ran only the frontend-'serve -s build' and both nodejs backend and frontend, still the components are not getting cached. Index.html gets cached but the div id='root' is always empty. I am running it in localhost. Please provide an example if possible.

[albert-olive]

I succeded adding workbox in CRA but I have some doubts. In the cache storage I keep having old sw-precache storage. So now I have duplicated storages. If you see the image, I'm not calling anymore the old service worker.

Also I don't know why but workbox create two, one it finishes with -temp and has nothing inisde and the other is were I have all the data.

[kevinah95]

@simonedavico I wrote a Medium inspired in your comment. If anyone is interested in how to use the plugin, I am glad to share it: Using Workbox with Create React App (Without Ejecting)

[Twaha-Rahman]

@gaearon So, what is the progress so far? Can anybody tell me when Workbox will become a part of CRA. I just want to know this because I am going to create a PWA in the near future...

[jeffposnick]

There's an open PR containing a Workbox implementation: https://github.com/facebook/create-react-app/pull/4169

[Twaha-Rahman]

There's an open PR containing a Workbox implementation: #4169

Thanks!

[helloitsm3]

What's the progress for workbox to work on CRA?

[jeffposnick]

The current version of c-r-a uses Workbox for service worker generation instead of sw-precache.

You need to opt-in to registering the service worker, though.

https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app