A Beginner's Guide to Progressive Web Apps (PWA)

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? Progressive Web Apps are here to save the day and make your decision a lot easier.

What is a Progressive Web App?

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:

“A PWA is just a website that took all the right vitamins.”

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.

Characteristics of a PWA

Progressive web apps are:

• Progressive - PWAs work on any device and take advantage of any available feature on the user's device and browser.
• Responsive - A PWA’s UI must adapt to any device screen (tablets, laptops, mobile phones, etc.)
• Connectivity Independent - PWAs work in areas of low connectivity or offline.
• App-like - UX design interface that looks/feels like a native app.
• Fresh - When new content is available and the user is connected to the Internet that content will be updated in the app.
• Safe - PWAs are hosted over HTTPS.
• Engaging - Provide available push notifications in the app to encourage users to take action.
• Discoverable - Easily found by typing in the URL or through search engines.
• Installable - Can be easily installed through the browser and behave like a native app afterward.

How do PWAs work?

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.

Setting up a PWA

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?

A Service Worker is a JavaScript worker that ‘sits’ between your app and the network. Whenever your app talks to the network it will pass through the service worker. On the first app load, the service worker stores the required resources in the browser cache. The next time the user visits your app, the service workers will check the cache and return the response to the user before even checking the network so the user can see the previous fetched content even if they are offline. A Service worker manages the push notifications and helps to build the offline-first web app using the browser’s cache API.

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:

• Your app will work regardless of network state, even if offline. This means your users will be able to use your app at 10,000 feet (even on the subway).
• On mobile devices, your app can be added directly to the user's home screen with the app’s icon. This eliminates the need for the app store.
• All static site assets are cached so that your page loads fast on subsequent visits, regardless of network connectivity (such as 2G or 3G). Updates are downloaded in the background.

You can find more information here).

Manifest.json

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 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",
 "icons": [
   {
     "src": "logo192.png",
     "type": "image/png",
     "sizes": "192x192"
   },
   {
     "src": "logo512.png",
     "type": "image/png",
     "sizes": "512x512"
   }
 ],
 "start_url": ".",
 "display": "standalone",
 "theme_color": "#000000",
 "background_color": "#ffffff"
}

To verify that our properties are working correctly in this example:

1. Create a production build with:

npm run build

1. and run your production build with:

npx serve build

1. Open up your dev tools and select Application tab. In the application panel, select the manifest tab and you'll be able to see your PWA information:

1. 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 "name":"Simple PWA".

Also, change your app name in your index.html file:

<title>React App</title>

with

<title>Simple PWA</title>

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 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",
 "icons": [
   {
     "src": "images/simplePwaLogo72.png",
     "type": "image/png",
     "sizes": "72x72"
   },
   {
     "src": "images/simplePwaLogo96.png",
     "type": "image/png",
     "sizes": "96x96"
   },
   {
     "src": "images/simplePwaLogo192.png",
     "type": "image/png",
     "sizes": "192x192"
   },
   {
     "src": "images/simplePwaLogo512.png",
     "type": "image/png",
     "sizes": "512x512"
   }
 ],
 "start_url": ".",
 "display": "standalone",
 "theme_color": "#000000",
 "background_color": "#ffffff"
}

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!

Why Should You Build a PWA?

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).

Cost-Effective

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.

Summary

To summarize, here are the things we explored in this blog:

• What PWAs are
• Characteristics of a PWA *How PWAs work
• Setting up a PWA

I hope you enjoyed this beginner's guide and learned something new about PWAs!

Original blog post: A Beginner's Guide to Progressive Web Apps (PWA)