Service Workers With Create-React-App


These days Service Workers are the latest craze in web apps. They are specifically in the area of Progressive Web Apps (PWAs). I’m futzing with a React app trying to get my own custom Service Worker logic to run and I hit a snag. Hi, I’m Cliff. You’re probably here because write web apps. (I still think it sounds funny to say “write web apps”. I think of physically writing with a pen and a pad when I say “write” and nobody writes any programming logic with anything other than a source editor… unless you’re extremely hard-core! In which case, I think there should be a contest on the most advanced computer program actually written with traditional tools, like a stone and chisel. Am I still typing under parenthesis?)

Yesterday I realized that the popular automation tool, “Create React App” or CRA for short, was never intended to be used with anything other than some caching service worker logic. If you try to do anything beside offline support you’re probably going to need to “eject”. If you’re new to React, “eject” is the last thing you want to do. To “eject” means to own all of the configuration that CRA offers which means you are now in “I know what I’m doing, don’t tell me nothing!” mode. In short, it’s not a good mode to be in because when you get that far you are basically writing your own Create React App tool.

At any rate, my task was to figure out if/how we could use a service worker to enable some sort of push notification support in our app. I’m still working through the details so I should probably wrap this up and get back to it. Before I close I did wanna share a couple of nuances. First, you won’t be able to easily add your own service worker logic to a react app for a few painful reasons. The registration script, which looks so innocently easy to change on the surface, actually locks you into using ONLY the service worker which is generated by the CRA tool. It looks to see if your browser has support for service workers then it tries to fetch the service worker by name. You can change the name of the file it attempts to fetch but then there’s the wrinkle of how to get a custom Javascript file to be individually pushed to the output folder without being webpack-ed in with the rest of your React files. I hacked one directly into my build output folder which sorta works but then… THEN… there’s this OTHER wrinkle! The JavaScript file, when fetched, has to be served with a Content-type HTTP header that includes “javascript” somewhere in it. Here’s where it’s ugly because there is a noop-serviceworker-middleware plugin included with the dev server and support stuff in webpack which always serves the file with Content-Type equal to “text/plain”. I dug deep in the source and found that it will ONLY use Javascript in the content type if the file name is EXACTLY equal to “service-worker” and this value is a HARD-CODED string! Now I could remove the check from the register ServiceWorker script but it just feels ugly at that point.

Time is going by and I should get back to the salt mill and figure out how to make all of this play nicely together. In the meantime, if you know of any CreateReactApp hax or work-arounds that would make life simpler please speak up!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s