Home » Web » HTML » Increasing engagement with Web App install banners

Increasing engagement with Web App install banners

We recently enhanced the Add to Homescreen function in Chrome which allows users
to add your Web App to their home screen with the addition of the
standards-based “web app manifest”.
The manifest gives you extra control over the Add to Homescreen experience,
allowing you to tell the browser what to launch, how to launch your app
(fullscreen or in a browser window) and how it should appear to users on the
home screen.

This improved things for users, but the ability to Add to Homescreen is still
hidden behind a menu, meaning that your apps still aren’t as discoverable as
they should be. To increase the chance of a user adding their app to the home
screen a developer would have to try and guess if the site was already running
as an Added to Homescreen app and if not, then tactically decide to give them an
overlay that asked them to work around our poor UX. This isn’t great for users,
and it is not good for developers.

In Chrome 42 (M42 – that is now in Beta) we are introducing “App Install
Banners”. App Install Banners give you the ability to have your users quickly
and seamlessly install your Web App as per the images below.

IO Site with install banner

“This looks great, I want it on my site” I hear you shout. “Please tell me how
to add it!”. The good news is if you meet the following criteria Chrome will
manage the prompting of users:

  • You have a web app manifest
    file

    • The manifest defines how your app appears on the user’s system and how it
      should be launched – and you are required to have a `short_name` and a
      `144×144` png icon
    • Your icon declartion’s should include a mime type of image/png
  • You have a service
    worker

    registered on your site. We recommend a simple custom offline page
    service worker
  • Your site is served over
    HTTPS
    (you need a service worker after all)
  • The user has visited your site twice over two separate days during the course
    of two weeks.

A sample manifest is provided in our samples and one here for quick reference:

{
  "short_name": "Kinlan's Amaze App",
  "name": "Kinlan's Amazing Application ++",
  "icons": [
    {
      "src": "launcher-icon-3x.png",
      "sizes": "144x144",
      "type": "image/png"
    }
  ],
  "start_url": "index.html",
  "display": "standalone"
}

If you are interested in the implementation, check out crbug
452825
. If you are
interested in tracking what other things we are working on in this space, follow
the
Cr-UI-Browser-AppShortcuts
label.

Frequently Asked Questions

My app meets all the criteria, but I don’t want the banner to display. Can I control this?
Not right now. We are working on ways to give developers the ability to cancel
the display of the prompt. Follow our “Intent to Implement” on blink-dev mailing list.

Can I detect if a user tapped “Add” at the prompt and added to home screen?
Not right now. We are working on ways to give developers the ability to
understand whether the user has gestured Install or Cancel.

If a user dismisses the banner, will it appear again?
No. Not unless the user clears their history. We want to make sure users have
a good experience. We will likely be changing all the heuristics over time.

Can I decide when to prompt the user?
No, we are not letting developers actively prompt the user to Add to Homescreen.

You said that I will only get the banner if I visit the site on two different
days. How on earth do I test it?

Yeah, we had the same problem when we were building this. Enable
chrome://flags/#bypass-app-banner-engagement-checks and you will see it as long
as you have a manifest (configured correctly) and are on HTTPS and have a
service worker.

Why do I need a service worker?
We believe that when you add to the user’s home screen you should be providing
an app-like experience. A service worker, especially one that supports push
messaging or offline, is a strong indicator that you are developing a first
class device experience. We recommend the following simple Service Worker as a
starting point
.

Why do I need SSL?
Because you need a service worker.

Are there any good examples of this in action?
Yes, Glad you asked:

Examples are great, but do you have anything I can just copy and paste?
Yes. We have made a minimal app install banner
example

that you can copy, paste and change.

Feed Source: HTML5Rocks
Article Source: Increasing engagement with Web App install banners

About Admin

Powered by WP Robot