Web App Manifest quick start
How to get up and running with Web App Manifest in no time.
How to get started
- Read the spec and create your own manifest or cheat by using one of these generators:
2. Include the manifest file in your head
Don’t forget the .webmanifest extension and to set its’ MIME type to:
application/manifest+json3. Validate what you built by direct input with tools like :
Or download Chrome Canary and open the Applications Tab in DevTools on a Desktop browser to find out how the browser is reading your manifest:
Debug it on real deal on real devices by first enabling “Bypass user engagement checks” at chrome://flags to not have to wait for the matched User Engagement conditions.
4. Think about Cross Browser support (cough Apple). Consider including this polyfill in your head element
like this:
<link rel="manifest" href="/manifest.webmanifest">
<script src=”/path-to-my-copy-of/manup.js”></script><!-- cross browser polyfills for manifest -->Or if you don’t like the idea of meta tags being generating on the fly, why not just use the plugin to generate the html source and then copy and paste it to your head. There’ll be a number of tags to this extent:
we’re talking about this part:
5. Think about how you’re going to promote that your web site as an Installable Web App.
Are the native browser prompts enough for what you need?
Don’t forget that they’re only supported by a few browsers (right now! think forward) — but might be great for an MVP !
Keep in mind that they are restricted to these User Engagement rules:
- The user has visited your site at least twice, with at least five minutes between visits.
Consider a roll-your-own implementation?
Start by perusing these implementations:
The straight out Plugin:
Implementations by Flipkart, Well Workouts and AliExpress:
Think about things like:
- What would I like the behaviour of this prompt to be across various browsing and device experiences
- What would I like the behaviour of this prompt to be after someone has installed to homescreen — should the prompt remain and instead remind the user to open the Installed App instead? Or perhaps it could be a courtesy reminder once off
- Will this tie up somehow in to my server side stored user object?
6. Continue to optimise your Installable Experience by hooking in enhancements to install events:
window.addEventListener('beforeinstallprompt', function(e) {
console.log('beforeinstallprompt Event fired');
e.preventDefault();
return false;
});7. Style for the installed experience:
@media all and (display-mode: standalone) {
body {
background-color: yellow;
}
}or with JavaScript:
if (window.matchMedia('(display-mode: standalone)').matches) {
console.log("Thank you for installing our app!");
}8. More things to think about:
- Tracking
A common pattern is to use start_url to append query sting to track requests:
{
"start_url": "/?from=homescreen
}Also think about how tracking might be managed offline. Will you delay pings to GA? Would it make sense to use Mobile GA which pings when you connect comes back online?
- Getting trapped in external links — if your web app is “display”:”standalone” be sure your links open in a new tab because you lose the url bar AND the back button and then you might end up in a dead end
- Think about the new paradigms for Installed Web Apps. Will you need to recreate navigation cues? like the Back Button?
9. Tell everyone!! Promote Installable Web Apps. Send EDMs to the right user segments. Build great new Progressive App functionalities like offline capabilities with a Service Worker and push notifications and and set up your users to evangelise it.
Push the web forward :)
Just start™.
