Progressive Web Apps — The Next Step in Web App Development

A Companion Post to Neeraj Singh’s talk at ReactFoo Pune 2018

What if I told you that now a web developer can easily build mobile apps? All you need to know is some HTML, CSS, and JavaScript and you are good to go! No need to go through the pain of learning native languages like Java (for Android Apps) or Objective-C and Swift(for iOS Apps).

It would be even more awesome if you could publish your apps without having to go through the rules and restrictions placed by Play Store and App Store! If you are a Mobile App Developer, you might have experienced the troubles of following the norms of App Store. The App store also has some very strict rules about when you can update your app or what that update can contain (App Store won’t let you publish the update if it changes the fundamental working of your App).

In this post, we will find out about how building Progressive Web Apps lets you do all the things that I mentioned above, and more!

ReactFoo Pune 2018

This is a companion post to Neeraj Singh’s talk about Progressive Web Apps, which he gave at ReactFoo Pune 2018.

ReactFoo is a developer conference organized by HasGeek. This conference is full of talks and workshops about the popular web design framework, ReactJS.

The conference was held at MCCIA Trade Tower. There were many amazing talks by well-known developers such as Satyajit Sahoo, Siddharth Kshetrapal, Manjula Dube, Preeti Wadhwani, Jaison John Titus, and many more!

The event was attended by many React developers and enthusiasts who came from places like Ahmedabad, Surat, Hyderabad, Chennai, Mumbai, and of course, Pune!

Preeti, Manjula, and Siddharth leading a Birds of Feather session on testing for React

What are Progressive Web Apps (PWA)?

Simply put, a Progressive Web App is a mixture of a mobile and web app!

But what does this exactly mean? And how are these different from Traditional Web Apps and Native Apps?

• PWAs are Progressive — These apps work for every user, regardless of the browser that you are using or even where you are situated in the world! So whether you are using Chrome or Opera or whether you are living in India, UK or even North Korea, it doesn’t matter! Progressive Web Apps will work just as well because they’re built with progressive enhancement as a core tenet.
• Responsive — ProgressiveWeb Apps will fit any device! Be it a desktop, a mobile, a tablet, or even something that hasn’t been created yet!
• Web Apps that don’t depend on connectivity — With the help of service workers, Progressive Web Apps can even work on low-quality networks, or even offline!
• App-like feel — Progressive Web Apps feel just like an app. They have app-style interactions and navigation.
• Fresh — Thanks to service workers, your Progressive Web App will always be up-to-date with the latest updates!
• Safe — Progressive Web Apps are always served via HTTPS, ensuring that no-one without proper authorization can tamper with your app.
• Discoverable — According to the W3C manifest, Progressive Web Apps are classed as apps. It easier to find a Progressive Web App thanks to service worker registration scope that allows search engines to easily find them.
• User Engagement — PWA features like Push Notifications make user engagement very easy!
• Installation — Users can “keep” the most useful PWAs on their home screen without the hassle of app stores.
• Linkable — PWAs can be easily shared via URL and do not require complex installation.

Native Apps vs. Traditional Web Apps vs. PWAs

Let’s do a brief comparison between Native Apps, Traditional Web Apps, and PWAs

Native Apps

A native mobile app is a smartphone app that is coded in a programming language like Objective-C for iOS or Java for Android operating systems.

Native apps have the following features:

• Fast performance and a high degree of reliability.
• Complete access to phone’s hardware.
• Native apps can even modify system settings.
• Native apps can even access phone’s various devices and features, such as the camera and address book. It can also use the phone’s telephony features to send messages or to make calls.
• Native apps have slower iterations. What this means is that it takes a while for updates to be available to users. This is because Native Apps are usually found in app stores, so any update sent by the developer has to go through the store’s regulation before it is made available to the public.

Traditional Web Apps

Traditional Web Apps are apps that have the following features:

• Real-Time Delivery — Depending on the speed of your internet, the web app will be instantly delivered to you.
• Web apps are built using standard HTML, CSS, and JavaScript.
• Limited access to device’s features. So while your app may be able to access features like camera or location services, it won’t have access to your mobile’s telephony features.
• Web apps depend on internet connectivity. Without a proper connection, all that you would be able to do is play with the Chrome Dinosaur.
• You cannot install the web app on your device.
• Any update will be instantly delivered to all the users. Unlike native apps, web apps don’t have to bother with any kind of app store restrictions.

Progressive Web Apps (PWAs)

Along with the features that I have mentioned above, PWAs are also defined by the following features:

• Low friction of distribution — PWA updates are instant! All the users will get the prompt instantly and simultaneously!
• Just like a traditional web app, PWAs will also have limited access to the device’s features.
• A major disadvantage of PWAs is that iOS is yet to provide support to PWAs. But developers at Apple seem to have started working on providing the support.

