Progressive Web Apps

The progressive web app (PWA) is the newest phenomenon in the app world. PWAs link properties from websites with many features of native mobile apps. This allows for the application to be detached from its operating system, functioning as a website and app at the same time.

But can progressive web apps pose serious competition to native apps? And what makes these apps ‘progressive’, i.e. what differentiates them from classic web apps? In this article, we provide an overview of the operating principles of progressive web apps and outline the differences between them and other app formats. On top of this, we also discuss the advantages of progressive web apps, and, of course, their disadvantages.

The term ‘progressive web app’ refers to a new method of app development that brings with it many promising opportunities. It represents a further development of the existing format of the web app.  It is Google that can claim primary responsibility for this new app format. For that reason, it is no real surprise that up until now PWAs have been designed, above all, for use with Android operating systems. While on competitor Apple’s iOS devices, the apps have up until now mostly run with some limitations or restrictions. Bear in mind, however, that the technology is still in its early phases and therefore has not yet lived up to its potential. Therefore, it is fairly conceivable that Google will continue to invest in the further development of the software, meaning that improved optimisation of PWAs is very likely.

Definition of a progressive web app – Part 1: website and app rolled into one

Given that PWAs are still in the middle of the development process, it is currently only possible to partly define them as a concept. But it is safe to assume that the basic framework of the software can be taken for granted. PWAs are accessible online via a URL and are then launched in the browser. From there, they can then be run across different operating systems. They are available without having to go through an app store or similar, and therefore require no installation.

In contrast to the conventional web app, progressive web apps can also be run offline. All that is required is to connect the home screen of an internet-compatible device with the corresponding URL. This then allows you to call up the app – even if you have a very weak internet connection or none at all (one precondition is that your browser must have an offline cache). The application then appears not as a website, but instead gives much more the impression of being a native app. Thanks to its responsive design, it can also fit to every display size.

Definition of a progressive web app – Part 2: PWA vs. Native App

A good way of describing a PWA is as a responsive web application, which has the appearance of a native app. This allows the app to access native functions of the device, such as the camera, microphone, GPS, push notifications, and use these within the software. Additionally, the app will examine both the browser and the device itself for compatibility. Even the look and feel of a PWA on a smart phone or tablet is very similar to that of a native mobile app, e.g. fluid operating style, reaction times, swiping movements, etc.

Opening a progressive web app online has the distinct advantage that you will always be directed to the newest version of the software, as opposed to a native app, where the user is responsible for keeping the app up to date. With a PWA, as soon as it there is a connection to the internet, it will check for any possible updates.

Another advantage that a PWA has over native apps is the amount of work involved in the development; a PWA requires much less work. This is due to it being both a website and an app, operating across various systems at the same time.  What this also means is that the costs involved are much lower, and in many cases, it is hard to differentiate between the two types of app when it comes to things like playback and operation. On top of this, PWAs require hardly any storage space (although this is dependent on the size of the device’s offline cache).

But it must be acknowledged that some of the above mentioned functions are also available on classic web apps as well as on responsive mobile websites, although with some limitations. So, what is actually new about progressive web apps compared to classic web apps?

Definition of a progressive web app – Part 4: PWA vs Hybrid app

Along with the web app, there is also the longer existing hybrid app, another format which shares similar features to that of the native app, and also tackles some of its deficiencies. Like the PWA, you can develop a hybrid app for various operating systems, without having to expend too much effort. There is, however, one major difference with hybrid apps; they are installed onto Android and iOS devices and then imitate the operating mode of native apps. This is something which has both its upsides and downsides. Along with the less expensive and arduous development process, another significant plus point of hybrid apps is their integration into operating systems. They benefit from the fact that more native device functions are incorporated during the installation process compared to (progressive) web apps – though this is still less than with native apps. But there are also some disadvantages to installing the app. Hybrid apps cannot be as easily tested as the web app format. On top of this, the apps are also platform-dependent – even if the development of an individual operating system goes a bit faster than with native apps, this then means more programming work and effort than with progressive web apps. When it comes to developing a PWA, there are no modifications that have to be made for Android and iOS. Instead, the focus is on the compatibility of the hardware and the browser.

