Article
June 12, 2017 · 1 min read timeIn 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.
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:
And when the application is started from this icon, browser will render the application in standalone mode:
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
Written by
Sauli Ketola is a Senior 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.
