Table of contents

1. Features

2. Chances

3. Challenges

4. Tools and Development

5. Comparison to native apps

6. Conclusion

There are more and more possibilities to give mobile users access to the website. A new trend are the progressive web apps, which are a hybrid between websites and mobile applications. They can be added to the home screen without a play or app store and then be used very similar to a native app. It should be emphasized that this is not a separate language or framework, but a new approach to application development. The goal is to provide the user an experience comparable to a mobile app.

In this blog post we will focus on the features, opportunities and challenges of progressive web apps, as well as a comparison to native apps.

1. Features

A progressive web app is characterized by four main features, which are explained below.

1. Offline availability

On the one hand, offline availability is guaranteed with the help of service workers. A service worker is a JavaScript-based script that the browser runs in the background. It is independent of user interactions and the website, which allows server requests to be controlled and influenced. In addition, it is possible to store data in a cache that can be accessed without an internet connection. This is essential for the offline availability of a PWA, since content cannot be loaded offline if it is not yet in the cache.

2. Notifications

The prerequisites for the next feature are also created by service workers. This involves sending notifications, so-called push notifications, to the respective end device, even if the app is currently closed. This allows the user to be actively requested to visit the application again.

3. Performance

In the context of PWAs, performance is also seen as a distinguishing feature. The good loading and interaction speed is guaranteed by web workers, among other things. They were introduced with HTML5 and bypass the blocking of requests, which is caused by the single-threaded environment of JavaScript. To avoid blocking rendering and interaction processes, an API is used which allows content to be processed in parallel, so that neither the user interface nor the script for user interaction is disturbed. Additionally, an app shell increases the performance. The app shell is the basic framework of the app and contains minimal HTML, CSS and JavaScript code. It is always cached and is therefore available right at the start. Normally, no content is stored here, as it is reloaded dynamically. Nevertheless, it should be noted that the performance also depends on the performance of the mobile device on which the PWA is opened.

4. Homescreen

As mentioned at the beginning, it is possible to add a PWA to the homescreen. To do this, an app manifest must be created. This is a JavaScript Object Notation (JSON)-Datei that contains additional information for the application. Among other things, the name of the app, the icon for the home screen and the loading view are defined there. The app manifest is a short JSON document, in which, among other things, the name and start address for the app is specified. The advantage of this procedure is that the user does not have to navigate to the website via the URL in the browser every time. Compared to an app, the lengthy process of registering the application in the PlayStore or AppStore can be avoided.

2. Chances

A PWA provides a responsive solution that can be shared via link. In addition, it is easy to find because it is also accessible via a search engine. Furthermore, it is adapted to the possibilities of the respective user through progressive enhancement. This means that a part of the content is always made available. And the more features are supported by the device and browser, the more content is provided with modern (more interactive) features. An example of this is that a five-year-old mobile phone displays a static page with the content and a newer device is offered more interactive features, such as an interactive timeline, when accessing the same PWA. In this way, a web experience optimized for browsers and devices can be created.

Furthermore, restrictions of known app stores can be circumvented, as PWA's do not have to be loaded into stores. On the one hand, this is an opportunity, since developers are left everything open. On the other hand, PWA's offer the possibility to distribute light malware or badly programmed apps.

3. Challenges

In order to implement a PWA some requirements must be met. The website must run over HTTPS (which is already standard). In addition, the content and the design must be responsive. That means they must offer a good user experience independent of the device or browser. Each subpage must also have its own URL so that it can be linked. In order to simplify the development, Google provides a sample checklist in which meaningful adjustments for HTML syntax, performance and user experience are queried.

4. Tools and development

When developing progressive web apps, it is important to make sure that the minimum requirements are met. These are on the one hand a secure connection (HTTPS) to ensure secure data traffic, on the other hand a standard manifest is created in which the behaviour and states of the app, such as language or start page, are defined. In addition, the PWA should be network-independent and should also run smoothly on mobile devices and different browsers. Many of these points can be implemented with the help of a service worker. In order to facilitate the development of progressive web apps, there are enough open source tools that can be used by the programmers.

Since a PWA can have many requirements, it is advantageous to work with a framework such as Angular or React, as these can facilitate development. With the help of Lighthouse, a plug-in tool for Chrome, the app can be tested in terms of performance and functionality. Among other things, it is analyzed whether the PWA works even with a poor or no network connection, whether it can be added to the user's home screen and what the design, usability and loading times of the app are. Finally, for each of these sections, technologies or at least directions are suggested on how to solve the problems and improve the PWA.

5. Comparison to native apps

The difference between native and progressive web apps is that native apps are written to run directly on the device. Progressive web apps run directly in a web browser, so it is not necessary to install the app first. This means that PWAs cannot fully interact with the mobile device, which is an advantage of native apps. In addition, native apps are faster because, as mentioned above, the code is executed directly on the mobile device and was written specifically for the device in use.

A clear advantage of PWAs is that every web developer is able to create a progressive web app, since HTML, CSS and JavaScript are the basic technologies. Thus, no knowledge of native app development is required to enable the user experience of native apps. While creating a PWA is much more resource-efficient and easy, a native app, once installed, provides a more robust and powerful user experience. Generally speaking, it's not that one is better than the other - it's more about the purpose and desired effect.

6. Conclusion

Progressive web apps offer an enormous reach because every device is connected to the internet and can be found through search engines. In the course of this, there is the disadvantage that the range of functions depends on the respective browser compatibility. A further disadvantage is that many possibilities are currently not cross-platform usable. Nevertheless, the possibilities that are otherwise only guaranteed for native apps should be considered for PWA-compatible systems. With a PWA, access to the clipboard and the file system is guaranteed. It can also be used in full screen mode. Login data is also permanently stored and hardware accelerated 2D/3D animations are supported.

Last but not least, it is a fluid UI with 60 fps. However, it lacks some other native functionalities. These include access to contacts, calendar, bookmarks and phone functions such as SMS or phone calls and access to various hardware sensors of the respective devices. These are for example the flashlight or the air pressure sensor. Similarly, PWAs cannot log data or interact with process management.

Progressive Web Apps are especially suitable for small companies that do not have enough resources to implement a native app. But PWAs are also gaining more and more functions and should therefore not be underestimated.