PETE LePAGE: This calculator might look familiar.
It's a demo web app from the Polymer project.
With just a few changes to the code-- like adding theme, color
and a meta tag, and adding a manifest.json file--
I've made this web app look and feel
like an installed native app.
Here's how I did it.
Let's start with theme color.
It gives you an easy way to add a primary brand
color to your site or app, and provides an extra visual pop
in the address bar and tab switcher.
When your app has been added to the home screen,
it also sets the status bar color.
The syntax is pretty easy.
Add a meta tag to the head element of each page,
with name equals theme color, and set the content
to the color you want.
In the past, getting users to add your web app to their home
screen has been a bit of a pain.
But in Chrome 42, we introduced app install banners.
App install banners allow your users
to quickly and seamlessly add your web app to their home
screen with just a single tap.
In order for Chrome to show the app install banner,
it looks for a manifest file, a service worker,
and a set of other heuristics about how often the user has
visited the site.
The manifest.json file provides the browser
with details about your application
that it might not be able to get from elsewhere.
Like theme color, every page needs
to include a link element with rel equals manifest,
and an href pointing to the manifest.json file.
Inside the manifest, I've defined short name,
which is used in space-constrained locations
such as the app name under the icon on the home screen.
But the full app name may be used in other locations.
To make sure your icons look their best,
Chrome first looks for a 48-dip image.
Remember, dips are device-independent pixels.
So on a 2x display, it's going to try and use
a 96x96 pixel image, or a 144x144 pixel image
for a 3x display.
If it can't find one of those, it will use the closest match.
For the paper calculator, I've created four icons.
A 1x at 48 pixels, a 2x at 96 pixels, a 3x at 144 pixels,
and a 4x at 192 pixels.
I've specified the icon source, the size, and the MIME type
for each.
Adding the start URL parameter is helpful,
since it tells Chrome which page to load
when the app is initialized.
It also has the added benefit of stat tracking.
By pointing this to a unique page that
uses Google Analytics, we can track
how many users are opening this app from their home screen.
This also means that your manifest can span many files,
but always start with the same URL.
By setting display:standalone, Chrome hides the address bar
on launch.
Let's see what happens when we open the site.
There's my blue theme color applied to the address bar,
and the app install banner shows up.
Simple as that.
PUPPET: OK, hold on a sec.
Time out.
He glossed over some things that need to happen for app
install banners to appear.
He mentioned earlier that Chrome looks
for several heuristics, the manifest and a service worker.
Chrome will then show the app install banner
if the user visits the app on at least two separate days
over a period of two weeks.
Without those, the app install banner will not appear.
For this video, I've used a little puppet magic
and added a simple service worker.
For testing, I've enabled the bypass app banner engagement
checks flag.
Say that one 10 times fast.
What that does is bypass the checks
on how many visits are required before the app install
banner is shown.
PETE LePAGE: Woah, that was weird.
Feels like I was frozen in time there for a second.
As I said, there's the theme color
applied to the address bar.
But I also get the app install banner appearing
at the bottom of the screen, prompting
me to add the calculator to my home screen.
Let's click Add and see what happens.
Yep, there it is.
Notice it used short name we defined in the manifest,
and the correct icon specified in the manifest file.
Sweet.
When I click on the app, it loads as a standalone app.
There's no address bar, the status bar
is the color we expect, and our app
feels like an installed native app.
And remember, I cheated with my service worker.
This calculator doesn't really work offline
because the service worker doesn't
provide an offline experience.
But you could that with just a little bit more work.
So there you have it.
I've shown you how you can use theme color, the manifest,
and service workers to make your app feel more
like an installed native app.
Thanks for watching.
I'm Pete LePage, and I/O out.
[MUSIC PLAYING]