create-react-app + sw-precache = PWA

(this industry and its lingo...)

• PWA - Progressive Web App, it's... a long story, go read here
• React - library for building UIs. There's a book on React by yours truly.
• create-react-app - a tool that generates skeleton React apps
• sw-precache - a tool that helps turn any web app into a PWA

Before

This post builds upon the previous one that introduces FAIL - a simple app/tool/blueprint.

FAIL was generated by create-react-app and seemed to work fine.

But to keep up with the times I need to make it a PWA. Among other things this will help it run offline (where supported)

How?

The folks over at Google Chrome have created a tool to PWA-ify any app. It's called sw-precache. You make sure you run it with your build process and all is peachy.

Install:

$ npm install --save-dev sw-precache

Since you run this in your React app directory, a dependency is added to your package.json automatically and absolutely free:

OK, now how to integrate with the existing app?

Luckily, a gentleman by the name of Jeff Posnick (of Chrome, surprise!) has created something called create-react-pwa. My brain refuses to learn to setup and use yet another thing, not that close to NY's party anyway, but fortunately Jeff has given a minimal diff required to make the React app integrate with sw-precache.

All I needed to do was:

1. add to the build process in package.json

2. setup the service worker in index.html

<div id="root">Loading...</div>
<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('service-worker.js');
  }
</script>

3. add a manifest.json with cute little setup-y thingies

{
  "short_name": "fail",
  "name": "File API Input Layer",
  "icons": [
    {
      "src": "fail-icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#222",
  "theme_color": "#333"
}

All in all the whole diff required to make my app a PWA is tiny.

After

The new app's demo is https://www.phpied.com/files/fail/. It's now on HTTPS which is required for PWAs and just the kick in my soft parts that was long overdue.

The best part of the whole process was turning off wifi, closing the tab, opening a new one and loading the app again. It totally worked! Offline! Ah, the feeling of accomplishment and pride! I can now use this app on a plane or in the park. In a foreign country. Disconnected, is what I'm trying to say.

Good enough?

There's a tool called Lighthouse that helps you figure out how well/bad your app is doing, PWA-ise.

I ran it a couple of times tweaking little things like theme_color and favicon. It's still not giving me 100% OK because I'm not using HTTP/2 for example, but I can live with this. Most stupid little things are taken care of.

Wrapping up

• Demo
• Intro
• Source

Cheers!

Tell your friends about this post on Facebook and Twitter