Pro­gres­sive Web Apps

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

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

The term ‘pro­gres­sive web app’ refers to a new method of app de­vel­op­ment that brings with it many promising op­por­tu­ni­ties. It rep­re­sents a further de­vel­op­ment of the existing format of the web app.  It is Google that can claim primary re­spon­si­bil­i­ty 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­peti­tor Apple’s iOS devices, the apps have up until now mostly run with some lim­i­ta­tions or re­stric­tions. Bear in mind, however, that the tech­nol­o­gy 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­ti­miza­tion of PWAs is very likely.

De­f­i­n­i­tion of a pro­gres­sive 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­ces­si­ble 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­stal­la­tion.

In contrast to the con­ven­tion­al web app, pro­gres­sive web apps can also be run offline. All that is required is to connect the home screen of an internet-com­pat­i­ble device with the cor­re­spond­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­pli­ca­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­spon­sive design, it can also fit to every display size.

De­f­i­n­i­tion of a pro­gres­sive web app – Part 2: PWA vs. Native App

A good way of de­scrib­ing a PWA is as a re­spon­sive web ap­pli­ca­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­fi­ca­tions, and use these within the software. Ad­di­tion­al­ly, the app will examine both the browser and the device itself for com­pat­i­bil­i­ty. 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­gres­sive 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­spon­si­ble 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­knowl­edged that some of the above mentioned functions are also available on classic web apps as well as on re­spon­sive mobile websites, although with some lim­i­ta­tions. So, what is actually new about pro­gres­sive web apps compared to classic web apps?

De­f­i­n­i­tion of a pro­gres­sive 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­nif­i­cant plus point of hybrid apps is their in­te­gra­tion into operating systems. They benefit from the fact that more native device functions are in­cor­po­rat­ed during the in­stal­la­tion process compared to (pro­gres­sive) web apps – though this is still less than with native apps. But there are also some dis­ad­van­tages 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­vid­ual operating system goes a bit faster than with native apps, this then means more pro­gram­ming work and effort than with pro­gres­sive web apps. When it comes to de­vel­op­ing a PWA, there are no mod­i­fi­ca­tions that have to be made for Android and iOS. Instead, the focus is on the com­pat­i­bil­i­ty of the hardware and the browser.

PWAs are based ex­clu­sive­ly on open web standards and are primarily written in HTML, CSS and JavaScript, just like con­ven­tion­al web apps. Pro­gres­sive web apps are extremely flexible and change functions to fit the re­spec­tive frame­works and lim­i­ta­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­nolo­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 JavaScript in the back­ground of the browser (in the form of one of the website feed threads). When the ap­pli­ca­tion is launched for the first time, the PWA server will load the service worker and attempt to install it. Once the in­stal­la­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­nif­i­cant 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­at­ed in that the structure of the app is cached, which means that only the newest files need to be down­loaded.

Sep­a­ra­tion from the ap­pli­ca­tion shell and content

With regards to im­ple­ment­ing the pro­gres­sive web app, along with the service workers the ‘ap­pli­ca­tion shell ar­chi­tec­ture’ also plays a sig­nif­i­cant role. ‘Ap­pli­ca­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­pli­ca­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­i­cal­ly 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 per­for­mance is increased. Ad­di­tion­al­ly, 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­gres­sive web app (this is exactly the same for the App Shell). This then makes it possible to access the pre­vi­ous­ly down­loaded PWA content in an offline capacity.

WebAPKs

WebAPKs refer to a server over which you can convert a pro­gres­sive web app that has been launched in a browser into the file format APK (Andorid Package). This allows for the PWA to be in­te­grat­ed into the operating system more ef­fec­tive­ly – or at least this is the case on Android devices.

A PWA packaged in APK format can be in­te­grat­ed 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­pli­ca­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­ve­nient. In their current form, the in­stal­la­tion of APKs is not that main­stream. But the future dis­sem­i­na­tion of this function across all major browsers is quite possible. Despite the lack of an in­stal­la­tion function, the per­for­mance ca­pa­bil­i­ty of PWAs still remains con­vinc­ing.

