Opening title - So I've known Elise because she's very much someone who comes and gets heavily involved in the web design element community up in Sydney.
And when I saw her speak at SydCSS, a couple years back, I was like, "Can we get Elise to come and speak?" And it's taken me a little time, a bit of effort, but we've got her here.
And she's gonna talk about something that's probably the single easiest, safest, best thing you can do to advance your website, your web app. And it's going to become incredibly important into the future, it's Web Manifests.
And to learn all about that, please welcome Elise Chant. - Thanks John.
(audience applause) Okay everybody, so today I want to talk to you all about installable web apps and how you can build them with the web app manifests spec. So, I'd just like to start, can we get a show of hands, has anyone ever installed a web app? So that's not quite all of us.
But I wonder if any of these tags look familiar because if these tags are in your website, then it might surprise you to know that you have been building foreign installed experience. And maybe you've just never seen it in its installed shape. So, in this talk, I wanna clarify some stuff for us. And talk about how we can use some manifests spec to make sure our installed experiences are better. Alright, so what are we talking about? An installed web app is a web app that has been installed on an operating system of a device.
And we've been able to install the web since basically the iPhone was invented, which is why we have those horrible meta tags that we just saw before. But these days, having a web app manifest provides a new opportunity to enhance the installed experience of an app. But many people just don't have a mental model of what an installed web app is.
So, let's remind ourselves of what we already know about installed apps.
We all know that to open an app, you go to your home screen and click an app tile. We know that the app will open in its own separate little world.
And we know that closing it with the home button, won't really exit it, but more like minimize it. Because the app is part of the top level operating system, we know that app settings will be neatly managed in your phone settings.
We know that you don't always have to be online for many apps to still just work.
And we know that to get new apps, you have to find and download them from an app store. We know that we have to wait for the whole app to download. We know that we have to wait for the whole app to download, and then fully install before you can use it for the first time.
We know that it'll get a special space on the home screen. And then I'll get to keep the app and it'll always be there. And all these behaviors communicate to users that my apps are the most important things in my phone, which is great because I can customize my phone to suit me. And it contains all my stuff in it that I really care about. So, it's not really the phone that we care for so much anymore, it's the apps and what those apps represent. But let's not forget that not only are they great native apps, there are some awesome web apps as well.
And there are literally thousands more of these. But often we don't share the same feelings for them as we do for our native apps, or the same closeness. And we've been allowing users to build an idea that apps on their home screen are much more important than any app on the web.
And this might be because maybe we haven't been diligent enough about providing good mobile web experiences. You know, maybe it wasn't MVP.
Or maybe we've been too busy shipping for early versions of IE, instead of optimizing for mobile. But actually maybe the thing that we overlooked in this device world is that accessing a web app means that I rely on a browser app to get to it.
Because if I didn't have the browser app, I wouldn't have tab.com.au.
So, the browser app is most important and the web app is less important.
And then maybe one day, I forget the URL to this site and that's the chance that I might very well forget about this site altogether. Fingers crossed.
So, why have been okay that web apps are stuck inside a browser app? What if the web could break out of the browser? If I could keep a website like I can keep a native app. If I could collect all of my favorite websites on my home screen with my other apps.
When I look at my apps now, maybe I think less about the browser app being a gateway to apps on the web, I would just see apps that I care about.
And the great news is, that we can do this. And the web app manifest spec is the tool to do that. And this is really huge because we can now allow websites to exist in a similar sense to native apps. So, we can start to level the playing field there. Okay so, what do I do with this spec exactly? Well, instead of curating a long list of quirky meta tags, implementing the manifest spec is as simple as linking to a manifest file in the head element. Then you must include the manifest file.
It's a JSON document, that will outline all the meta data to be used by the installed experience of your app. If you've ever built Chrome extensions before, this is the same file that you need there.
This is super easy to put together and there's even validators and generators online that would do a lot of the heavy lifting for you. But in practical terms, what does this achieve? Well, if the browser can see that your site has a valid manifest file, it has the chance to offer users to install the web app. And if you've visited a site twice with more than five minutes between visits, Chrome on Android, which is here to the left, will show you a browser prompt that says Flipboard, Flipboard.com button, Add to Home Screen.
And Opera will show you this one on the right. As I'm aware, I could be wrong, but it's only these guys at the moment that have these prompts.
But we've seen browser vendors collaborating really well in this space.
So, have good faith that they are coming, that is, vendors except Apple, maybe.
But as diligent modern web developers, thinking through the lens of progressive enhancement, if a particular vendor doesn't have buy in yet, this is no longer a reason to resist technology. Okay so, if we go back to the Flipboard example and install the app, let's go ahead and accept the Add to Home screen. So, what will happen is, in the background, Chrome is going to install the app on the top level operating system.
You get a little browser notification that said, "Flipboard was added to the home screen." And now on the home screen, there's a new tile, where I can open the installed app.
And that's really how simple it is to install a web app. We all should really know, as developers, that that's how you do that. So now, let's take a look at the app next to the one in the browser.
As you can see, there's quite a big difference in screen capital that you get without the URL bar. And this often becomes even more of an issue when you have the various app banners and call-outs, and hamburger menu and all sorts of stuff.
We have a reduced screen capital as it is, so this makes a huge difference.
There's also this nice splash entry screen when the app opened.
But without the URL bar, it means that I can also no longer navigate away from this experience.
So, to get back to a browsing context, I would know to close the app and then reopen the browser app.
And that's a feature because if I had any expectation, how any other app would work.
So, we could now describe the experience as being app-y. Okay well, maybe a little bit.
So, what about sites that don't have manifest files? Can I still install them? Well yes, yes you can.
But you don't get much more than a glorified bookmark. And you certainly don't get any of that app-iness that we just saw.
You won't get the browser prompts.
But then as long as you know the steps to install the site manually, you still can. But you'll notice here that the app really just opens back up in the browser, which is a little underwhelming.
And it's hard to find that compelling value proposition for installing the thing. And the danger is not just in this experience, but how an underwhelming experience might create the wrong mental model in our minds about installed web.
And certainly, this might frame out decision-making around whether to install the next web app. But on the bright side, the capability to manually install a web app also means that it's possible to roll your own installation prompts.
Here's an installed web app, and you might see down in the bottom, there's a little blue banner.
It calls out the site is installable.
Here's a zoomed in view, it says, "Install Well Workouts as an app." So, if we go ahead and click this banner, up pops some information, which is great.
And I might actually read it because it was delivered to me in a timely and useful way. It says, "To install an app, tap the dot-dot-dot button at the top right and choose Add to Home screen." So, if I can understand that and I don't get distracted on the way, I might do that. And then it will ask me to verify the app name, which this time looks like a nice short name. So, I'll go ahead and click Add.
I get the browser notification that says, "Workouts was added to your Home screen." I now have an installed app on my home screen with the right tile icon and the name I approved. So now, if I open the app, when the app opens, I get a nice launch screen with an icon and a slightly longer title.
And now we're looking at another installed web app. So, it's easy to see that this experience was richer and more app-y than the bannings experience. And with the perception of presentation, this could very well be a native app.
And most importantly, without the manifest file an experience like this would have been really hard to achieve.
So, for a small amount of effort and including that manifest file, you can promote the installed experience and progressively enhance for that experience. So, let's take a look at how this relates to the spec. Here's a web app that I've installed.
This is its JSON manifest file, which was linked from the head element.
And as we have already talked about, the file described the meta data that support the installed experience of the app.
First, it declares a name, and a short name. Here, you can see those values get passed into the title in the browser prompt.
And there's also an icon there, which will also be supplied by the manifest. The name gets used again in the browser notification that said, "AliExpress was added to your Home screen." And it's used by the app tile itself.
There's a start_url property that determines the entry URL, which the app should open from.
Without the manifest, sites that may have been added to home screen from shopping cart, might then always open at shopping cart.
And that certainly would not be a behavior you would expect from an app.
There's a display property.
Here, it's set to standalone.
This means when I launch the app, it opens in a Chrome-less environment.
So, I can reclaim that screen capital.
And now of course, this is not the only option and you do need to be mindful about your site's navigation. Because without the browser Chrome, you lose an escape hatch, which is a feature. But there's no back button or URL bar anymore, so it is a possibility that users can get stuck in your app.
So, if you're not sure, you can always set this to just open in a browser.
I can set the orientation property.
As you can imagine, setting it to portrait would set the default display mode to portrait. Here's an app with landscape orientation.
This is a great opportunity for gaming apps or sites with horizontal latitude, like tabular data, or columns of things, like trailer has.
Background_color and theme_color control the colors of the application context bar and also the color of the launch screen.
There's an icons property, which of course is very important.
It will accept an array of different sized icons. These get used everywhere.
And there are many more properties that weren't part of this example, so definitely take a read of the spec to find out what would suit your application. And once you got the manifest file in your site, you can test it really easy by downloading Chrome Canary, which has a new application tab in their tools that isn't in normal Chrome yet. And here you can see how the browser is reading your manifest.
You can also download Debug Service Worker here. So pro tip, go and get Chrome Canary immediately. Okay, so why hasn't the whole internet added a manifest file in their site yet? And this comes back to the question, has anyone installed a web app? Despite some great features that installable web apps offer us, the challenge to adoption has been about discoverability and the heuristics of installing the thing. People just don't know, even if a site is installable, how to install one, or what the value would be in installing.
Take these sites for example, they're all installable with valid manifests. But can you see a good and consistent way of knowing that they are? And more often than not, unless by accidental discovery, or someone had explicitly told you, we just wouldn't know. So, we need a smorgasbord more apps calling out that they're installable.
We need more self-promotion.
We need more apps with great, progressive features, like offline, that people can evangelize about. And with the right momentum and promotion, we can become those things and it's up to us to push these things.
Take for example, what browsers like Opera are doing. They've been talking about promotion options for installable apps, like ambient badging. And we've already seen those 'Add to Home screen' prompts. There's even a good indication that at least Microsoft are exploring the idea of giving progressive web apps a special delineation in Bing Search.
And one would then assume, so is Google Search. So, what we're starting to see is an unraveling of installable web apps becoming a big deal.
And a lot of institutions have already been outspoken about this.
One of the biggest ambassadors has been the AngularJS Ionic framework, who earlier this year indicated that they aim to support PWAs as part of their basic platform.
And I've since have released that capability, so now if you ship a Cordova app, you also have the option to ship a progressive web app. And we've seen the big vendors commit to progressive web apps, like Microsoft and Opera and Google.
And you might also consider some of the other great specs, that will allow us to be even more app-y with the web. Because everyday, mobile becomes a more important web demand. So, let's start enhancing specifically for it. And the easiest way to get started on your progressive web app journey is by introducing a web app manifest file.
Get your website to be installable with the right experience and then go from there. Then add the offline capability.
Then add the push notifications.
Then add background sync, and so on, and so on. And if you're someone that might be thinking, "Well, our site is not a client-rendered app, "so this isn't relevant to me." Well, can I also call out that installable web apps don't have to be client-rendered apps.
Installable web apps are great for all types of websites, especially static sites. So, we know it's usually a good idea to be assurative when pushing our tech forward. But the main thing, which is usually the hardest thing, is to just start.
And installable web apps could be a great and simple way to do that.
Thanks everyone.
(audience applause) - Thank you so much Elise! Time for a question while we set up with Ben. Does somebody got a question or observation? Yeah, Neil.
- Hi Elise, just really interested to know about, if you have a link, how do they know whether that's something else in your app, or something that's external? I'm presuming you will open a browser if you open an external link.
Is it just the domain or can you be more precise than that? So, these pages on my site are part of the app, these ones you should open a browser tab.
- Well you know to be very careful about that. Usually when you're doing that, you tag it blank, all those type of links anyway, which would then open in the browser.
You have to be careful because once you go to another site, you can't get back if we've lost the back button. - Right, so with all that, you would navigate to an even different domain from within your app.
- Yes yes, so people can get stuck, which is not good.
- So, the advice there would be simply, don't just add a manifest to any old website. - Correct yeah, I mean, like all things, you should try to make good decisions that suit your product that you're building.
And some things will be better suited for this type of technology than others, like a calculator or a little compass, or something like that.
A great example with the Game Boy type thing. So, you just have to use a bit of common sense as well. But there's no reason why, with the right diligence, all apps can't be installable.
- Alright, we'll keep moving on.
But thanks once again to Elise for that, thanks so much.
