Modern Web App Ⅲ. Redux, Mobile version, and PWA

In the third part of the MWA-building tutorial, we will learn how to pass data from the server to the client an example of simple redux-counter, make a mobile version and what is Progressive Web App.

The content of the series of articles about MWA:

• Universal App
• Material-ui and code-splitting
• Simple redux counter, mobile version, and PWA

Links: GitHub repo, archive with all stages, demo.

4. Simple Redux Counter

This part of the tutorial is very practical. We need to solve the problem: imagine our server received some data from the database and we need to print it on the screen in such way that search engine’s robots could found the content, and in the end, the client could use this data.

There is an answer. It is used at the most articles about SSR but the realization is not always applicable to big applications. Simply, following these tutorials you will not be able to build a real app easily. I will try to dot the i’s and cross the t’s.

What do we need: redux and that’s it. It has the global store which we can transfer from the server to the client at one moment. Important: look at the server/stateRoutes.js. This small file lies separately because of its future purpose — getting the data, copying it to an initialState object which will be used in creating the store and passing to the client via html-template. The client will take the data from window.__STATE__, rebuilt the store and use it. Looks not so difficult.

Install:

npm i redux react-redux

And do the actions mentioned in the text above:

server/stateRoutes.js

server/server.js

server/template.js

Get the store on the client side:

src/client.js

The logic of redux in SSR has ended. Now it is the simple work with redux — creating the store, actions, reducers, react-redux connect, counter. The code will explain itself. If not, please read the docs.

src/redux/configureStore.js

src/redux/actions.js

src/redux/reducers.js

src/app/Home.js

This is the result of our hard work:

5. Mobile version

Let’s develop the one or the most important thing for each modern website — mobile version. Hopefully, it can be built much easier than it seems. At the server, we need to detect the usage of the mobile device and send the proper version of the app to the user with the help of initialState object explained in the previous section.

npm i mobile-detect

mobile detect spots the user’s browser by headers, especially user-agent, returns null if desktop, a full description of the device otherwise.

Working with the server:

server/stateRoutes.js

server/server.js

and the client:

src/client.js

The work is left only for the html-coder or the lazy react-developer who loves to insert the ready pretty components. To make it a little bit more interesting, I added the routing to the mobile version. You can take a look at the code in the src/mobileApp/ here.

6. Progressive

Progressive Web Apps (PWA), by Google’s words, are engaging, fast and reliable apps, installable into user’s device, working offline.

Devices need some clarification, actually. You will have no problems with android and Chrome, Opera and Samsung Internet on it will push notification about the installation if it meets the requirements.

On iOS, you can add the app to the home screen but without any banners. And there is no guarantee that it will work well. You as a developeк should consider this.

On desktop, you can install PWA on Linux and Windows since Chrome v70, on MacOS — in the near future, probably in Chrome v72.

Developers need to do only 2 things because PWA is easy integratable, but make sure you have a mobile version or, at least, adaptive design.

2 files — manifest.json and service-worker.js. Manifest is a simple json file with an explanation of how the app should behave after the installation. Service worker does all the rest: work with the cache, push-notifications, gets and modifies network requests etc.

Let’s start with the manifest. We will use the most important directives:

public/manifest.json

My advice for you: read this tutorial about service worker because it is not that simple. I use the “cache-and-update” sw from there.

To make PWA work we are left with the connection of manifest as a link in a template and a registration script of a service-worker:

server/template.js

That’s it! If you will start serving the app on the https, the browser will prompt you to install the app as in the gif above in case of the demo.

7. Conclusion

This is the end of the MWA-building tutorial written in three parts. During the articles, we learned how to create the most modern app from scratch. And you don’t need to search in Google how to connect SSR and Code Splitting, how to make PWA in two simple steps and how to pass the data from the server to the client using server rendering.

By the way, this is the statistics of the Modern Web App made by Google’s web.dev:

If you have read the article carefully — you are the monster. Clap for the articles, give a star on GitHub. But the best support for me is the exploitation of my code because MWA is an open source project. Use, share, improve!

If you like this tutorial, please don’t be shy to clap 👏.

Good luck!