PWAs are based exclusively on open web standards and are primarily written in HTML, CSS and JavaScript, just like conventional web apps. Progressive web apps are extremely flexible and change functions to fit the respective frameworks and limitations of a device. Exactly what a PWA is able to do is dependent on the browser and device (and also to some extent on the operating system). But which technologies are actually in use?

Service Worker

A new feature of PWAs is the use of Service Worker, a further evolution of Web Worker. A Service Worker is carried out in JavaScript in the background of the browser (in the form of one of the website feed threads). When the application is launched for the first time, the PWA server will load the service worker and attempt to install it. Once the installation is successful, the service worker will be ready for use each time the app is launched and will remain up to date regarding any web requests on the relevant domain. But bear in mind that this only works when HTTPS, is used. Otherwise there is the danger of significant security risks. The Service Worker and the accompanying cache are then saved in the browser used – if it supports this function (this is currently the case with Google Chrome, Mozilla Firefox, and Opera). This is notable because a service worker enables the use of a PWA even without an internet connection, as the content is loaded out of the cache. This process is greatly accelerated in that the structure of the app is cached, which means that only the newest files need to be downloaded.

Separation from the application shell and content

With regards to implementing the progressive web app, along with the service workers the ‘application shell architecture’ also plays a significant role. ‘Application shell architecture’ is also used in native apps. This allows the app software to differentiate between the application shell, i.e. the established structure of the app (‘app shell’ for short), and the actual content. The PWA user interface is then based on the app shell, which first has to be loaded and outlined. The depicted content is then dynamically contained and loaded from the internet.

Upon the PWA being launched for the first time, the app shell will be saved in the cache of the service worker. Filing in the service worker cache has the advantage that the loading time of the app shell requires will be minimised, which in turn means that the PWA’s performance is increased. Additionally, the content of the PWA can be secured in the cache via IndexedDB. For this to happen, it must be downloaded beforehand onto the progressive web app (this is exactly the same for the App Shell). This then makes it possible to access the previously downloaded PWA content in an offline capacity.

WebAPKs

WebAPKs refer to a server over which you can convert a progressive web app that has been launched in a browser into the file format APK (Andorid Package). This allows for the PWA to be integrated into the operating system more effectively – or at least this is the case on Android devices.

A PWA packaged in APK format can be integrated into the app drawer (sometimes also known as the app tray, i.e. a collection of all the apps and widgets installed on a device) and means that it can be installed on a device similarly to a native Android app. This also then allows you to benefit from more of the native functions, access rights to other applications, as well as the device’s general resources. An example of this is the way in which after a PWA has been installed, Android will launch it as its own app and no longer as a tab in the browser.

Up until now very few beta versions of the android browser support the WebAPK function, meaning that converting into the APK format is still laborious and inconvenient. In their current form, the installation of APKs is not that mainstream. But the future dissemination of this function across all major browsers is quite possible. Despite the lack of an installation function, the performance capability of PWAs still remains convincing.

Generally, any progress in browser technology and the corresponding service workers has been particularly crucial, as it allows for the development of a new style of web app. Even now, the PWA technologies described above have allowed for the emergence of some very different and impressive apps – however these can only realise their maximum potential on browsers that support a service worker. There are many examples of progressive web apps to be found in the Google case studies and also on the website pwa.rocks. At the moment, progressive web apps are not in the position to replace native apps. And this will not be any different in the future either: Apps that have been developed to be native to an operating system will always have the best chance of being accessible for devices, system sources, etc. However, the majority of apps do not require a deep integration of software and hardware; something which makes PWA formats very interesting for most applications. Many of the advantages associated with progressive web apps are obvious, and these give both app providers as well as users great hope for the future of the PWA format. The bottom line is: there are only a few, but important, factors standing in the way of the mass production and dissemination of PWAs.

PWA’s strengths and weaknesses – an overview

This overview provides another opportunity to see the pros and cons of progressive web apps compared to other app formats. This table includes aspects ranging from programming to the application of PWAs.

The features outlined above give a good idea of the performance capacity of progressive web apps – or at least in relation to the latest versions of the apps for the browsers Google Chrome, Mozilla Firefox, and Opera. In terms of the possibility of there being comprehensive and extensive support for the PWA format in the future, there have been some positive signs. Microsoft is currently working on the integration of service workers in the edge browser. It is only Apple that is keeping their hands very close to the chest with regards to supporting the PWA format – at the moment Apple’s Safari browser only supports PWAs to a limited degree. For example, PWAs in Safari cannot be used in an offline capacity. Additionally, up until now there has been no chance of integrating a PWA into the App Drawer of iOS devices.

