What is a PWA

Let's start exploring the advantages that PWAs can provide and which are the main differences compared to native apps.

We'll cover the following

PWA definition

PWAs are web applications developed using modern technologies to provide an improved user experience as close as possible to a native app.


For good reasons, Progressive Web Applications (PWAs) have become very popular in recent years, as they improve performance and are accessible even when the users are offline.


The experience without a PWA…


widget

…and with a valid PWA:


widget

At a minimum, we can provide branded offline pages with the company logo and colors. We can also include some static information like phone numbers or email addresses.

However, some companies go a step further by providing an offline game in case the app user loses connectivity…

The user’s attention remains locked on the game until connectivity is restored and the requested content is automatically delivered. This clever approach can allow you to retain a potential customer that would have otherwise abandoned the website.


Browser support

Nowadays, almost all browsers support service workers:

Service worker support on caniuse.com
Service worker support on caniuse.com

Implement a native app or a PWA?

You just saw how PWAs aim to deliver the same experience as native apps. However, there are functionalities available in native apps that PWAs cannot provide, such as interacting with a phone’s contacts list* or sending an SMS without third-party services like Twilio.

*This is only partially the case, as Google is implementing a new API, Contact Picker API, to provide users a way to share contacts from their contact list with ease. However, this API is still in the test phase.

On the other hand, many features unimaginable just a couple of years ago are available nowadays with PWAs.

For example, did you know we can make a device shake with the Vibration API?

We can pulse the vibration hardware once by specifying a single value (the vibration length is in milliseconds):

Press + to interact
window.navigator.vibrate(100);

It is also possible to provide an array of integers. These integers are interpreted alternating between the number of milliseconds the device should vibrate and the number of milliseconds it should pause:

Press + to interact
window.navigator.vibrate([100, 50, 100]);

The method above will make the device vibrate for 100ms, pause for 50ms, then vibrate again for another 100ms.

If no vibration hardware exists, then nothing happens. This is the progressive approach we mentioned in the previous lesson; the device silently ignores unsupported features without crashing or deteriorating performance.

widget

Test the Vibration API

Run the code below and test the Vibration API.

⚠️ Note! You should run the code sample with a device that has hardware vibration, like a mobile device. Otherwise, the example won’t have any effect.
Be sure to activate the vibration before testing the code below!

import React from 'react';
require('./style.css');

import ReactDOM from 'react-dom';
import App from './app.js';

ReactDOM.render(
  <App />, 
  document.getElementById('root')
);

PWAs vs. native apps

The effectiveness of PWAs vs. native apps is compared below. Some of the advantages of PWAs were already discussed in the previous lesson.


Avoid the waiting time for app review
No need to go through the validation process of Apple or Play stores; once the PWA is deployed, it is immediately available to the public. Meanwhile, native apps require validation, slowing down the time to market.


Easy versions management
We deliver only one version when using PWAs. The users automatically receive the latest version without being bothered by update requests.


Developing costs
If we have front-end developers working on a corporate website, they can also create a PWA with a little extra effort. This is not the case for mobile development, where we need additional resources. We typically require at least two mobile teams: one for iOS and one for Android (omitting Windows OS devices).


Shareable links
By definition, every page of a PWA has to be dynamically linkable. This is very important, especially for social media, so we can easily share our app pages without our recipients needing to have the same application installed on their side.


Offline usage
Regarding offline usage, the two alternate solutions are evenly matched. Service workers only allow the caching of GET requests, not POST or PUT requests, as these would change the server state. Many native apps only function with a stable internet connection, although some allow offline usage. In the following lessons, we will explore how it can overcome this weakness and allow caching POST/PUT requests.


Limited access to hardware
Earlier, you saw that modern APIs allow more and more interaction with device hardware. However, several functions are still missing, and browser support is limited with this solution. Therefore, native apps are still the winners in this context.


Availability on stores
Until recently, native apps were still in the lead in-store availability, but thanks to TWA (trusted web activities), it is now possible to make our PWAs available in the Play Store. This allows us to increase the reach base for our app greatly.


When to develop a PWA rather than a native app?


You should opt for a progressive web app when:

  • The app must be available on the market quickly
  • Limited budget is available
  • Several updates are planned after going live
  • Cross-platform compatibility is a requirement  

Otherwise, prefer a native app when:

  • Speed and responsiveness are key factors
  • Use of a specific hardware device’s features is required
  • The app must be integrated with other 3rd party applications