Progressive Web Apps — Part III: Standalone web application

12.6.2017 klo 13.54

In the previous post I showed how the files of a web application can be cached locally to shorten the start up time and enable offline use. In this post I will continue with the Progressive Web App examples and show how an application can have a home screen icon and it can run in a standalone mode, making it look like and function like a native mobile application.

PWA-3-blogikuva.jpg

Web App Manifest

To have a home screen icon and the application running in standalone mode, no programming is required. You only need to create a static Web App Manifest file, like this from mobile.twitter.com:

The icon is achieved by providing a name and the icon file. To make the application run in standalone mode, add “display”: “standalone”. When in standalone mode, the browser components for navigating etc. are excluded and the content of the application will take the whole screen.

The manifest is imported in the application with a link-element inside the head:

Now, if the application is accessed with a browser and platform that supports this, the browser will suggest adding the icon on the home screen:


Twitter.png


And when the application is started from this icon, browser will render the application in standalone mode:


Twitter-2.png

You can try this (currently with Chrome on Android) at https://mobile.twitter.com

When combined with the caching from the previous post, you basically have an installable mobile application, similar to what you can create with frameworks like Cordova and PhoneGap. Except that this application will also work on desktop and mobile browsers and you don’t need to deploy and update it through an app store. Read the details of the manifest file and the supported platforms from the Mozilla Developer Network:


Related articles

Progressive Web Apps – Part I: the new way of making mobile apps

Progressive Web Apps — Part II: Add offline support for a web application

This article was originally posted on Medium.


Sauli.png

THE AUTHOR

Sauli Ketola is a Software Architect at Nitor. Sauli is specialized in agile software development methodologies and test automation. He has wide-ranging experience in systems design and application development in the financial services sector. Occasionally, you might catch this enthusiastic hockey spectator on a run, dreaming of completing a full marathon.