React-React progressive web app: An opinionated React based repository which is optimized for Progressive Web App development.

React Progressive Web App

What is this repo? Well, it's a very opinionated React based repository which is optimized for Progressive Web App development. In its current format, it will hit around 95-100 out of 100 when running through the Lighthouse audit. You can test this out by visiting the demo and generating a lighthouse report against it.

There are many different ways to structure an application; this repository is the way that I tend to structure my applications. I think, you could strip out the webpack.config.js file, tweak it slightly and then you will be on your merry way. But, you would still need to create a manifest, upload the images and make sure they are referenced correctly, that is why I decided to open source this repo as it will allow you to just write React code without worrying about painful configuration.

Opinions

  • It uses Webpack 2 - which makes use of tree shaking and route based chunking.

  • It uses Flow - A static type checker for JavaScript. Although not that useful right now, moving forward in developing your app, it is there to protect you.

  • It uses the public directory for Webpack output. Within that, it then has an assets directory which will hold the assets created by Webpack but also the icons for the manifest.

  • It has full separation of concerns around components, what does this mean? It means that all components, their assets, and their tests are kept in the same folder. Here is a good example of what I mean.

  • It uses Mocha and Chai for its testing framework. Choosing Mocha and Chai was a conscious decision. However, this could easily be switched out for something like Jest if desired.

  • It comes with Nightwatch as the standard e2e testing framework. I have tried multiple frameworks and found this is by far the best at the moment.

  • It uses offline-plugin for webpack. Again, choosing offline-plugin was a conscious decision. Originally, I wrote the caching myself, but I felt that with open sourcing this repo, it needed to include a plugin that is actively being maintained and optimized for caching.

  • The repo uses route based chunking as outlined in point one, with this, it means that the react router implementation needs to be done with getComponent. You can see this here.

Arguably, you could switch a lot of this out for your approach, but then what would be the point in using an existing repo ? .

Installation

Please follow the following steps to get up and running.

  1. Install dependencies:
```javascript
npm install && flow-typed install
```
  1. Run the unit tests
```javascript
npm test
```
  1. Run the e2e tests
```javascript
npm run nightwatch
```
  1. Run the static type checker
```javascript
npm run flow
```
  1. Start the webpack server
```javascript
npm run server
```

Manifest

To make this PWA your own, you need to change the Manifest information. Once you have updated this, you will be able to see the changes you made in the Application tab of your Dev tools.

manifest.json screenshot

Finally, you will need to change the icons, at the moment there are just some default icons, in the public/assets/images/icons directory. It would be in your best interest to update these icons to be something more unique to your project.

Hosting

You can host this site anywhere you want as long as it can be easily secured using SSL. I personally went for hosting on AWS S3, with CloudFront. CloudFront will provide further caching which will mean even when you are online without a cache storage; the site will load super quick. I realize this is not for everyone, however, if you are going to be making changes regularly and you need to blow away the cache storage, I would highly recommend looking at CloudFront.

CloudFormation And Static Sites may help if you are unfamiliar with AWS.

This repo is currently a static based repo; the aim is to keep it that way. If you want to provide dynamic information, you can call out to an API using something like Axios. Eventually (although, not covered in this repo) you can implement the Cache then network approach, which would mean your app works with dynamic content on and offline.

Lighthouse

To see how you are getting on in your PWA endeavor, I would highly recommend Lighthouse. It gives you all the information that you need to hit the PWA targets. It is also a Google product, so you know that if you hit those targets, you are on to a winner.

Caveats to success

This repo is not a silver bullet (unless you keep it exactly as it is, which I doubt you are going to do). So, as you make changes or add to your codebase you need to be aware of the things that may affect your Lighthouse score:

  • CSS Rules - You need to make sure that you do not add "unused rules" to your stylesheets. This will reduce unnecessary bytes consumed by network activity.
  • HTTPS - You need to make sure that when you deploy the application that it is using HTTPS and redirecting HTTP traffic to HTTPS.
  • JavaScript libraries - these are a sure-fire way to increase your load time, make sure you fully evaluate if you need the library before adding.

Again, most of this stuff is covered by Lighthouse, so if you regularly check it, you will soon find out if your app is going down the wrong track.

TODO:

Some things that are not currently covered in the repo.

  • Push notification support
  • Cache then network support
  • Background Sync support

Demo

Vist https://d103dzdze3hklu.cloudfront.net/#/ to see a demo in action. You should also visit this on your phone and add to your home screen; it will allow you to get a feel for how it works on a phone.

### Contributions

Contributions are very welcome! If you found a bug or some improvements, feel free to raise an issue and send a PR! Please see the CONTRIBUTING file for more information on how to contribute.

License

MIT

Comments

  • Push notification support
    Push notification support

    Feb 25, 2017

    It would be good to have some form of push notification support within the repository. A the moment this has not been covered at all.

    The approach is open for discussion.

    help wanted 
    Reply
  • Cache then network support
    Cache then network support

    Feb 25, 2017

    It would be good to add support for the cache then network approach. At the moment this is completely unsupported. The repository uses the offline-plugin for webpack. In an ideal world we would carry on using this as it is built for this specific problem.

    The approach is open for discussion.

    help wanted 
    Reply
  • Background Sync support
    Background Sync support

    Feb 25, 2017

    It would be good to support for background sync.

    Approach and discussion welcome.

    help wanted 
    Reply
  • Did you thought about the app shell architecture?
    Did you thought about the app shell architecture?

    Feb 27, 2017

    Google published a pattern, called theApp Shell.

    Offline support is the first step, then there is caching and pre-caching support. The app shell covers this very well.

    What do you think about including it in this repo? I could give it a try if you're interested.

    Reply
  • Pages are responsive on tablets & mobile devices
    Pages are responsive on tablets & mobile devices

    Feb 20, 2017

    Add simple responsive css, we don't want to add a framework and bloat the initial load, also a lot of the time we may want to use different frameworks, this should be easy to add.

    Reply
  • Site is served over HTTPS
    Site is served over HTTPS

    Feb 20, 2017

    Allow the sit to run off https. Should be simple, look for any caveats.

    Reply
  • Hosting
    Hosting

    Feb 19, 2017

    Try and write up how hosting can be done.

    Reply
  • IndexedDB
    IndexedDB

    Feb 19, 2017

                                                                                                                                                                                                           
    Reply
  • Webpack tree shaking
    Webpack tree shaking

    Feb 19, 2017

                                                                                                                                                                                                           
    Reply
  • fix typo in nightwatch cmd
    fix typo in nightwatch cmd

    Feb 27, 2017

    This fixes a typo that was causing nightwatch to fall over.

    Reply
  • Fix typo
    Fix typo

    Feb 26, 2017

    Nothing special here just a minor typo fix

    Reply
  • correct spelling - command
    correct spelling - command

    Feb 26, 2017

                                                                                                                                                                                                           
    Reply
  • Fix getComponent route link
    Fix getComponent route link

    Feb 26, 2017

                                                                                                                                                                                                           
    Reply
  • Fixed typos
    Fixed typos

    Feb 26, 2017

                                                                                                                                                                                                           
    Reply