Progressive Web Apps (PWAs): architecture, examples, advantages and disadvantages

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.

Progressive Web Apps are among the technologies originally proposed by Google to make the web a better place for everyone. In this case, “better” means that the web is fast and easily accessible to users no matter where they are or how they access it – even if it’s over a very slow Internet connection.

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.

Opportunities of Progressive Web Apps

Progressive Web Apps” describes applications that use the new features supported by modern browsers, including Service Worker and Web App Manifest, regardless of the native operating system of the device in use.

Regardless of the examples presented, Progressive Web Apps describe a user experience that leverages the reach of the Web and has the following characteristics:

• Reliability: Loads instantly and never displays the “No Internet Connection” warning, even under unreliable network conditions.
• Speed: Responds quickly to user interactions with fast animation and no faltering scrolling.
• Appealing: Feels like natural apps on the device and provides an immersive experience.

The question remains: Why do you need such progressive web apps and are there already examples of progressive web apps in production use? Or is this again just the next hype that captures the IT world and is quickly forgotten? Experts answer this question clearly with “no”, because the advantages of PWAs are immense:

• Costs: The costs for building a PWA are much lower than for mobile applications.
• Progressive: This means that they work for every user, no matter which browser they use.
• Responsive: They fit any form of web usage – via desktop computer, mobile phone, tablet… and even via devices that are not yet developed today.
• Independent of an Internet connection: Service workers allow you to work offline or when the network is poor.
• Like an app: PWAs feel like a native app and offer the same kind of interaction and navigation.
• Always up to date: PWAs are always up to date thanks to a service worker update process.
• Secure: Connected via HTTPS they prevent unauthorized access or manipulation.
• Easy to find: Through W3C Manifest and Service Worker registration they are easily recognized as an app and can therefore be found by search engines.
• Arouses recurring interest: Getting users interested is easy, because PWAs have features like push messages
• Installability: It allows users to place those apps on the home screen that they find most useful.

To make this more concrete, some examples of PWAs that are currently in use or under development are appropriate.

Progressive Web Apps: Examples of successful use

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.

Example 1: Twitter Lite as Progressive Web App

Twitter Lite (mobile.twitter.com) was built as a progressive web app and this has helped to improve the user experience when users access the site from a mobile device. In 2017 it became the default mobile site for Twitter globally. The social media company developed Twitter Lite to provide a more reliable experience – with the goal of immediate loading, user retention and reduced data consumption.

Since most users in the world access the network via 2G or 3G, it is important that this access is very fast. Twitter Lite loads in under 5 seconds on a 3G connection. It supports offline support, so you won’t be interrupted just because Twitter temporarily loses the connection. Compared to native mobile apps, the Twitter Lite PWA has just 600 KB, while the Android app uses 25 MB of disk space, the iOS app even 215 MB.

Example 2: House hunting via Progressive Web App

Housing.com is an Indian property search portal that allows users to search for apartments and houses. Geographical location, number of rooms etc. are taken into account. It is one of the leading real estate sites in India. In 2016, the in-house development team decided to create their own Progressive Web App. With a result that is quite impressive: For example, the loading of the site improved by over 30 percent and at the same time the time users spent on the site increased by a good 10 percent.

Considering that most Indian users access the network via 2G or 3G, it becomes clear how important a fast user experience is. To reduce loading times, Housing.com uses Service Worker technology and a streamlined site so that users can quickly find what they are looking for. Users can continue to search for properties and view previous searches – all while they are offline.

Example 3: About as an example for PWAs

Uber also realized in a timely manner that a fast loading site is needed if the company is to be successful in many parts of the world – even where there are only 2G Internet connections. The solution was again a Progressive Web App: m.uber.com

The PWA delivers an app-like experience to those users who access the site via mobile devices from low-cost manufacturers for whom there may not even be a native app. The PWA is also very small. A simple request for a driver consumes just 50KB, which makes it possible to quickly load the web app even in a 2G network. Again, the mobile web app uses service workers and local disk space, so users have a good experience even if their internet connection fluctuates

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.