Discoverability in PWA

According to Comscore Mobile App Report, over 50% of America’s smartphone users download zero apps a month! What this means that the time when our phone used to be filled with apps is slowly fading away!

Statistically, each step to download an app reduces about 20% of the app’s potential number of users.

Progressive web apps have effectively reduced the steps between the discovery of an app and getting it on the home screen, thereby eliminating the friction of getting the app installed on your device.

Another win for PWAs is that native apps are only available via Play Store/App Store. The reason behind the success of these stores is that users have no other choice in how they can find and install native apps.

But when it comes to web apps (both traditional and progressive), there is no single store! So we can have carefully curated app stores that suit our needs perfectly. The opportunities are limitless!

The general process of installing Native Apps is something like this:

1. Open the App Store and search for the app.
2. Click install.
3. Accept various permissions
4. Open the app
5. App launches.
6. Sign in to the app
7. Use the app

Let’s compare that to installing progressive web apps:

1. Visit the site.
2. Add to home screen.
3. Go to home screen and open site.
4. Use the app!

PWA on Home Screen

Let’s take the example of Flipkart. When you open the Flipkart URL on your mobile’s browser, you will get something like this:

When you open the browser’s menu, you will see the option Add to Home Screen.

Note: If you get a prompt as shown below, you will know that you are adding a PWA to your home screen.

But if the browser instead asks you to enter a name, then it is not a PWA.

Once your PWA is installed, it will appear on your home screen like this:

Just like a Native App, your PWA will also be available in the device’s app drawer.

Now when you open the PWA, you will notice that is exactly like what you saw on your web browser. The only difference is that in the PWA, there is no URL bar.

Chrome browser will automatically send you a prompt to add the PWA to your home screen if you have opened the webpage 2X times for two weeks.

PWA Manifest

Manifest is a simple JSON file that gives the developer the ability to control how the app should appear to the user in areas where they would expect to see apps (a mobile device’s home screen), direct what the user can launch, and define its appearance at launch.

Here’s an example for manifest.json file of a PWA app:

To link this JSON file to your PWA, use:

<link rel="manifest" href="/manifest.json">

Push Notifications

A push notification is a message that pops up on the user’s device. Push Notifications can be triggered locally by an open application, or they can be “pushed” from the server to the user even when the app is not running. Push notifications allow users to opt-in to timely updates and also allow you to effectively re-engage with customized content.

Push Notifications are assembled using two APIs: the Notifications API and the Push API. The Notifications API lets the app display system notifications to the user. The Push API allows a service worker to handle Push Messages from a server, even while the app is not active.

The Notification and Push API’s are built on top of the Service Worker API, which responds to push message events in the background and relays them to your application.

Service Workers

I have been mentioning service workers multiple times in this post. But what are these Service Workers?

Service Worker is a script that your browser runs in the background, separate from the web page/web app. It is generally used for features that don’t need a web page or user interaction.

Service Workers provide the technical foundation that features like offline experiences, periodic background syncs, and push notifications rely on.

Registering a Service Worker

To install a service worker you need to kick-start the process by registering it, so your app knows where the service worker actually lives.

To know more about Service Workers:

Service Workers: an Introduction | Web Fundamentals | Google Developers_Rich offline experiences, periodic background syncs, push notifications&mdash;functionality that would normally…_developers.google.com

How To Push Notification?

To implement push notifications, you need to configure both the Client Side and the Server Side of your PWA.

Let’s start with the Server Side first.

Server Side

At the server side of your PWA,

1. The data that you want to send to your user is first generated.
2. The date is then encrypted using the user public key.
3. The server now sends the encrypted data to the endpoint URL.

VAPID

There are multiple ways through with a server can send Push Notifications to the user. One such method is the VAPID(Voluntary Application Server Identification for Web Push) Protocol. VAPID uses JSON Web Tokens to carry information.

The core of VAPID is called claim. A claim is a JSON object that contains several common fields.

The application server creates a public/private key pair. The public key is given to your web app, whereas the private key stays with the admin.

When the user elects to receive push notifications, the PWA adds the public key to the subscribe() call’s options object.

Now the app’s server sends a push message, it includes a signed JSON web token along with the public key.

If this public key matches the one that user has, the data is decrypted.

This method prevents unauthorized push services, which otherwise would have lead to a greater risk of DOS attack. Also, any app server in possession of the endpoint can send messages to your user, and there is no way for the push service to contact the developer if there are problems.

Web Push

Web push notifications are messages that come from the web. You get them on your device when the PWA is not open and is usually used to re-engage the users without having to know their details.

