/flux-react-example-sw

flux-react-example with a service worker

Primary LanguageJavaScriptBSD 3-Clause "New" or "Revised" LicenseBSD-3-Clause

flux-react-example-sw

Build Status Coverage Status Dependency Status devDependency Status

Sauce Test Status

A WIP learning playground for service worker

*NOTICE*
react-pwa-reference is a more up-to-date version of this project.

This repository expands on flux-react-example and adds a service worker to test progressive app offline and push capabilities based on that architecture.

Service Worker Info

The worker and registration source is located at assets/scripts/sw and assets/scripts/service-worker-registration.js

Offline and Performance Enhancements

  • This implementation leverages Google projects sw-precache and sw-toolbox for precaching static and dynamic assets, and the general ease of setting up fetch handling on routes/origins.

  • The application's Flux Stores are sent to the service worker using the init command and referenced from IndexedDB.

Push Notifications

  • This implementation relies on GCM to deliver push notifications.

  • Chrome only (so far).

  • Currently, push notifications are subscribed and demonstrated using the settings control panel (cog in upper right).

Background Sync (not periodic)

  • Failed api POST requests are stored in IndexedDB store requests for deferred replay as appropriate.

  • Policies for what is "appropriate" for this example are found in assets/scripts/sw/sync/serviceable.js, and cover bulk replay and individual request success cases.

  • The service worker attempts to reconcile and replay all failed requests when the init command is received. However, if service worker one-off background sync is supported (currently only Chrome 49+), it is also used to replay all failed requests. Failed requests are attempted to be serviced according to application policy until they succeed, an arbitrary retry limit is reached.

  • For browser supported background sync, the retry limit is set by user agent defined heuristics. For the manual case, where sync is initiated from the init command, a simple hard-coded limit is used.

Demonstration

There is currently no hosted app. So, the best way to demo capabilities and have a look around at things is git clone and npm install.

Build Environment Prerequisites

  1. Node ~4.2 required.
  • Globally installed grunt-cli npm install -g grunt-cli
  1. Ruby required.
  • Globally (rvm/chruby ok) installed Compass >= 1.0.1 gem install compass

How to Run a Demo

  1. Clone this repo and run npm install.
  2. Satisfy the Build Environment Prerequisites.
  3. Run the server using the 'perf' build by running npm run perf. This is just like the 'prod' build, but provides source maps and doesn't Uglify so the source is browsable in module form. The 'perf' build will build and start the server at localhost:3000.
  4. If you are only interested in offline/perf capabilities, use a 'New Chrome Incognito Window' with devtools open and navigate to localhost:3000 to play with and inspect source, network, and resources.
  5. To demo push notifications, you cannot run Incognito. Also, you need to setup a GCM project and set the API key in the server environment variable PUSH_API_KEY.

Flux-React-Example Info

Flux-React-Example is the base project this project expands on. It is an example contact web application. Serves as a reference app to inspire isomorphic application development solutions.

  • Features a data-driven isomorphic React application that follows the flux flow using Fluxible.
  • Uses a Node, Express, Fluxible, React stack employing Grunt, Webpack, and Mocha/Chai.
  • Employs Yahoo Fetchr for uniform client/server access to app services.
  • Features a Flexbox layout with some very light usage of Foundation For Apps (The Sass mixins only, no JS, all possible CSS output disabled).
  • Performance Features
    • Majority of visual completeness in < 14k initial download.
    • Near-ish 60fps rendering.

For more info on the base project (includes detailed developer/build instructions), please visit the full Flux-React-Example README.

License

Unless otherwise specified, this software is free to use under the LocalNerve BSD license. See the LICENSE file for license text and copyright information.