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.
- What is a progressive web app?
- Technical background of a PWA
- The future of PWAs
- Conclusion: Are progressive web apps the apps of the future?
What is a progressive web app?
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 optimization 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 3: PWA vs. traditional web app
It is already the case that classic web apps can be run on browsers across different mobile operating systems like Android, iOS and Windows Phone – even without installation. The base of the progressive web app is in no way new, but appears more sophisticated than the traditional web app, as its range of functions is adaptable and fits into the framework of the device being used. This means that even users, whose device and/or browser may not be compatible with all the features of the app, can still make use of the app, in a restricted format.
Example: a progressive web app, with which you can upload photos to an online platform, will allow access to a camera. The idea here is that users can take photos and upload them directly within the app. But not all browsers and devices are able to support this function on a technical level. As soon as you launch the application in a browser, it will go about checking whether there is a camera connected and if so, can it be supported by the browser. If it is the case that it can’t be, then the camera feature won’t be accessible, but all other compatible features of the app will be. The camera may not be compatible, but users can, for example, still make use of the upload function of the progressive web app and integrate photos, videos, recordings, etc. already present on the smart phone.
These apps are progressive in the sense that they can run in every browser and can also alter their range of functions to fit the hardware and browser used. The features of the PWA will grow and improve as the device and browser being used improve, too.
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.
Technical background of a PWA
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 minimized, 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 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.
The future of PWAs
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 realize 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.
|Compared to native mobile apps, the programming of PWAS is much less expensive and time-consuming. Additionally, PWAs can be put into practice both as a traditional web presence and as an app independent from platforms.||The PWA format, just like its compatibility with (mobile) browsers and operating systems, is still in development. At the moment, it is still unclear which native device functions will be supported in the future.|
|PWAs are immediately accessible through a browser, i.e. they do not need to be downloaded and subsequently installed. This has the additional advantage that they can be tried out in a completely non-binding manner. WebAPKs also allow them to be installed in a way that they can be integrated deeper into the operating system.||Not all browsers and operating systems completely support all the functions of a PWA. In this sense, a lot still depends on whether iOS devices will facilitate this technology. On top of this, WebAPKs represent an experimental technology with a relatively unknown future.|
|Even now, PWAs can occasionally access a mobile device’s native functions (push notifications, geolocation, camera, microphone, sensory detection of the device’s position and movement).||The use of all of a device’s native functions is not possible. These include contacts, calendar, Bluetooth, and NFC. Even if it were to soon become possible, through the improvement of browser support, to integrate PWAs deeper into an operating system, they will never be able to incorporate native functions in the same way that native apps can.|
|No need to download any updates. As soon as the app is launched it will be updated automatically – as long as it is connected to the internet. But PWAs usually can also be used offline.||As of yet, it is unclear whether PWAs will establish themselves on the market. Though it must be said that the chances of this look pretty good as it is Google, one of the world’s most influential software and internet corporations, who has taken responsibility of the app format. Added to this, the format is also an open web technology with many influential vocal proponents.|
|PWAs require hardly any storage space and less resources than native mobile apps, and still deliver a similarly high standard of performance.||Integration into the app drawer (app tray) of a device unfortunately not possible|
|PWAs can be found via search engines and be linked through the web. They are independent of the closed ecosystem found in some app stores.||Cannot be found in the app store|
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.
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.
Conclusion: Are progressive web apps the apps of the future?
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 program 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.