You can set up Web Push by using Google Cloud Messaging service or by using VAPID as shown below:

Now you can send Push Notifications to your device! Here’s how you can configure your push notification:

Client Side

At the client side of your PWA,

1. The user subscribes to the push service.
2. The PWA sends the subscription object to the server.

Push Notification Listener

Here’s an Even Listener that will “listen” to when you receive a Push Notification:

Offline Capabilities

Internet connections can often become flaky or even non-existent when you are on the go. This is why PWA comes with offline capability, which allows it to work even when there is no internet connectivity at all!

In a PWA, the service worker acts as a network proxy. So when a user opens a new screen of the PWA, the request for that page first goes to the service worker. The Service Worker then tries to access that content from the cache.

If the content is available from the service worker, then we will get the new page, regardless of the network connectivity. Otherwise, the service worker redirects the request to the network.

When Should You Update Your PWA?

It is up to the developer to release updates for the PWA. A developer can release the update whenever he/she wants. PWAs don’t have to bother with the play store restrictions.

The user can decide whether they want to update their app. Since the service worker first sends the requests to the cache, the working of the app is not affected by the new updates that are available. The cache is only updated when the app is closed.

The developer needs to make sure that the new update does not interfere with the user interactivity. So it is advised that the developer should just send a prompt to the user to update the app, and the user can update it whenever he is free.

If you have ever used Whatsapp Web, you might have seen the occasional push notification informing you of a new update.

PWA with ReactJS

One might wonder just how compatible are PWAs with existing architectures using libraries like React. Does a PWA require a wholesale rewrite?

There are many advantages if you use React to build your PWA. One these advantages is better discoverability.

If you develop a Single Page App (SPA), you will have the client-side JavaScript which will execute in the browser and Google would then be able to index it.

React provides the method React.renderToString(), which will render a React element to its initial HTML. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes.

Another advantage of using React for PWA is Async Import.

It often so happens that a user does not use a certain part of the app. But our app has to bundle all the components and their dependencies into the bundle.js file. By doing this, not only does the size of app increase, but the app also takes longer to load.

We can instead use Async Import to define Higher Order Component (HOC) that will load different parts of your app only when the user needs them.

By implementing the above code, your app will load the LineChart file only when the user requests.

To know more, check out this post by Anton Lavrenov

Progressive loading for modern web applications via code splitting_Are your users tired of waiting when your app is loading and they close the tab? Let’s fix it with the progressive…_blog.lavrton.com

PWA Tools

Google has provided us with two useful apps called Lighthouse and Workbox to help us build better PWAs.

Lighthouse

Lighthouse is a tool which is very useful for auditing an app for PWA features and checking whether your app meets a respectable bar for web performance under emulated mobile conditions.

Lighthouse is available as a Chrome extension and a CLI, both of which provides a report that looks something like this:

The top-level audits Lighthouse runs effectively a collection of modern web best practices refined for a mobile world:

• Network connection is secure
• User can be prompted to Add to Homescreen
• Installed web app will launch with custom splash screen
• App can load on offline/flaky connections
• Page load performance is fast
• Design is mobile-friendly
• Site is progressively enhanced
• Address bar matches brand colors

Here’s a getting started guide for Lighthouse.

Lighthouse | Tools for Web Developers | Google Developers_Learn how to set up Lighthouse to audit your web apps._developers.google.com

You can also check out this post by Addy Osmani to know more,

Progressive Web Apps with React.js: Part I — Introduction_Progressive Web Apps take advantage of new technologies to bring the best of mobile sites & native apps to users…_medium.com

Workbox

Workbox is the successor to [sw-precache](https://github.com/GoogleChrome/sw-precache) and [sw-toolbox](https://github.com/GoogleChrome/sw-toolbox). It is a collection of libraries and tools used for generating a service worker, routing, and runtime-caching. Workbox also includes modules for easy integration of background sync and Google analytics into your service worker.

To generate a precache:

Workbox also provides you with various caching strategies such as:

• Cache Only
• Cache first, falling back to network
• Cache with network update
• Network Only
• Network first, falling back to cache

Check out this CodeLab to learn how to build a PWA using Workbox:

Build a PWA using Workboxcodelabs.developers.google.com

PWA is the next step in web development. So try it out and be ready for the Future!

I am Rajat S, a Technical Content Writer at GeekyAnts. An aspiring coder who has a long way to go. A Die-Hard DC Comics Fan who loves Marvel Movies. 😛 Follow me on Twitter to know more about all the amazing things that are happening at GeekyAnts.

Thanks to Neeraj Singh, who is a Senior Software Engineer at GeekyAnts. Neeraj was at ReactFoo Pune to talk about Progressive Web Apps.

And thank you for reading! Please do 👏 if you liked it.