Generally, any progress in browser tech­nol­o­gy and the cor­re­spond­ing service workers has been par­tic­u­lar­ly crucial, as it allows for the de­vel­op­ment of a new style of web app. Even now, the PWA tech­nolo­gies described above have allowed for the emergence of some very different and im­pres­sive apps – however these can only realize their maximum potential on browsers that support a service worker. There are many examples of pro­gres­sive web apps to be found in the Google case studies and also on the website pwa.rocks. At the moment, pro­gres­sive 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­ces­si­ble for devices, system sources, etc. However, the majority of apps do not require a deep in­te­gra­tion of software and hardware; something which makes PWA formats very in­ter­est­ing for most ap­pli­ca­tions. Many of the ad­van­tages as­so­ci­at­ed with pro­gres­sive 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­i­na­tion of PWAs.

PWA’s strengths and weak­ness­es – an overview

This overview provides another op­por­tu­ni­ty to see the pros and cons of pro­gres­sive web apps compared to other app formats. This table includes aspects ranging from pro­gram­ming to the ap­pli­ca­tion of PWAs.

The features outlined above give a good idea of the per­for­mance capacity of pro­gres­sive 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­si­bil­i­ty of there being com­pre­hen­sive and extensive support for the PWA format in the future, there have been some positive signs. Microsoft is currently working on the in­te­gra­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­al­ly, up until now there has been no chance of in­te­grat­ing a PWA into the App Drawer of iOS devices.

Can PWAs replace native apps?

His­tor­i­cal­ly, 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 so­phis­ti­cat­ed technical basis and the multi-faceted support for the format, pro­gres­sive 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­ces­si­ble. This would be the fastest way to turn pro­gres­sive web apps into a serious com­peti­tor 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 si­mul­ta­ne­ous­ly ob­struct­ing PWAs full in­te­gra­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­gres­sive web apps instead of iOS and macOS native apps, then this would mean that Apple de­vel­op­ers 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­b­u­tion.

But it must be said that even without the full support of Apple, the market for pro­gres­sive 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­i­bil­i­ty with PWAs as well as easier PWA in­te­gra­tion for Android. Alongside Google, the likes of Mozilla, Opera, and others are also pro­po­nents of the PWA format. These browsers already offer some com­pat­i­bil­i­ty with PWAs, and this will un­doubt­ed­ly become more of a focus to them in the future. Advocates of pro­gres­sive web apps are mostly key players in the internet and software industry, who tend to profit from open computer and in­for­ma­tion tech­nol­o­gy.

The term ‘pro­gres­sive web app’ is not just a trendy word or marketing term; PWAs are allowing app de­vel­op­ers to enter a whole new tech­no­log­i­cal landscape. Further de­vel­op­ment of the ‘normal’ web app brings with it a potential that is com­plete­ly rev­o­lu­tion­ary. These apps are pro­gres­sive because they adapt and adjust to the ca­pa­bil­i­ties of the app’s en­vi­ron­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­pli­ca­tion. But open it on a smart phone or tablet and you will see a web ap­pli­ca­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­pli­ca­tion to use the native functions of the device (like the camera, mi­cro­phone, push no­ti­fi­ca­tions, and GPS).

The ad­van­tages of pro­gres­sive web apps are clear and very promising for the future. PWAs do not need to be down­loaded or installed, they update them­selves au­to­mat­i­cal­ly each time they are launched, use a device’s storage space sparingly, and do not nec­es­sar­i­ly need an internet con­nec­tion. Their flex­i­bil­i­ty 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­i­tive­ly minor cost of de­vel­op­ment is a big plus point from a de­vel­op­ers point of view – all that is required is to program an ap­pli­ca­tion that functions both as a website and an app across all platforms. The makeup of a PWA is highly ben­e­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­gres­sive web apps will only provide serious com­pe­ti­tion to native apps when they offer a similar enough pos­si­bil­i­ty of using a device’s native functions (even if they will never com­plete­ly 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­i­ble PWA formats can be quickly in­te­grat­ed 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­gres­sive web apps will actually be able to compete with native apps. The chances of this are rel­a­tive­ly 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­i­bil­i­ty 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­vel­op­ers and users, then surely that will cause Apple to re­luc­tant­ly embrace the pro­gres­sive app. At the end of the day, the reality is that no global player like Apple can afford to com­plete­ly ignore a suc­cess­ful and trend­set­ting tech­nol­o­gy.