Progressive Web Apps (PWA) are websites that have specific properties of native apps and are intended to improve the user experience on mobile devices. A progressive web app can be activated by entering a URL into the browser’s address bar same as with a website. By use of the HTTPS protocol and a so-called service worker, communication between the client and the server (specifically caching) is optimized in such a way that offline functions can be provided. Users can use PWAs similar to websites, but they can also add them to the home screens of their mobile device. Progressive web apps are therefore often viewed as a combination of an app and a responsive website. PWAs combine the advantages of both development approaches by providing app functions which users are familiar with.
The main features of progressive web apps according to Google are:
The most important element to implement progressive web apps and to take advantage of them are service workers. They work in the background of the website and allow the loading of certain content into the cache without a new HTTP communication having to take place. This is achieved by a script that works on the client side as a proxy server. If a user requests certain content, the service worker has already loaded this content into the cache because the developer has defined it beforehand. Methods such as prerendering, preloading, and prefetching are used here.
During the development of a progressive web app, the key resources are identified, referenced, and preloaded using the script. Depending on the user interaction, the app already knows what content is requested and does not need to reload it over the Internet connection. Thus, the dependency on the Internet or mobile Internet is effectively reduced with improved user experience for regular use. The control of caching includes yet another aspect. Loading of content is much faster and users do not have to bear with high loading times. The flow of usage is thus maintained at a high level of quality and with careful use of network resources.
Progressive web apps can also be used without access to an app store. No installation is required. Thanks to the Web App Manifest, they provide special features that are otherwise only available in native apps. Users can, for example, add a PWA to their home screen with one click and use the site as an app on their device, even in full screen mode. With the integration of push messages, progressive web apps can also increase the rate of engagement and offer personalized offers or provide additional information, for example. This is made possible by a JSON file (Web App Manifest), which is connected to the website using script. In this script, the appearance of the website can be defined when users access the website via their home screen. Many settings options are available to personalize the PWA through script instructions personalization.
Although most mobile devices support these technologies, the progressive development approach provides some degree of backward compatibility. After all, PWAs are websites based on the functions of a browser. In practice, however, not all browsers support service workers, which is a disadvantage for iOS, for example. In iOS, the apps do not work in the offline version, only Android offers a full integration of service workers.
On the other hand, it is recommended to provide CSS and JS with the HTML inline in such a way that the basic functions and design elements are usable and available for the client. This increases network utilization, but also ensures that the most important elements of a website are loaded directly. In any case, the implementation of progressive web apps aims to make the basic website features available (progressive enhancement). This can be taken into account before development as “offline first experience,” assuming that the design of the website, its content, and its interaction elements are already accessible on the user device and should be loaded on the client side by means of an API.