Progressive Web Apps: A Short Tutorial

Progressive Web Apps (PWAs) are web applications that have the ability to look and function like a native app - they combine a web app’s reach with a native app’s performance capabilities. PWAs work with a single codebase and function like a native application although they are built on the web.

PWA Stats , a community-driven list of statistics related to PWAs, underlines the enormous positive business effects: more user engagement, higher conversion rates, increased revenues, and many more.

Why do Progressive Web Apps have such a positive effect? Because they are reliable - load instantly, fast - respond quickly to user interactions regardless of network connecting, engaging - feel like a native app without needing to be installed

Of course, PWAs also have some limitations and disadvantages, but more on that below. Now that we covered the idea and characteristics of PWAs, let’s have a look at how you can build one. Our tip upfront: use?Workbox , a set of libraries and tools that ease up the process of setting up a Progressive Web App.

1. Create Your Web Application

First, you need to create your web application. At Motius, we often use?React ?as well as other frameworks like?Vue ?or?Angular , with their high performance, simple UI, third-party plugin support, a wide variety of libraries, and many other advantages. You can create a PWA with a framework of your choice, what matters most for now is that you can use your code across different platforms.

Once you have created your web application, it is time to proceed with the PWA-specific steps.

2. Register Service Worker

The core of?Progressive Web App functionality is a “service worker”. A?service worker ?provides a PWA with the native app’s capabilities that normal web apps do not have, e.g. offline functionality, push notifications or background sync.

The magic of the service worker lies in its ability to handle network requests. This lets the developer take control of the whole user experience. On a more technical level, a service worker is a middleware that controls how requests are executed, forwarding them to the network or taking data from the cache. That allows the app to still work when the user is offline.

Due to security reasons, you need to register your service worker on your page before you can install it. This might sound complicated but it is actually quite easy to?register a service worker ?– you only need a few lines of code.

3. Add Caching Strategy

A?caching strategy ?defines the service worker’s behavior once data is requested. As service workers were introduced, different caching strategies started to emerge. We at Motius mostly use the following three:

Network first?is ideal if data on the server can be constantly updated. The service worker fetches the information from the network and stores it in the cache. In case the network does not respond, the latest stored information in the cache will be used.

Stale-while-revalidate?is ideal if an application does not rely on server updates. This way, information from the cache will be used first in order to deliver a fast response and use as little data as possible. If the response is not cached, the service worker will use the network information which is then also stored in the cache.

Cache first?is ideal for non-critical, non-dynamic data like fonts. This way, the service worker will request a network response only if the needed information is not stored in the cache.

Workbox , is a library that will allow you to easily specify caching strategies for different requests. The simple configuration would look like this:

registerRoute(
    ({url}) => url.pathname.startsWith('/api/'),
    new NetworkFirst({
        cacheName: 'api-cache',
        plugins: [
            new CacheableResponsePlugin({
                statuses: [0, 200],
            }),
        ],
    })
);        

Choose a caching strategy according to your needs. If you want to dive deeper into other caching strategies, have a look at?Google’s Offline Cookbook.

4. Add a Web App Manifest

Next, you need to add a web app manifest to your application to make it installable. In other words, this will enable you to distribute your PWA to a broad range of users.

The web app manifest tells the browser how to behave once users install your PWA. Usually it is a JSON file that includes the application’s name, icons for homepage and launch screen, display mode and theme colors.

{
"short_name": "App",
"name": "Application",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "logo512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#2E4267",
"background_color": "#232F46"
}         

Once you have covered these steps, the basic PWA setup is almost finished. What is left is a bit of effort to make your PWA look and feel more like a native app instead of a normal website.

5. Make Additional UI Adaptations

To do so, you need to make some additional UI adaptations. The basic ones include commands that make the PWA cover the whole screen, disable zoom and hide the status bar.

But of course, there is a whole range of actions you can take, like proactive background downloading, hardware media key controls, or multitasking and app shortcuts. If you want an extensive list and instructions on all these options, you can find it?here .

Beware that Progressive Web Apps can work differently depending on the browser or operating system that is used and not every functionality is supported by every system. This means that you as a developer need to make sure that your PWA works as you want it to, depending on where you want to distribute and use it.

More specifically, many PWA features that are automatically available on Android after you have set up the manifest won’t be automatically available on iOS because Safari does not support them yet. Therefore, you need to make more adaptations for iOS in order to make your web app feel more like a native app. Let’s have a quick look at some common adaptations for iOS.

To provide general PWA capabilities, add these tags in the web app header:

<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-title" content="App"/>        

To set up the app icon, you also need a few lines of code:

<!-- ios icons -->
??? <link rel="apple-touch-icon" sizes="152x152"
????????? href="%PUBLIC_URL%/logo152.png">
??? <link rel="apple-touch-icon" sizes="180x180"
????????? href="%PUBLIC_URL%/logo180.png">
??? <link rel="apple-touch-icon" sizes="167x167"
????????? href="%PUBLIC_URL%/logo167.png">        

Splash screens need to be specified for the screen size of every device. The?PWA asset generator ?makes this task much easier. It uses one image with an icon, creates assets and generates html links to insert in the header.

On iOS you would also probably want to make the status bar the same color as the background:

<meta name="apple-mobile-web-app-status-bar-style"
????? content="black-translucent" />        

To inform users that they can install the app on iOS, you need to create a separate pop-up and show it only on iOS when the app is opened in the browser (on Android it will be shown automatically). First, you need to check if the PWA is opened on the iOS device:

const isIos = () => { const userAgent = window.navigator.userAgent.toLowerCase(); return /iphone|ipad|ipod/.test( userAgent ); }        

Then, you also need to make sure that the pop-up isn’t shown if the app is already opened from the home screen:

@media all and (display-mode: standalone) { .pop-up__container { display: none; } }        

If you follow these few steps, your PWA will work totally fine on iOS as well as on Android.

Advantages And Disadvantages of Progressive Web Apps

To wrap things up, let’s quickly list some advantages and disadvantages of PWAs:

Advantages?of Progressive Web Apps are the cross-platform availability, meaningless development costs, installing right from the browser which avoids possible problems with app stores, cutting mobile data usage, no traditional app updates needed and a great user experience.

Disadvantages?of Progressive Web Apps are the?limited access to device features like camera and mobile payment (especially on iOS), some functionalities like push notifications only work on Android-based browsers, not on e.g. Safari, the fact that users are still relatively unaware that PWAs exist and PWAs might not work on older devices.

All in all, we can confidently say that Progressive Web Apps are a crucial part of the future of web design. By combining the best of native apps and web apps, they enable a range of new use cases that have the potential to unlock business potential. Sounds like you need a Progressive Web App? Just talk to us .

Author: Christopher Grobe