Progressive Web Apps (PWAs): core features, architecture, advantages and disadvantages at a glance

Most of us are connected to the Internet around the clock. And a large part of this Internet use takes place via apps. A study in the USA has found that.

So not too long ago, companies were faced with the question of what approach to app development to take. Initially they had three options: native, hybrid or cross-platform development. Today, Progressive Web Apps has added a fourth option – and it deserves closer examination, as many see these PWAs as the app model of the future. By 2020, Gartner experts predict that around half of all mobile apps will be replaced by progressive web apps.

This three-part blog series is designed to explain why developers and companies are focusing on progressive web apps.

What’s behind Progressive Web Apps?

Ultimately, progressive web apps are the answer to the recurring question of whether mobile apps or responsive websites will prevail in the long term, i.e. websites that are adapted for mobile use. PWAs blur this previously existing strict separation. They use browser technologies to combine native app functions with the accessibility and web experience of the Internet. Leading browsers are already PWA-compatible, including Google and Mozilla. In brief: PWAs are web apps with the flavor of native apps. After installation, users click on a small icon in the home screen and are then taken directly to the website. PWAs use web stacks (JavaScript, HTML, CSS) and combine rich functionality with a smooth user experience as known from native apps. Google first presented this idea in 2015 and since then progressive web applications have become a much discussed topic.

The popularity of PWAs correlates with another trend: the phenomenon of app fatigue. Users are often overwhelmed by the number of possible apps and limit the number of apps on their devices – also in order not to exhaust the storage space. So a company developing a native app may be surprised to discover that the download numbers are not as large as originally hoped for. In contrast, progressive web apps combine features that users already know from native apps – but without the data-intensive download. And that’s what makes them ideal for casual users.

Take a shopping app, for example: most large companies that sell online also have an app. But many customers only shop there occasionally and don’t really see any sense in an app, perhaps they see it as unnecessary data junk on their mobile phone. And exactly

This is where companies can start: With a traditional app for frequent users and a PWA for everyone else. PWAs consume very little storage space, users only need to visit a website and create an icon. An approval process, such as downloading from an App Store, is no longer necessary, nor is control by Apple or Google.

Customers want added value and that’s what Progressive Web Apps have to offer: meaningful functions, real-time content and high quality. Questions such as offline availability should also be taken into account, especially when one considers that in Germany, for example, the nationwide expansion of mobile high-speed Internet still leaves something to be desired.

So what conditions can and should PWAs meet?

• Responsiveness and Browser Compatibility: Content must be accessible to everyone, no matter which browser they use to access the content or how good the connection is. PWAs work with any browser and on any device, regardless of size or specification. Tablet and mobile users have the same user experience. It also doesn’t matter whether the user has an iPhone or an Android phone.Independence from an Internet connection: Advanced applications work offline or in a network with a poor Internet connection.
• An app-like interface: Progressive web applications have a similar navigation and interaction as users know – and now expect – from native apps.
  Push notifications: As part of a targeted strategy, push notifications can keep customers’ attention and interest alive. They motivate users to open the app and use it more often.
  Autonomous update: Updates should be possible completely automatically, so that the app is always up to date without the user having to constantly check it.
• Security: The apps work over HTTPS, so that only authorized users can access them. And that is an important factor.
  Easy to find and easy to install: Search engines classify PWAs as apps, but they cannot be found through the normal app stores. However, they can be shared via URL for easy retrieval. The installation is simple and only involves visiting a website and adding the icon to the home screen.

A brief summary of the previous aspects: Progressive web applications have taken over the functionality of native and web applications. They run fast – no matter which operating system – and provide a wide range of functionality. Thanks to easy installation, easy to find, automatic updates and the ability to work with them even with a slow Internet connection or offline, PWAs can significantly enhance the user experience.

Four technical components are crucial for Progressive Web Apps:

1. Web App Manifest

The Web App Manifest is the first important component for the appearance of a native app interface. The manifest allows a developer to control how an app is presented to the user and how it is launched. It provides a place for the metadata of the Web App. The manifest usually includes a start URL, the full and short name of the app, links to icons and their size, type and location. It can also specify the color scheme of the address bar, for example. To use these settings, the developer only needs to insert a single link to the manifest in all subpage headers.

