Install Button in PWA React+Redux

Image for post
Image for post

In this story, we will look at how to make a React+Redux app installable on both desktop and mobile phone. You can find the source code of this app here.

Image for post
Image for post
pomodoro.increaser.org

Before we start adding React/Redux specific logic we need to be sure that app we are working one is have everything listed in this checklist, at the moment of writing, they are valid manifest and service worker and that your app served over HTTPS. You can check if your app installable by using audits in developer tools.

Image for post
Image for post
check if app installable

We need two actions — one to save proposal event and second to remove it from the state. To create actions and reducers used the redux-act library.

In the root component, we attach event listener to the window at componentDidMount, when beforeinstallprompt event fires, we call saveInstallProposalEvent action to save the event in the state.

The last thing we need to make is to place somewhere button that will be rendered only if proposalEvent in the state.

Redux utility functions that were used in the example above you can find in the snippet below.

Reach the next level of focus and productivity with increaser.org.

Image for post
Image for post
Increaser

Written by

Software engineer, creator of increaser.org. More at geekrodion.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store