PWA Part 3: Technology and UX Secrets of Progressive Web Apps

A look into the toolbox of PWAs

As we have already described in the previous part of our series, the aim of progressive web apps is to offer users a user experience that would otherwise only be possible with native apps. Progressive web apps use the latest technologies in modern web browsers and make use of functions such as caching or push notifications.

In order to provide a top user experience (UX), the (web) app developers use the usual modern web technologies such as HTML5, CSS 3 and JavaScript. In addition, service workers and web manifest are used - we would like to explain some basic terms, new possibilities and concepts in this blog post.

User experience and technology

Before we go into the technical aspects, let's take another look at the most important features of a Progressive Web App when it comes to the user experience. To a certain extent, the subjective feeling and personal preferences of the individual user play a role here, but at its core, a PWA stands for the following four characteristics:

• Fast loading

• Well integrated, the user starts the PWA via an icon on the home screen

• Reliable even with poor or no internet connection

• Invites the user to interact ("engagement")

Let us now turn to the technology. There are three elements that must be present - they turn a classic website that is called up in the browser into a Progressive Web App, so to speak:

• HTTPS connection

• Web Manifest

• Service Worker

HTTPS - Security is important!

The HTTPS protocol must be used for data transmission between the server and the browser, in which the PWA runs. Encryption and mutual authentication protect the data from unauthorized access.

Web App Manifest - setting the rules of the game

The web app manifest, or application manifest, is a file on the web server that defines a few basic rules for the respective Progressive Web App. For example, it defines the icon that is used when the user wants to add the PWA to the home screen. The developer also defines here whether the classic browser elements such as the address bar should be hidden. If the PWA runs in full-screen mode, the user has the same visual experience as when using an installed app.

Service Worker - Bridge elements to native features

The service workers are, so to speak, the service providers in the background of a progressive web app. They make the "app-like" user experience possible to a large extent, because they function, among other things, as a cache for the communication with the web server. This ensures that the PWA can be loaded quickly when it is called up.

However, a service worker is also responsible for ensuring that you can continue to use the Progressive Web App even if you have no network connection or only very poor reception.

They are also used to send notifications (pushes). Service workers consist of a JavaScript file and run in the browser, but are separate from the rest of the website or PWA.

PWA loading process

We are all familiar with this process: We tap an icon and the app opens - we take these steps in our interaction with our mobile device dozens of times a day without giving it much thought.

With a Progressive Web App, this works a little differently, especially when it is called up for the very first time. Like a website, the PWA is accessed via a URL or link in the browser, which then sends the request to the web server.

The following graphic shows the process schematically. The Progressive Web App is called up, whereby the request does not go directly to the web server, but first passes through a few important intermediate steps.

The first intermediate station is the service worker, whereby a so-called splash screen can be displayed as a placeholder to bridge the gap, even if this is not exactly optimal from a UX perspective.

The service worker also asks about the cache strategy. This is basically a question of whether it is always mandatory to retrieve all data from the web server (online first) or whether it should be loaded partially or even completely from the local cache (offline first).

The so-called app shell should be loaded quickly in any case. This is the basic User Interface (UI) of a PWA, consisting of HTML, CSS and JavaScript. It ensures that the UI of the PWA is displayed on the user's screen as quickly as possible. If the app shell is cached, the loading process is even faster when the PWA is called up again later. This is also related to the chosen caching strategy, which we have already mentioned above.

The service worker can be configured in such a way that the app shell is loaded from the cache and only the content that is to be displayed is fetched from the web server. On the one hand, this enables the user to start the PWA quickly and, on the other hand, it ensures that he or she is only ever shown content that corresponds to the current state of affairs.

No App Store - Findable and usable via the browser

However, the user experience is not only about interacting with the content of the PWA on a display, it actually starts much earlier: Namely, with the question of how the user gets to the start page of a Progressive Web App in the first place.

Many online activities begin with an entry in a search engine. When it comes to the question of how a Progressive Web App is found in the first place, one should not disregard this fact. The crawler of a search engine indexes a PWA just like a conventional website, making it easy to find and accessible for millions of potential users.

Directing traffic from a search engine to installed apps is much more complicated. If the user has not installed the app, the App Store automatically intervenes as a hurdle. Progressive Web Apps make it easier to attract new users with search engine optimisation because they offer a smoother overall experience without stumbling blocks: A click on a search result takes the user directly to the PWA.

What's next for PWAs?

The technical possibilities - and in parallel the user experience - of Progressive Web Apps are constantly evolving at a fast pace. At the Chrome Dev Summit 2018 developer conference, for example, Google announced further interfaces that will be available in the Chrome browser for PWA. In addition, PWA support is now also enabled by default in the desktop version of Chrome. We always strive to test the latest possibilities of mobile web technologies, to share our findings on this blog and to offer our customers real added value and top services for the digitalisation of business and in mobile marketing.

Do you have input or questions about PWAs or web technologies in general? Write us an email. We also look forward to any visit to our offices in Basel or Bern.