Install Button in PWA React+Redux
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.
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.
Action and Reducer
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.
Root Component
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.
Install Button
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.
