React Progressive Web Application with Parcel

Includes

• React (User Interface Library)
• React Router (Routing duh...)
• Babel (transpile JSX from React)
• Webmanifest (Add to home screen feature in mobile devices)
• Service Worker with Workbox (offline support, caching assets)
• Sass (Not used but why not)

Install

git clone git@github.com:mthpvg/parcel-react.git
cd parcel-react
npm install

Development

npm start

Visit: http://localhost:1234

Production

Build

npm run build

Output is in the dist directory.

Serve build locally

npm run serve-build

Visit: http://localhost:5000

Details

Webmanifest

Parcel is not able to pick manifest.json, instead it parses:

<link rel="manifest" href="manifest.webmanifest">

Service Worker

The dist/service-worker.js file is generated by the Workbox library based on the workbox-config.js config file. In order to generate the list of files to cache, first workbox needs parcel to produce those files.

We have a chicken and egg problem because parcel picks up the service worker file by looking its registration in the source code: parcel-bundler/parcel#398

To solve this problem we give parcel an empty service worker file: src/service-worker.js. When running npm run build, parcel copies that file to the dist directory then the post hook postbuild is triggered and workbox replaces the empty service worker with the real one.

SPA routing and caching

When refreshing a page like /users, as opposed to the root /, while offline, the service worker bails out. Which is logic since it only knows what was produced in the dist directory.

To circumvent that problem, workbox as our back, just set:

"navigateFallback": "/index.html"

in the workbox config file.