Web App Manifest

Web App Manifest


The web app manifest is a simple
JSON file that gives you, the developer, the ability to control
how your app appears to users in areas where they
would normally see apps. And, more importantly, how it behaves
when it’s launched from the home screen. It’s currently supported in Chrome and Opera with Firefox
actively working on it. And it’s currently under
consideration for Edge. At a minimum, the manifest must contain
the name of the app and a short_name. The short_name is used
on the home screen and in other places where
there is limited space. It also needs the start_url, the URL the app should open when
launched from the home screen. Make sure, the page you specify is
cached as part of the app shell. Otherwise, you won’t get the benefits
of a cached app shell and your app won’t work offline. One quick tip. To track the number of users
who are launching your app from their home screen, you can add
a query string to the end of your URL. And use any analytics to track launches,
with that query string. But don’t forget to ensure that you’ve
cached the URL with the query string, in your service worker. Finally, we need to
provide a set of icons for things like the home screen icon and
the tab switcher, and splash screen. The icons parameter takes
an array of icons and must include the source,
the size of the icon, and the type. For example, image/png. I recommend providing eight icon sizes, 48 by 48, 96 by 96, 128 by 128, 144 by 144, 192 by 192, 256 by 256, 384 by 384 and finally, 512 by 512. Just make sure you have icons for
1x, 2x, 3x and 4x devices. Chrome uses the 48 device
independent pixel icons for the home screen icon and
the tabs footer. And the 128 device pixel icons for
the splash screen. Those are the minimum requirements. But there are a few other helpful things
that you should set in the manifest. The background color, and
theme color are used by the browser along with an icon,
as part of the splash screen. Shown the instant the web app is
launched, until its first render. Once the app is loaded, the theme
color tells the browser, what color to tint the UI elements such as the address
bar or the notification tray. Display and orientation property give you control
over how the app is displayed. For example, you can hide
the address bar and the back and forward buttons,
by setting “display”: “standalone”. Or if you’re building a game
that works better in landscape, you can force landscape view by
specifying, “orientation”: “landscape”. To save yourself some pain later, be sure to validate
the manifest you’ve created. Use the manifest validator linked in the
instructor’s notes below to make sure that you’ve got everything you need and
that it’s formatted properly. Once you’ve created a manifest file,
the browser needs to know about it. To do that, add a href=”manifest.json”>to
the head of each page.

Danny Hutson

2 thoughts on “Web App Manifest

Leave a Reply

Your email address will not be published. Required fields are marked *