PWA’s: One Code Base, 3 App Stores. How to make PWA’s feel native

At Noritex we’ve been experimenting with running all of our applications into a single front-end code. These are the steps we took to gradually shift into one codebase.

React + Styled Components

The first step was that we carefully selected React + Styled Components because it allowed us to modify the CSS at runtime and injecting different styles based on the environments.

The perfect framework for this was Razzle, it allows us to server render for SEO benefits. At the same, we were able to modify the Webpack build process to have a separate process for standalone.

Building for Android

Building for Android is relatively simple, you just use Microsoft pwabuilder.com and it will wrap the website into a standalone APK that you can upload into the play store.

Building for iOS

Here is when things get tricky according to the new iOS rules most of the binary code must be inside the APK or else it won’t get accepted into the app store. For this, we had to create a separate build process that compiled everything into a single JS file.

Because Apple doesn’t technically support PWA’s in the app store. The flag for display-mode: standalone did not activate. We had to modify the CSS to force show the standalone layout (See below). We did this by using environment variables.