Aggressive Web Apps – Phil Nash – JSConf EU 2018

Aggressive Web Apps – Phil Nash – JSConf EU 2018


Can I send you push notifications. Do I have to be here? All right. [Laughter]. So that was a poor start. But let’s try again. Hi, everyone. My name is Phil Nash. I’m a developer evangelist at Twilio. What I’m here to talk to you about today is
progressive web apps. We’ve not heard a lot about them this time
around at JSConf which means it’s an part in the life cycle of a new feature of the
way that we build applications. What I like is the technology behind it and
what we can do with it, and the service worker is my favourite thing, because we have JavaScript
that runs outside of our page now. I love that. What I really love about it is that it’s now
supported in every major browser! [Cheering]. This means we can start talking to our places
of work and businesses to build application that is are better for users, can build for
interesting stuff and native app-like features because that’s some of the things that we’ve
been missing that the native applications have had over us. One of those is push notifications. I think push notifications are wonderful which
is why I want to talk about them today, because I’m not sure you do! Push notifications are probably important
to cover because it is not quite everyone because we can get there, and we can do it. You know how to do push notifications. You have had a native app. We will get there. I just wanted to show a quick example because
I’m so delighted that it did appear – this is Edge. It works in Edge. Out of the box for the first version of service
workers push notifications came in, it was way, and then wooh! And I had to redownload a VM for that, because,
you know. If I go to Can I Use, it looks red and dangerous. If you’re looking at the reds and greens on
this, it’s not correct. You want to look in the top right corner there
where it says almost 75 per cent of active users based on the global stats, almost 75
per cent of people have access to these. You need to be thinking about them and building
them in the correct way. Push notifications are good, and that’s what
I want to talk to you today. We are going to cover three things. Briefly, how to push, with then we’re going
to talk about good push notifications, and then talk about permissions. Permissions get sculls because we’re doing
it wrong. Quickly on how to push: there’s quite a convoluted
setup to make push notifications work. You start with a user and a browser, and you
have to register your service worker. Once you do that, you can ask for permission
to send push notifications to the user. When they say – if they say yes, you will
get back a URL and a couple of encryption keys which you will want to save on your server
somewhere so you can use them later. When you make a push notification, from your
server you send a post request to the URL you got which is the browser’s push notification
service. You can encrypt information with that with
the keys you got earlier so the browsers can’t read what you’re sending to your users, and
then the service will send a push to your device which will wake up the service worker,
which will react, send it back and make it happen. I’m not going to go into the technical side
of that, the code, or anything. If you want to find out about that [sound distorted]. This is a tweet that comes across every once
in a while on Twitter. [Inaudible]. I don’t think that’s true. I don’t believe that. I want push notifications for something. They’re useful things for us. Push notifications are incredibly useful for
the right things. I do believe that the person that says that
maybe doesn’t want push notifications. It’s entirely possible that you are a person
who, when you get your phone, the first thing you go is go to settings and turn off notifications
and never get that, and that’s fine, but it’s not true for everyone. I have examples of good notifications and
we need to hear them. Appointment reminders is a good one. I work at Twilio. We’ve an API for sending text messages we
have had for around eight years now, and text messages get used for notification purposes
as well. One of our clients, the Arkansas Children’s
Hospital used appointment reminders. They cut down no-shows, bearing in mind this
is a children’s hospital, appointments for sick children’s, no-shows were 20 per cent. After they implemented notifications to say,
“You’ve got an appointment tomorrow”, it dropped to two per cent. That’s real-life, important stuff, keeping
doctors doing the job they should be doing and getting kids to appointments they need
to going to. Chat alert is an obvious one. I’m sure we would like to ignore them some
of the time, because they’re not normally always good news, but then I know that having
been in Berlin for the last week, I kind of tried to hang out and meet one different people. The push notifications of various chatting
and messaging people have kept me on the ball for that. ETA alerts. Things arriving. If you order a car, food, any kind of delivery
at all, getting a notification that it’s there is excellent. It means that you actually leave your house
and get in the car, or you pick up that food. Event updates, you don’t want to download
an entire native application for a one or two-day event. Some of the other events, like flights, and
three different planes to get here, being told an updated when I could check in, and
also when there were delays. It makes that so much easier. These notifications have three tenets to them
that you should consider when building push notifications: timely, actionable, and personal. Timely is sort of obvious. If I get a push notification to say that my
car has just arrived after I finished the journey, that’s not very useful. There are other considerations to that as
well. This is a picture that goes around Twitter
once in a while as well. It is the Slack decision tree of whether to
send somebody a push notification. A whole bunch of those things are time-based
stuff. Is the person asleep? Working? Do they really need this? Weirdly enough, when I’m using Slack, I can
be on the desktop typing a message to somebody and my phone will buzz with a notification,
so I modified this to – that’s how it works for me. I don’t know what’s gone on there. These are the considerations like the time
of day, the time zone, and the number of notifications you’re sending somebody as well. You don’t want to keep piling them on. That’s not helpful after a while. Then you have actionable stuff, where you
get something that you can do something about. If you receive a chat message from someone,
then you want to read it, respond to it, deal with that. If your car is here and it’s time to leave
the house, or time to go on the street and look for it. If your flight is open for check-in, you might
get the extra leg room seats if you check in now – important to me. Then they’re personal. One thing you might have noticed is they’re
all about you. And I’m pretty sure, if you searched Twitter
two weeks ago for push notifications, lots of people very surprised that they had 20
or so notifications that some guy was getting married, as the royal wedding goes off and
news organisations are like we must push this to everything. It’s not personal, actionable, or interesting
at all. That’s not true. Some people probably wanted that, but I didn’t,
so it’s fine. You can break the rules on this, though. Some people might have wanted royal wedding
notifications. A really good example of this back in 2016
when the Guardian team in the UK covered the UK general election, and did this experiment
with push notifications that kept people up to date with how the votes were coming in
overnight. This is an amazing bit of work as well, because
they actually assembled this image in the service worker, and, if you work with a service
worker, you know that there is no canvas element, there’s no way to manipulate images properly
so they were doing it entirely with buffers, which is kind of amazing. This actually shows one other thing. In the middle between latest declared and
settings, there’s a button to stop. That’s one they programmed in, because maybe
you do want to go to bed because this goes all night, and you don’t want to keep hitting
notifications. So you have to let people opt out from within
your application. This is the Twitter iOS application where
you can choose who push notifications you get. They have a bad reputation of adding things
to this and checking them, so you have to keep revisiting once in a while, but, if I
want at mentions but I don’t want Twitter news, because then you can go and sort it
out inside the application. Because alternative for us on the web is terrible. The alternative looks a little like this. I’m going to go out to Chrome for a second
here. Make sure notifications are working. We are registering for push notifications
there. When I send one, it will come into the screen. It will come into the screen … . It’s not
going to do it. Cool. In the notification, you get to see – as you
hover over it, there are two buttons: one importantly, is settings. When you click the settings button, you get
taken to this screen which allows you to block that individual website, and, even worse,
allows you to block all of them. If one website sends a bad push notification
a user can’t opt out of, it’s a very quickstep to that user blocking every single application’s
push notifications. This is what is looks like in Firefox as well. It’s not good. I am terrified that the rest of the internet
can affect my application in that way. If I’m sending useful things to a user that
they want to receive, but they get put off by an abuse of this API, then that is horrifying. So, this leads me on to the other other terrifying
part of this which is the permissions. I found one of those tweets that kind of said,
“Dear every website, I don’t want you to post notifications to my website, I don’t want
you to know my location, please stop autoplaying that video, I’m angry and sad now.” Websites are making using angry and sad because
they’re doing this. The power of the web has been increasingly
increasing over the recent years as we get the ability to use methods and device capabilities
like geolocation, like the push notifications, like media devices, camera, and microphone,
Bluetooth, maybe, web TV, all of those things, but we require permission for them because
they’re more invasive. That is correct, and the web has had this
permissions model that you ask for it when you need it, which is good, except we keep
asking and doing lot of things. It doesn’t make you ask you when you need
it. I want to pick on a couple of sites. Apologies to them but they should shot have
done this. This is what happens when you load producthunt.com
for the first time. When you get there for the first time, why
are we being asked for permissions for push notifications? This is cnet, a tech and review site. Push notifications first time. This is sitepoint.com. Not only permissions but an entire page overlay
asking you to pay for stuff. You don’t even know what the site does yet. It’s supposed to look like that. This is a site that does tutorials on web
development. YouTube did it the other day. This is the home page. It gave me no context about what it what happened
wanted to do with these push notifications, it justified asked for permission. Context is absolutely kick in this case – absolutely
king. Would would you give permission to any site
to have one of those invasive permissions? This counts for geolocation, and counts for
media devices as well. Why would you give permission to one of those
sites without context? And then in recent changes from Chrome, they
stopped allowing you to dismiss the permission. You either block or allow. So that is straight into block straightaway,
obviously. We need to stop this. We need to stop this or our users will stop
it for us. There are sites like howtogee k saying how
to turn them off. this is one or two sites that can ruin for
the rest of us, and ruin it for the users as well. and Firefox. if you’re here, which
I hope you are, let’s have a chat about this. I don’t think this is cool. I don’t think building a feature, and then
telling people that the feature you built into your browser is terrible is a good idea,
especially when I think we can agree some of those push notification examples I gave
earlier are good ideas and can help meme. maybe now you can think of some good reasons
to get push notifications on Firefox. let’s sort this out. so, please, if you have built push notifications
into your website at all, do not demand notification permissions on page load. don’t! [Applause]. my worry, as I said already, is that permissions
have become the new pop-ups. they will be reviled and dismissed by users, but just the
annoyances in the browser, and it doesn’t matter what the feature behind them is, where
there is push locations, geolocation, whatever, they dismiss it, it’s not care. when they dismiss them by default, our web
platform loses its power to build engaging and useful experiences for those users. that little check box is terrifying. so, please, don’t demand notification permissions
on page load. I have some suggestions, though. I don’t think I can reach everybody by standing
on stage here. I’m glad to reach you and tell you this, but
we have to do better than that. I have some suggestions for now, and then
for the future, how we can improve this in general. for now, it is better patterns of UX for this. wait. build up the context that will make the user
aware of why you need that permission. Matt gaunt from the Chrome team wrote a great
post and an example application based on this. he built a fake airline ticketing site. once you’ve finished the purchase process
of an airline ticket, at the bottom of the screen, it pops up “get notifications for
flight delays.” you’ve bought an airline ticket and you have
no wish to turn up to the airport ten hours early because your flight is delayed. this seems like a good idea. I know exactly what I’m going to get out of
this. it can be obvious. still don’t put the permissions up, but if
you’re building a chat application like Slack, that top bar at the top is reasonable. it is the same for geolocation permissions.
if there there is a map on the back of the screen behind the notification, it’s probably
obvious what we are trying to do here. that’s fine. but, for the future, this I think is more
important, because, I think together, we can work to fix this in general. this needs to be the start of a conversation
or the continuing of a conversation that has existed. My suggestion was that browsers should enforce
the user interaction before asking for a permission. Something like “pop-ups” where you have to
have had a click before you can pop something up. there’s arguments about this, but you can
get involved in them. On the GitHub, on the WICG repos, there is
an interventions repo which is great. issue 49 is the suggestion from have been
else that there should be an interaction before a permissions pop-up. That has stalled right now because there are
a couple of companies that have built up a service that does push notifications on behalf
of other websites, for those websites that haven’t managed to change on to HTTPS yet,
which you need for the service worker. I think those businesses are tenuous at best. it is a – while I’m sympathetic with the fact
they’re trying to build a business, I’m not sure it’s a great foundation to be doing so
on. Maybe a user interaction is not the best suggestion. We need to get involved and come up with better
ones. There is the permissions API, an emerging
spec from the W3C, and it collects in one place where you can find out if you have asked
for permission and what the response was. But I feel like that could be better as well. perhaps we could have an API that asks us
whether we can ask permission yet. Perhaps the browser should be implementing
some kind of heuristic for a progressive web app, you can only add
to home screen after a certain amount of engagement. We need this to be deterministic as well. so being asked to ask the permissions API
whether I have enough engagement yet might be a good. but again, I need more ideas, and I need more
input for this, and we need to start talking about it more. So, in conclusion, I think push notifications
are awesome – for the right things. not for breaking news, but for important timely
actionable and personal actions. One more time for this one: do not ever demand
permissions for anything on a page load. make those notifications timely, actionable,
and personal, or don’t, break the rules, but allow those users to opt out side your application
so they don’t turn it off for everyone. For users like that, the whole web suffers. They suffer because they can’t get the good
notifications we’re talking about. they will block it if they have a bad experience. but we, as good develop – we can pry good
experiences for these permissions and notifications in general. We might have to work together to find out
how we can do this better, but that’s what I want to see. And I want us to see us building progressive
web apps that improve experiences for users, that improve the web in general, and not aggressive
web apps which get up in everybody’s face and make users sad and angry. We can go and do that. thank you so much. [Cheering and Applause].

Danny Hutson

5 thoughts on “Aggressive Web Apps – Phil Nash – JSConf EU 2018

  1. Yup. The problem with Push Notifications is that most web apps ask you upfront without giving you context and reason. Even YouTube, in my opinion, does this wrong (Open youtube.com and you're prompted to receive notifications… But notifications of what, and for what reason?) .

    It would be something as simple as: "Get the latest news and updates via notifications" or even better "Get the latest videos from your subscribers via notifications" (For YouTube). But I seldom (if ever) have seen such dialog that gives me some context before punching my face with some push talk.

  2. It would be cool if there was a setting to block push notification requests for just the first n number of visits to a new site

Leave a Reply

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