Progressive Web Apps

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.

General information

Progressive web apps are based on Google’s recommended progressive development approach. The idea is that the basic website functions can be used on any device and with any type of Internet connection. Even if mobile devices are not connected to the Internet and do not support JavaScript, CSS or Flash, websites that build on progressive enhancement can satisfy the different information needs of users. Unlike graceful degradation, which optimizes different versions of websites for certain devices, progressive enhancement relies on a website version that works smoothly in the rudimentary functions on any device.

How it works

The main features of progressive web apps according to Google are:

• Reliability: PWAs load the requested content even if the Internet connection is bad or nonexistent.
• Speed: PWAs react directly to user interactions, sometimes integrate animations and avoid sluggish scrolling.
• User experience: The use of PWAs feels like a native app designed for the particular device being used.

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.

Practical relevance

HTML5, CSS3, and JavaScript can be used to develop progressive web apps. Frameworks such as angular or polymer, which implement the web app manifest and thus the appearance as an app can be added. An application shell architecture ensures minimal resources in HTML5, CSS3, and JavaScript. Only the most essential is in the source code, so that the user interface can be created. The content of the web app is loaded dynamically via an API. The correct integration of the API or the framework can be checked with Lighthouse to detect errors, bugs, and regresses.

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.

Relevance to search engine optimization

Progressive Web Apps consist largely of JavaScript. In the last few years, Google has become increasingly better at reading script languages, tracking and referencing their content. However, for the development of PWAs, this means some changes in the source code of the website. On the one hand, it is recommended to use a library or a framework such as Angular, Polymer or React and follow the respective SEO best practices to control crawling (for example, “escaped fragments”) and rendering of JavaScript-heavy sites. If a framework is not used, certain resources should be pre-rendered.

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.

Weblinks

• What are Progressive Web Apps?
• A Beginner’s Guide
• Free course by Google
• Appscope