More and more businesses are realizing the value behind building apps for their products or services. When it comes to developing an app, businesses need to make a choice: do they develop a responsive web app, a native mobile app, a cross-platform, or a hybrid app? Fortunately, both for businesses and developers, Progressive Web Apps (PWA) are here to save the day and make your decision a lot easier.
In this blog, we’ll talk about what PWAs are, how they work, do a walk-through on setting up a PWA react app, and conclude with the benefits.
A Progressive Web App (PWA) is a web app that uses modern web browser capabilities but looks and behaves like a mobile app across different platforms. Progressive web apps combine the best features of both web and native apps as they are fast, reliable, and engaging.
In simpler terms, just as Frances Berriman (Designer) and Alex Russell (Engineer) from Google said:
PWAs are a set of principles that make a web app work in a way that allows users to feel like they are using a seamless mobile app. The ultimate goal is for end-users not to be able to differentiate a web app from a mobile app. PWAs bring considerable benefits to both software engineers and businesses as they provide fairly easy development and effective user engagement.
Progressive web apps are:
Users can visit the PWA like any normal web page. As the user is surfing the web page, they will be greeted with a pop-up, “Add to Home Screen.” The user can also install the PWA directly bookmarking on the browser and adding the app to their home screen with a few taps.
For example, here is how the platform Pinterest works as a PWA:
When the user confirms the installation prompt, the “app” will install itself in the background. Once the PWA installs, it is automatically added to the user’s home screen. One single click and it’s now on the user’s phone, no need to enter any sort of App Store to download the app. Once the user opens their app, it looks just like a regular native app:
There you have it, a PWA!
Now the user is able to use various PWA features such as offline mode, push notifications, open in full-screen mode, self-updates, camera, microphone, and other app-like features.
One of the most beneficial features of PWAs is that users are able to browse the app offline and the content will still appear on their mobile phones. On the other hand, if the user rejects to install the PWA or clicks to install at a later time, then the web app is still reachable through the browser.
Now that we’ve covered the basics, let’s move onto the fun stuff - setting up your PWA app.
In this blog, we will create a basic PWA that works offline and is installable on the device home screen. Let’s take a look at what it takes to create a basic PWA.
1. Create a basic web app with create-react-app
We will create a basic web app using create-react-app, which has built-in support for making PWAs. First, enter this command in the console:
npx create-react-app simple-react-pwa
Now you have created a basic react app. You can run it locally using:
cd simple-react-pwa npm start
2. Turn your app into a PWA
To turn your app into a PWA, you need to register the service worker and your app should have a manifest.json file.
What is a Service Worker?
Open up the index.tsx file in your newly created project, at the bottom of the file you will find this code:
// If you want your app to work offline and load faster you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https//bit.ly//CRA-PWA serviceWorker.unregister().
To make our app a PWA, we need to change the unregister() call to register().
What does this mean? What have we achieved?
The official documentation states the following:
You can find more information here.
What is manifest.json? Why do we need this?
The manifest.json file is a simple JSON containing some basic information about our PWA like its name, starting URL, icons, etc. In
create-react-app, a default manifest file
public/manifest.json is automatically included when a new app is built. The HTML file
public/index.html, also contains a
<link> element to load the manifest:
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
Having a manifest is required by the browser to show the Add to Home Screen (A2HS) prompt. When a user adds a web app to their home screen using either Chrome or Firefox on Android, the metadata in manifest.json determine what icons, names, and branding colors to use when the web app is displayed.
Your manifest.json should look like this:
"short_name": "React App",
"name": "Create React Simple",
To verify that our properties are working correctly in this example:
npm run build
npx serve build
3. Give your app a name and declare multiple icons
Once we verify that everything is set up, it is time to name your PWA and declare some icons.
In your manifest.json located in the public folder replace
"short_name":"React App" with
"short_name":"Simple PWA" and
"name":"Create React Simple" with
Also, change your app name in your index.html file:
Now we should define a set of icons for the browser to use on the home screen, app launcher, splash screen and so on. To do this, first, create a new images folder in the public folder (public/images) and update references to them in the manifest.json file.
After we change our app name and define multiple icons, our manifest.json should look like this:
"short_name": "Simple PWA",
"name": "Simple PWA",
Voila! You now have a basic PWA configuration.
For more information to help you get started with your PWA, check out this link. Good luck building your PWA app!
You’ve learned a bit about PWA, how to build your app and now you may be asking yourself:
“Why should I even build a PWA?”
Here are a few reasons why building a PWA for your business or your client’s business may be the ideal solution:
Progressive web apps are faster to develop and update
You can have one single codebase for various platforms, not just the two popular platforms (Android & iOS).
Choosing to build a PWA saves your business money because you get that two-for-one deal. You no longer have to invest in both a native app and a web app, instead, you can just develop a PWA.
Uses less data and works offline
PWAs cut data usage which seriously benefits users. They help users save on their data usage (purchasing data can be pricey), save storage on their mobile devices and even access the app when offline. How convenient? All of this is possible due to PWAs being equipped with service workers.
Ability to send push notifications
This is another way businesses are able to increase their overall engagement. PWAs allow you to engage with your users by sending them push notifications even when they’re offline. A little reminder can go a long way to encourage users to log into the app or check out a specific feature.
Easy installation without download
Progressive web apps require no App Store or installation. From the browser, visitors can bookmark and add the app to their home screen with a few taps. The PWA will show up on the home screen, in their app directory, send notifications, and integrate into system settings.
An overall better user experience
A PWA is sure to offer your users a great experience starting with automatically adjusting to the screen size and resolution of any mobile device with the addition of a super-fast loading time. Afterwards, users are offered the option of adding the app to their mobile phone home page and not having to go through a tedious installation process. PWAs offer many favourable perks.
To summarize, here are the things we explored in this blog:
I hope you enjoyed this beginner's guide and learned something new about PWAs!