Kick starting with Progressive Web Apps Part 4
Our final step towards progressive web app is to make your web app installable via the web app manifest.
Besides service worker the another thing behind progressive web app is Web App Manifest File. A web app manifest file is a simple JSON file that gives you the ability to control how our app appears to the user and it should be launched. You can define specifications regarding the splash screen in Web App Manifest File. Your web app will be launched in the full mode with no URL UI.
//manifest.json (Create manifest.json at root directory)
{
"name": "Progressive Web App",
"short_name": "Pwa",
"start_url": "index.html",
"display": "standalone",
"theme_color": "#d9ebf9",
"background_color": "#d9ebf9",
"description": "Progressive Web App",
"icons": [
{
"src": "pwa.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "pwa.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "pwa.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "pwa.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "pwa.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "pwa.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "pwa.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "pwa.png",
"sizes": "512x512",
"type": "image/png"
}
]
}Note: From some testing it seems you need at least your src image with 144×144 pixels to put inside the icons array.
At a minimum manifest must contain the name of the app and a short_name. The short_name is used on the home screen where there is limited space. It also needs the start_url, the url that app should open when launched from the home screen. Make sure this url is cached else will not get the benefit of the cache and our app won’t work offline. Also we need to provide a set of icons for things like home screen icon, splash screen.The icons attribute takes an array of icons and must include the source, the size of the icon and the type.
You can also specify the background and the theme color used by the browser along with the icon as a part of splash screen.Once the app is loaded the theme color tells the browser what color to be used in UI for address bar or for the notification.
Further, you can also validate the manifest file to avoid errors at a later state.
Once you are done with the manifest file the browser needs to know about it.To do that add a link to index.html file.
// index.html<link rel="manifest" href="manifest.json">
Web App install banners give you the ability to quickly add our web app to user’s home screen. The powerful feature of the Chrome is when set of heuristics are matched, itself handles prompting the user to add web app to their home screen across the bottom of the page.
Finally you have our web app installable and displayed on the home screen just like the native app but delivered through the web app.
Lastly, in order to validate the features of Progressive web app in your site you can use the Chrome Extension : Lighthouse!
To kick start with Progressive Web App you can go through my blogs :
1) Register service worker and cache the resources in our app on the initial load.
2) Update the old service worker and cache the new response in Cache Storage.
3) Get out the resources from the cache and intercept the network requests.
4) Make our web app installable via the Web App Manifest File.
SoluteLabs is a high-performance team of 25 focused on mobile and web design and development; we have produced top #10 chart topping applications on Android and iOS app stores, graphics that have gone viral and applications with Millions of downloads.
