A simple progressive web application that demonstrates the use of Service Workers, Cache API and offline functionality; the use of a Manifest for Web and Add to Homescreen.
Progressive Web Apps
Progressive Web Applications take advantage of the latest technologies to combine the best of web and mobile apps; think of it as a website built using web technologies but which acts and feels like an app. Recent advancements in the browser and the availability of service workers, the Cache and the Push APIs, have given web developers the possibility to install web apps to the home screen, receive push notifications and even work offline.
A simple JSON file that must follow the specification available on W3C, it is possible to run the web app in full-screen as a standalone application, assign an icon which will be displayed once the application is installed onto the device or assign a theme and background colour to your app. In addition, Chrome on Android also proactively suggests to the user to install the web app using Web App install banners.
For the scope of this demo, we will be retrieving a static JSON file instead of a real API. This is only to keep things simple and in the real world you would query an API or use web sockets.
- NodeJS and NPM
npm install -g gruntto install Grunt.
npm installto install all required node modules
npm startto start the server, accessible through your browser on
grunt dev_watchto set up grunt watchers if you will be doing any development changes