Pro­gress­ive Web Apps

The pro­gress­ive web app (PWA) is the newest phe­nomen­on in the app world. PWAs link prop­er­ties from websites with many features of native mobile apps. This allows for the ap­plic­a­tion to be detached from its operating system, func­tion­ing as a website and app at the same time.

But can pro­gress­ive web apps pose serious com­pet­i­tion to native apps? And what makes these apps ‘pro­gress­ive’, i.e. what dif­fer­en­ti­ates them from classic web apps? In this article, we provide an overview of the operating prin­ciples of pro­gress­ive web apps and outline the dif­fer­ences between them and other app formats. On top of this, we also discuss the ad­vant­ages of pro­gress­ive web apps, and, of course, their dis­ad­vant­ages.

The term ‘pro­gress­ive web app’ refers to a new method of app de­vel­op­ment that brings with it many promising op­por­tun­it­ies. It rep­res­ents a further de­vel­op­ment of the existing format of the web app.  It is Google that can claim primary re­spons­ib­il­ity 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 com­pet­it­or Apple’s iOS devices, the apps have up until now mostly run with some lim­it­a­tions or re­stric­tions. Bear in mind, however, that the tech­no­logy is still in its early phases and therefore has not yet lived up to its potential. Therefore, it is fairly con­ceiv­able that Google will continue to invest in the further de­vel­op­ment of the software, meaning that improved op­tim­isa­tion of PWAs is very likely.

Defin­i­tion of a pro­gress­ive web app – Part 1: website and app rolled into one

Given that PWAs are still in the middle of the de­vel­op­ment 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 ac­cess­ible 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 in­stall­a­tion.

In contrast to the con­ven­tion­al web app, pro­gress­ive web apps can also be run offline. All that is required is to connect the home screen of an internet-com­pat­ible device with the cor­res­pond­ing URL. This then allows you to call up the app – even if you have a very weak internet con­nec­tion or none at all (one pre­con­di­tion is that your browser must have an offline cache). The ap­plic­a­tion then appears not as a website, but instead gives much more the im­pres­sion of being a native app. Thanks to its re­spons­ive design, it can also fit to every display size.

Defin­i­tion of a pro­gress­ive web app – Part 2: PWA vs. Native App

A good way of de­scrib­ing a PWA is as a re­spons­ive web ap­plic­a­tion, which has the ap­pear­ance of a native app. This allows the app to access native functions of the device, such as the camera, mi­cro­phone, GPS, push no­ti­fic­a­tions, and use these within the software. Ad­di­tion­ally, the app will examine both the browser and the device itself for com­pat­ib­il­ity. 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 pro­gress­ive 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 re­spons­ible for keeping the app up to date. With a PWA, as soon as it there is a con­nec­tion 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 de­vel­op­ment; 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 dif­fer­en­ti­ate 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 ac­know­ledged that some of the above mentioned functions are also available on classic web apps as well as on re­spons­ive mobile websites, although with some lim­it­a­tions. So, what is actually new about pro­gress­ive web apps compared to classic web apps?

Defin­i­tion of a pro­gress­ive 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 de­fi­cien­cies. 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 dif­fer­ence 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 de­vel­op­ment process, another sig­ni­fic­ant plus point of hybrid apps is their in­teg­ra­tion into operating systems. They benefit from the fact that more native device functions are in­cor­por­ated during the in­stall­a­tion process compared to (pro­gress­ive) web apps – though this is still less than with native apps. But there are also some dis­ad­vant­ages to in­stalling 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 de­vel­op­ment of an in­di­vidu­al operating system goes a bit faster than with native apps, this then means more pro­gram­ming work and effort than with pro­gress­ive web apps. When it comes to de­vel­op­ing a PWA, there are no modi­fic­a­tions that have to be made for Android and iOS. Instead, the focus is on the com­pat­ib­il­ity of the hardware and the browser.

PWAs are based ex­clus­ively on open web standards and are primarily written in HTML, CSS and JavaS­cript, just like con­ven­tion­al web apps. Pro­gress­ive web apps are extremely flexible and change functions to fit the re­spect­ive frame­works and lim­it­a­tions 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 tech­no­lo­gies 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 JavaS­cript in the back­ground of the browser (in the form of one of the website feed threads). When the ap­plic­a­tion is launched for the first time, the PWA server will load the service worker and attempt to install it. Once the in­stall­a­tion is suc­cess­ful, 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 sig­ni­fic­ant security risks. The Service Worker and the ac­com­pa­ny­ing 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 con­nec­tion, as the content is loaded out of the cache. This process is greatly ac­cel­er­ated in that the structure of the app is cached, which means that only the newest files need to be down­loaded.

Sep­ar­a­tion from the ap­plic­a­tion shell and content

With regards to im­ple­ment­ing the pro­gress­ive web app, along with the service workers the ‘ap­plic­a­tion shell ar­chi­tec­ture’ also plays a sig­ni­fic­ant role. ‘Ap­plic­a­tion shell ar­chi­tec­ture’ is also used in native apps. This allows the app software to dif­fer­en­ti­ate between the ap­plic­a­tion shell, i.e. the es­tab­lished 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 dy­nam­ic­ally 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 per­form­ance is increased. Ad­di­tion­ally, the content of the PWA can be secured in the cache via IndexedDB. For this to happen, it must be down­loaded be­fore­hand onto the pro­gress­ive web app (this is exactly the same for the App Shell). This then makes it possible to access the pre­vi­ously down­loaded PWA content in an offline capacity.

WebAPKs

WebAPKs refer to a server over which you can convert a pro­gress­ive web app that has been launched in a browser into the file format APK (Andorid Package). This allows for the PWA to be in­teg­rated into the operating system more ef­fect­ively – or at least this is the case on Android devices.