2. Service Worker

This is another technical element that supports the main features of a Progressive Web Application – namely the ability to work offline, synchronization in the background and the mentioned push messages. It responds to user interactions with the app. Since the service worker is only responsible for a specific event, its life span is quite short.

3. the shell architecture of the application

Building and maintaining PAWs involves separating static and dynamic content. And so the use of a shell architecture is an important element. It contains the core design elements that are necessary for the app to run without an Internet connection. This approach works especially well for JavaScript based apps that consist of a single page and apps with a relatively stable navigation and changing content.

4. Transport Layer Security (TLS)

PWAs effectively use the Transport Layer Security Protocol. TLS is the standard for secure and robust data exchange between two applications. Data integrity requires that the web site be served via HTTPS and an SSL certificate be installed on the server.

Advantages of the Progressive Web Apps:

So what are the advantages of PWAs in summary? An important aspect here is certainly the cost saving, as the development of PWAs is less complex and takes less time. One reason for this is that developers don’t have to build the app for different platforms, since a Progressive Web App runs well on Android, iOS and other devices at the same time.

There is also less friction during installation. Findability, as one of the core elements, increases competitiveness compared to native apps. This advantage is particularly significant because each additional step in downloading an app reduces the number of potential users by a full 20 percent. All users have to do is go to a website, add the app to their home screen and then open the website. A detour via an App Store is not necessary.

Updates are also much easier: users always have the latest version of the app at hand and don’t have to make a special update in the app store. Companies therefore do not have to continue to operate old versions in order to provide access to customers and users with outdated software. Everyone is up to date.

Higher user retention is also one of the advantages of PWAs. About 80 percent of all users like to put apps on their home screen. The ability to add PWAs there directly gives them an advantage over Web Apps. Other important factors for long-term app use include easy and fast access. And that’s where PWAs come in.

Disadvantages of Progressive Web Apps

As with all technologies, there are of course also disadvantages – and in this case these are directly related to the advantages mentioned. Compared to native apps, PWAs have more limited functionality and cause higher battery consumption, because even if they are progressive, they do not have the same functionality: they are still web apps, which means they consume power when they connect to the Internet. They cannot support some features typical for native apps: fingerprint recognition, NFC, Bluetooth, geofencing, inter-app communication and advanced camera control.

As mentioned before, it is easier to install PWAs because there is no need to go through the App Store. But this is also one of the disadvantages: Because PWAs are not available in app stores, customers can also be lost if they only browse for new apps in the app store and cannot find the PWA there.

Examples of successful PWAs

There are already some outstanding examples of success that show what PWAs can achieve. The Washington Post, for example, was looking for a new way to deliver content to users. It was clear that around 55 percent of them access the content via a mobile device. It also had to be taken into account that users tend to leave a website if the page takes longer than 3 seconds to load. So the newspaper wanted to ensure that users had the content available in the blink of an eye. At the same time, it should be possible to read relevant articles offline. Using PWA and Accelerated Mobile Pages (AMP, immediate page load), the Washington Post was able to improve the loading time of the website by 88 percent. The number of readers on mobile devices who accessed the site again within 7 days also improved significantly – by a good 23 percent. However, the Progressive Web App is still in the beta phase, meaning that developers are currently continuing to work on the necessary features.

The social media platform Twitter has also developed a progressive web app, Twitter Lite PWA, in order to increase user loyalty and improve the

to reduce data volume. This is particularly important because around 80 percent of mobile device users access Twitter. Twitter Lite uses less than 3 percent of storage space on devices and consumes up to 70 percent less data volume, but allows users to share tweets as quickly as possible.

In summary, PWAs are interesting for businesses in many ways. They significantly increase user loyalty. They also open up new user groups, even if the company already has a native app. Since users are largely dependent on a wireless network, they prefer websites and apps that consume as little data as possible and can be used offline, at least in part. And that’s exactly what Progressive Web Apps offer.