Table of contents
- Tools and Development
- Comparison to native apps
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.
A progressive web app is characterized by four main features, which are explained below.
1. Offline availability
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.
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.
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.
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.