A PWA packaged in APK format can be in­teg­rated into the app drawer (sometimes also known as the app tray, i.e. a col­lec­tion 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 ap­plic­a­tions, 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 con­vert­ing into the APK format is still laborious and in­con­veni­ent. In their current form, the in­stall­a­tion of APKs is not that main­stream. But the future dis­sem­in­a­tion of this function across all major browsers is quite possible. Despite the lack of an in­stall­a­tion function, the per­form­ance cap­ab­il­ity of PWAs still remains con­vin­cing.

Generally, any progress in browser tech­no­logy and the cor­res­pond­ing service workers has been par­tic­u­larly crucial, as it allows for the de­vel­op­ment of a new style of web app. Even now, the PWA tech­no­lo­gies described above have allowed for the emergence of some very different and im­press­ive apps – however these can only realise their maximum potential on browsers that support a service worker. There are many examples of pro­gress­ive web apps to be found in the Google case studies and also on the website pwa.rocks. At the moment, pro­gress­ive 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 ac­cess­ible for devices, system sources, etc. However, the majority of apps do not require a deep in­teg­ra­tion of software and hardware; something which makes PWA formats very in­ter­est­ing for most ap­plic­a­tions. Many of the ad­vant­ages as­so­ci­ated with pro­gress­ive 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 pro­duc­tion and dis­sem­in­a­tion of PWAs.

PWA’s strengths and weak­nesses – an overview

This overview provides another op­por­tun­ity to see the pros and cons of pro­gress­ive web apps compared to other app formats. This table includes aspects ranging from pro­gram­ming to the ap­plic­a­tion of PWAs.

The features outlined above give a good idea of the per­form­ance capacity of pro­gress­ive 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 pos­sib­il­ity of there being com­pre­hens­ive and extensive support for the PWA format in the future, there have been some positive signs. Microsoft is currently working on the in­teg­ra­tion of service workers in the edge browser. It is only Apple that is keeping their hands very close to the chest with regards to sup­port­ing 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. Ad­di­tion­ally, up until now there has been no chance of in­teg­rat­ing a PWA into the App Drawer of iOS devices.

Can PWAs replace native apps?

His­tor­ic­ally, new app formats have had it quite difficult; both the con­ven­tion­al web apps as well as hybrid apps have been unable to reach the levels of cir­cu­la­tion on mobile devices that native apps have achieved. Given their soph­ist­ic­ated technical basis and the multi-faceted support for the format, pro­gress­ive 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 ac­cess­ible. This would be the fastest way to turn pro­gress­ive web apps into a serious com­pet­it­or for native apps.

From Apple’s point of view, there is a lot of sense in con­cen­trat­ing further on the native app format and sim­ul­tan­eously ob­struct­ing PWAs full in­teg­ra­tion 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 pro­gress­ive web apps instead of iOS and macOS native apps, then this would mean that Apple de­velopers and users alike would no longer be as reliant on the App store. This self-serving con­nec­tion 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 dis­tri­bu­tion.

But it must be said that even without the full support of Apple, the market for pro­gress­ive 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 de­vel­op­ment of the Chrome browser will lead to greater com­pat­ib­il­ity with PWAs as well as easier PWA in­teg­ra­tion for Android. Alongside Google, the likes of Mozilla, Opera, and others are also pro­ponents of the PWA format. These browsers already offer some com­pat­ib­il­ity with PWAs, and this will un­doubtedly become more of a focus to them in the future. Advocates of pro­gress­ive web apps are mostly key players in the internet and software industry, who tend to profit from open computer and in­form­a­tion tech­no­logy.

The term ‘pro­gress­ive web app’ is not just a trendy word or marketing term; PWAs are allowing app de­velopers to enter a whole new tech­no­lo­gic­al landscape. Further de­vel­op­ment of the ‘normal’ web app brings with it a potential that is com­pletely re­volu­tion­ary. These apps are pro­gress­ive because they adapt and adjust to the cap­ab­il­it­ies of the app’s en­vir­on­ment: The greater the capacity of the device and ac­com­pa­ny­ing 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 ap­plic­a­tion. But open it on a smart phone or tablet and you will see a web ap­plic­a­tion 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 ap­plic­a­tion to use the native functions of the device (like the camera, mi­cro­phone, push no­ti­fic­a­tions, and GPS).

The ad­vant­ages of pro­gress­ive web apps are clear and very promising for the future. PWAs do not need to be down­loaded or installed, they update them­selves auto­mat­ic­ally each time they are launched, use a device’s storage space sparingly, and do not ne­ces­sar­ily need an internet con­nec­tion. Their flex­ib­il­ity 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 com­pet­it­ively minor cost of de­vel­op­ment is a big plus point from a de­velopers point of view – all that is required is to programme an ap­plic­a­tion that functions both as a website and an app across all platforms. The makeup of a PWA is highly be­ne­fi­cial 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 func­tion­al level, pro­gress­ive web apps will only provide serious com­pet­i­tion to native apps when they offer a similar enough pos­sib­il­ity of using a device’s native functions (even if they will never com­pletely match the potential uses of a native app).

Much more prob­lem­at­ic is the lack of will­ing­ness 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 com­pat­ible PWA formats can be quickly in­teg­rated 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 pro­gress­ive web apps will actually be able to compete with native apps. The chances of this are re­l­at­ively high, thanks to the format’s prominent and vocal sup­port­ers. But it is ques­tion­able whether there will ever be full com­pat­ib­il­ity 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 en­cour­age­ment from de­velopers and users, then surely that will cause Apple to re­luct­antly embrace the pro­gress­ive app. At the end of the day, the reality is that no global player like Apple can afford to com­pletely ignore a suc­cess­ful and trend­set­ting tech­no­logy.