What is the future of service workers

What is a Progressive Web App?

Native apps that are published via the Google and Apple stores behave as one is used to (and how Apple and Google imagine it): there is a button on the home screen, the apps send push notifications, they work without internet access, etc. Mobile web apps - which are accessed via the browser - cannot do any of these things.

Progressive web apps close this gap:

To avoid confusion: PWA is about mobile web apps that run in the browser. Hybrid apps that were written with Apache Cordova or PhoneGap, for example (see also this blog post, run 100% in the native app environment, with all the features we expect from native apps. But if web content is generated from them (web app) , which are then called up in a mobile browser, the app is very limited by the possibilities of the browser.

PWAs enable the same user experience that you are used to from native apps. However, via the mobile browser of smartphones, tablets and desktop computers. They run in a secure environment, which - in contrast to native apps - can be freely accessed by anyone via the Internet without prior download.

Progressive web apps use web technologies to create an app-like user experience

The following is intended to show exactly what advantages progressive web apps offer over "normal" web apps:

1. Progressive web apps work offline

Service workers are the powerful core technology behind Progressive Web Apps. Basically, a service worker is a JavaScript file that works behind the scenes - independent of the actual app. It is controlled by the browser and reacts to events without user interaction (e.g. failure of the internet connection). They enable offline functions, push notifications, updating of content in the background, caching and much more.

The service workers create a very high degree of flexibility in app development. However, this goes hand in hand with a level of complexity that was previously unknown in the development of web apps. The need for pre-defined “recipes” for popular service workers will soon increase rapidly. Mozilla has published a cookbook with demos and code examples for service workers. For example, it explains how to implement a simple offline mode that displays data from the cache when a network error occurs.

Service Workers are currently only available by default for Google Chrome (Android). With Polymer there is already a web components library that service workers also make available for Firefox, IE 11 + / Edge, Safari 7+ and Safari (iOS 7.1).

2. Progressive web apps are faster

The second core element of PWA is that App shell. This means a design concept in which a basic shell for an app user interface is loaded when the mobile web app is loaded for the first time. The content for the app is only loaded later.

The App Shell is not a web API or a framework, but more of a design approach that developers can use to take full advantage of the service workers' caching capabilities.

Ultimately, the buzzword hides a very plausible approach: The app shell concept means that the user interface of the app and the content are clearly separated from each other and cached separately. Ideally, the app shell is cached first so that it can load very quickly if a visitor calls up the web app again at a later point in time. If the shell and the content are loaded separately, this improves the performance and usability of the app many times over.

If, for example, Ionic is used as a framework, the app layout can be loaded immediately when the web app is started (tabs, navigation elements, menus, etc.) and is then cached by the service workers. The content is then loaded and displayed.

3. Progressive web apps can be installed like native apps

Previously, mobile web apps could not be installed like apps and therefore did not have one Icon on the home screen. Of course, it was possible to manually create an icon and place it on the iOS and Android homescreen. But this was rarely used, and many users were not even familiar with this function. In addition, the web app was still not a “real” app with offline functions, etc.

That changes with progressive web apps!

Chrome and Android have integrated a function that enables the installation of web apps on the home screen with a native installation button.

With Progressive Web Apps you can install web apps as you are used to with native apps. In order to inform the browser that a mobile website should be installed like an app, a manifest file (manifest.json) must be stored on the web server and linked.

IOS does not currently support this function. Hopefully Apple will follow suit later this year and enable this user experience for iOS users as well.

Conclusion

Progressive web apps are the future of web apps and make them a full equivalent to native apps: once content has been loaded, it can be accessed offline or with a slow internet connection. An icon for the apps can easily be installed on the home screen. Progressive web apps bring the functionality that you are used to from native apps (e.g. push messages). Thanks to caching, they are extremely fast and are hardly inferior to native apps.

The following table shows the advantages of web apps, native apps and progressive web apps in comparison:

However, it will take a few months before the development of progressive web apps is fully supported not only by Android (Chrome) but also by iOS (Safari).