Can PWAs replace native apps?

Historically, new app formats have had it quite difficult; both the conventional web apps as well as hybrid apps have been unable to reach the levels of circulation on mobile devices that native apps have achieved. Given their sophisticated technical basis and the multi-faceted support for the format, progressive web apps could be the first to pull this off. At the moment, the big question is whether Apple will make the PWA format more accessible. This would be the fastest way to turn progressive web apps into a serious competitor for native apps.

From Apple’s point of view, there is a lot of sense in concentrating further on the native app format and simultaneously obstructing PWAs full integration into their operating system. After all, the App Store is a huge source of income for Apple and it also binds a lot of users to their services. If it were to happen that Apple supported PWAs to such an extent that many apps chose to implement progressive web apps instead of iOS and macOS native apps, then this would mean that Apple developers and users alike would no longer be as reliant on the App store. This self-serving connection to their own store is only something that Apple would give up (if at all) if PWAs were to surpass native apps both in terms of use and distribution.

But it must be said that even without the full support of Apple, the market for progressive web apps appears to be both large enough and lucrative enough. For the format to be a success, all major browsers need to offer better support. It is safe to assume that the further development of the Chrome browser will lead to greater compatibility with PWAs as well as easier PWA integration for Android. Alongside Google, the likes of Mozilla, Opera, and others are also proponents of the PWA format. These browsers already offer some compatibility with PWAs, and this will undoubtedly become more of a focus to them in the future. Advocates of progressive web apps are mostly key players in the internet and software industry, who tend to profit from open computer and information technology.

The term ‘progressive web app’ is not just a trendy word or marketing term; PWAs are allowing app developers to enter a whole new technological landscape. Further development of the ‘normal’ web app brings with it a potential that is completely revolutionary. These apps are progressive because they adapt and adjust to the capabilities of the app’s environment: The greater the capacity of the device and accompanying browser, the more a PWA can live up to its potential.

When you open a PWA on a desktop computer or notebook it behaves just like any normal web application. But open it on a smart phone or tablet and you will see a web application that looks like a native app. No matter what kind of mobile device you have or what features it has, it is possible for the application to use the native functions of the device (like the camera, microphone, push notifications, and GPS).

The advantages of progressive web apps are clear and very promising for the future. PWAs do not need to be downloaded or installed, they update themselves automatically each time they are launched, use a device’s storage space sparingly, and do not necessarily need an internet connection. Their flexibility and lack of reliance on a certain platform also makes it possible for the user to test out the PWA online before they delve deeper into it on their device. On top of this, the app’s reaction time is an important factor. Up until now, native apps have offered a superior ‘look and feel’ – but even in this regard, PWAs are now on a par with them.

The competitively minor cost of development is a big plus point from a developers point of view – all that is required is to programme an application that functions both as a website and an app across all platforms. The makeup of a PWA is highly beneficial for both app providers as well as users. At the same time though there is still a shortage of support of all native functions on mobile devices. On a functional level, progressive web apps will only provide serious competition to native apps when they offer a similar enough possibility of using a device’s native functions (even if they will never completely match the potential uses of a native app).

Much more problematic is the lack of willingness on the part of Apple to offer support to the app format. Most browsers (Google, Mozilla, Microsoft, Opera) are doing a great deal to ensure that the most compatible PWA formats can be quickly integrated into their products. Apple, on the other hand, has very little interest in doing this. This is primarily because the company profits hugely from the isolated app system of iOS and macOS platforms and the App Store that provides these.

The future will show whether progressive web apps will actually be able to compete with native apps. The chances of this are relatively high, thanks to the format’s prominent and vocal supporters. But it is questionable whether there will ever be full compatibility between the PWA format and Apple’s browser and operating systems. If it does so happen that in the future the PWA format receives more attention and encouragement from developers and users, then surely that will cause Apple to reluctantly embrace the progressive app. At the end of the day, the reality is that no global player like Apple can afford to completely ignore a successful and trendsetting technology.