What is a progressive web app(PWA) and how to convert your react native app into a PWA using expo.

A progressive web app is a website that can be installed on the user device and can be used offline. The idea of a PWA was introduced by Steve Jobs in 2007 but it only came into existence when Google introduced PWA in 2015 which uses modern web features like service workers and web app manifests. Modern websites can easily be converted into a PWA and can be used in any browser. Have you noticed these prompts and tabs when you visit Twitter ?

If the answer is yes, you are already familiar with PWAs and you have used one before.

So what are the benefits of PWA? Why companies like Twitter, Uber, Spotify and Flipkart are using PWA?

• They are faster.
• They are responsive and work with different screen sizes.
• They work offline.
• They behave like native apps and provide features like push notifications etc.
• You have to maintain a single codebase for iOS , web and Android.
• Progressive web apps has proven to increase user engagement by 70%.

Requirements of an application to be considered a PWA.

• Your website must be served using HTTPS.
• It should be installable on any device.
• It should have an offline page.
• It should have a manifest file and a service worker

Progressive web app with expo.

Let us first setup our project with expo. Fire up your terminal and use the following command to install expo cli and initialise your project with expo.

npm install — global expo-cli
expo init my-pwa

Choose a blank template and now we are good to move forward. Make a navigation.js file in the root of your directory and now you can start making a beautiful UI and navigator for your project using react native. I will use a simple design for this demo and will share my project on GitHub.

Once you are done with the design you can run npm start from your working directory and can choose a device to run your project on. This is the resulting application on my iOS simulator.

To define our web specific design or android specific design we can make use of Platform module provided by React native to detect the Operating System on which the app is running. Below code snippet explains how you can use this module.

...
import {Platform} from ‘react-native’
...
functions App(){
...
if(Platform.OS === "web"){
//do something
}
else if (Platform.OS === "android"){
//do something
}
...
}

Now that we know how to design and target different platforms we are one step closer to our PWA. Expo mainly does the heavy lifting for us here, all the apps created with expo are automatically progressive web apps. It provides us with offline support and service worker which are two of the four conditions required by a PWA. To add manifest properties we can make the following changes to our app.json file.

“web”: {
   “backgroundColor”: “#ffffff”,
   “description”: “This is a demo app”,
   “display”: “standalone”,
   “themeColor”: “#008080”,
   “splash”: {
   “image”: “./assets/images/splash.png”,
   “resizeMode”: “contain”,
},

You can define more properties which depends on the application you are working on. Do checkout this page for more information. Now from your terminal use this command.

expo start --web

This will create a web-build folder in the root of your project.

Congratulations 🎉 you have created your first Progressive web app. You can now deploy your app using Netlify and don’t forget to set published directory as web-build. To check if your app is a PWA or not, you can use lighthouse and check if you have a green mark on PWA badge or not and you can also see an install icon.

All good things come with a price.

Yes there are a certain points to keep in mind and extra code we have to write while using react native for web. Few of the core modules and Api’s are not supported by react native web and you may have to look for alternate implementations like the alert api and modal. While converting your existing app into a pwa you may also come across an issue like this.

This issue appears in your project when a particular type of module does not support web platform. Here the tooltip module I used is not able to load on the web, to solve these type of issues you can specify under your web property in app.json to ignore this module when building the project for web.

“web”:{
  ...//manifest properties defined above
   "build":{
     "babel":{
       "include":[module name]
     }
   }
}

Conclusion

React native and expo makes the development of PWA’s really easy. A few modules and functionalities are not supported for web but these no’s are decreasing everyday, modules are being build and tested on three platforms now i.e Android, iOS and web which explains that this technology will be greatly used in the future as well to increase user engagement.

In this article we successfully developed a progressive web app using react native and expo. If you have any questions, please drop a comment or email me at balodikanu124@gmail.com and I will be happy to help you. If you found this article helpful, informative and you enjoyed following along, clap and share with your friends.

You can check the full code from here.