SURMA: Yeah, but there's
really no other way to do that. Like-- JAKE ARCHIBALD: Oh,
ho, ho, ho, ho, ho. SURMA: [LAUGHS] JAKE ARCHIBALD: That's where-- SURMA: That was
very intimidating. JAKE ARCHIBALD:
[LAUGHS MANIACALLY] SURMA: You activated it! [MUSIC PLAYING] JAKE ARCHIBALD: So-- SURMA: So. JAKE ARCHIBALD: A
little bit different. So. So. So a little bit different. I've got the thing. SURMA: That's our faces! JAKE ARCHIBALD:
That's our faces. I've built the HTTP203
Progressive Web app. SURMA: Ah-ah! JAKE ARCHIBALD: And
this is for our podcast, because I don't know, did you
know, we do a podcast as well? SURMA: Yeah, it turns out
that most of the videos are actually podcasts
just turned into video. Yeah. JAKE ARCHIBALD: Yeah. I don't care about the video. I don't actually-- the podcast
is where our hearts are. Right, we don't-- SURMA: [LAUGHS] JAKE ARCHIBALD: Give
or take this, really. We just do this,
because we have to. SURMA: Yeah, [INAUDIBLE]. JAKE ARCHIBALD: But
this is the podcast. SURMA: Oh, you built--
so basically, you built a little podcast thing. JAKE ARCHIBALD: A
little podcast app. Yeah. And it works offline,
because it does. And you can download
the episodes to work offline, right? Right, right? SURMA: Oh, that's neat. JAKE ARCHIBALD: So what
I'm going to do is-- well, do you know
what, I'm going to go onto a slower network. SURMA: Ooh. JAKE ARCHIBALD:
Because I think that's an interesting thing to do. So people can have a look at
all the interesting networks we have here at Google. One of them, we
have a 3G network. SURMA: So this is basically
our proper internet connection, but the access point
just makes it bad. JAKE ARCHIBALD: Yes. SURMA: So we have a quick way
of testing how things behave on a bad network, because
that's usually quite interesting to look at. JAKE ARCHIBALD: It is, yes. So right. I'm going to download one of
these episodes, like that one. SURMA: OK. JAKE ARCHIBALD: And so
it's downloading now. SURMA: Ah. JAKE ARCHIBALD: You'll see now-- SURMA: Oh, there's
a mini progress bar. Look how cute! JAKE ARCHIBALD: A mini,
tiny progress bar. So if I-- let's set this one
off as well as a shorter one. Now, this is kind of how
things work on the web today. Right? SURMA: Yeah. JAKE ARCHIBALD: It's slow. Whatever. But that's fine. But here's the problem-- is if this app gets closed,
which if I put the phone-- this is a big phone-- SURMA: [LAUGHS] JAKE ARCHIBALD: If I put the
phone in my massive pockets, then at some point,
this is going to be collected from
memory, because you'll be using other apps. These devices don't have as
much memory as other things. So we can sort of emulate
that by doing this. SURMA: Yeah, this is basically
your phone in your pocket. At some point, the
memory goes, nope! JAKE ARCHIBALD: And it might
not be the whole browser, it might just be
that tab's gone. And we go back in, and ugh! SURMA: Wait, I downloaded this. Why is it not downloaded, Jake? What did you do? Write a better app. JAKE ARCHIBALD: Exactly. And because it's the tab was in
charge of doing that download. And the tab closed. And it stopped. SURMA: Yeah, but there's
really no other way to do that. Like-- JAKE ARCHIBALD:
Oh, ho, ho, ho, ho! That's where-- SURMA: That was
very intimidating! [LAUGHTER] JAKE ARCHIBALD:
[LAUGHS MANIACALLY] SURMA: You activated it! [LAUGHTER] JAKE ARCHIBALD:
Things have changed. So this is the Progressive
Web App based in Canary. SURMA: It looks the same. JAKE ARCHIBALD:
It looks the same. Subtle little differences. Ooh-hoo. SURMA: Look at that Parallax! JAKE ARCHIBALD:
Parallax scrolling. This is an animation worklet. SURMA: Ooh! JAKE ARCHIBALD: I'm using
all the modern things. SURMA: We should
link to that article that someone wrote
about animation worklet in case people
don't know what it's about. JAKE ARCHIBALD: Yes, we should. Is that one of your
articles, is it? SURMA: It might be. Who knows? JAKE ARCHIBALD: Excellent. Brilliant. SURMA: People should
go and find out. JAKE ARCHIBALD: It is a
good article, actually. And it's what I used to
figure this stuff out. So I'm going to do
the same thing again. Let's download-- let's
download these two. Brilliant. Now, some things are different. SURMA: Oh, look,
it's integrated, like notification stuff. JAKE ARCHIBALD: Integrated
into notification. And we've got progress here. We've got the icon there. SURMA: That's neat. JAKE ARCHIBALD: I'm going
to do something magic. Oh, that's the Chrome Beta one. That's the old way. And this is the
Chrome Canary one. So they've gone out of memory. SURMA: Just close them all. JAKE ARCHIBALD: Close them. SURMA: Ah, look,
it's still up there. JAKE ARCHIBALD:
It's still up there. And we can go back. SURMA: Oh, that's neat! OK, so it-- JAKE ARCHIBALD: And
it's still there. SURMA: So what is this,
what you're using? JAKE ARCHIBALD: This
is Background Fetch. SURMA: That's a good name. It's a fetch in the
background, isn't it? JAKE ARCHIBALD: Yes, it is. And so as you say,
yeah, it'll not just battle through things like-- [? near ?] the app closing. It will go through
connection changes as well. So I'm actually going
to switch networks. So that was-- it's going
to cut the download. That's going to stop. And then it's going to-- you know, once it connects
onto this other network, it's essentially
going to resume, but it'll be able to resume
from the same point it was at before. It's not lost. SURMA: Provided the
server supports it. JAKE ARCHIBALD: Provided the
server supports range requests. Good catch. Now, it's going to start
downloading a whole lot faster. There it goes. So we've just got one through. And the next one's through,
because it's this fast network. And those are now downloaded. SURMA: It actually works. That's amazing. Who would have thought? JAKE ARCHIBALD: And they're
now available offline. SURMA: So is it still a fetch? Like, is it still just a
response object from me on the code side? JAKE ARCHIBALD: Well-- SURMA: OK, I'm sorry. JAKE ARCHIBALD: I thought we
could have a look at this. So this is how you
would kickstart one of those things happening. SURMA: OK. JAKE ARCHIBALD:
And like I said, I designed this API, so be nice. No, no, be brutal, be
brutal, and ask questions. SURMA: All right. So this is actually
main thread code, this is not service
worker code yet? JAKE ARCHIBALD: Yes. SURMA: So you're just waiting
for the service worker to be ready, because I guess
the service worker has something to do with it. JAKE ARCHIBALD: Yes, it does. SURMA: But you're kicking off
it from the normal Javascript [INAUDIBLE]. JAKE ARCHIBALD: So it's
hooked off a service worker registration. Now, you could still do
this within a service worker or a worker. SURMA: Yeah. JAKE ARCHIBALD: This is
an example from a page, but yeah, it can
be done elsewhere. So you get
swReg.backgroundFetch.fetch. SURMA: Oh, it's just
a new fetch call, which seems to have the
same parameters, just with a name at the start? JAKE ARCHIBALD: It's slightly
different parameters. So the-- SURMA: Oh. JAKE ARCHIBALD: So you're right,
it's the name at the start. And then it's URLs
or request objects. SURMA: And an array
of these, even. JAKE ARCHIBALD:
An array of them. Yes. And that's important, because
we felt like if it's a podcast, it could have artwork with it. SURMA: Yeah. JAKE ARCHIBALD:
Movies can be spread across thousands of files. So that's
[? typically how it starts. ?] SURMA: True. And you want to have, like, one
semantic group of downloads. JAKE ARCHIBALD: Yes. SURMA: Where you
could cancel one, you want to cancel
all the other ones. And that's something that
a developer shouldn't have to re-implement, I guess. JAKE ARCHIBALD: Exactly. SURMA: OK, that makes sense. JAKE ARCHIBALD: Exactly that. And then the option objects,
where you can give it a title. That's for the notification. Icons for the notification. And then the download
total, that's for the notification
kind of as well. Because if you've got-- SURMA: It can figure that out? JAKE ARCHIBALD: If you've
got 1,000 downloads, we don't to block on
starting all 1,000 of those. SURMA: OK, so I guess the
notification is mandatory. Like, you're not allowed
to do a background fetch without the user
knowing about it? JAKE ARCHIBALD: Yes. So you can do-- if you're fetching
one thing, you don't need permission, because
the idea is it's super visible. Like, it's in the
notification tray. You can cancel it from there. So-- SURMA: But if it's
multiple thing grouped into one notification,
it's a bit diff-- OK, I see that. JAKE ARCHIBALD: So it's the
same pattern as proper downloads from a website. You can start one of those
without any permission. If you try and do
multiple at once, it will ask for permission. SURMA: OK. So will the download total
get automatically corrected in case I provide a wrong value? JAKE ARCHIBALD: No. It will be enforced. So this is one of the things
we wanted with the API. SURMA: Oh-oh! JAKE ARCHIBALD: If you
say, this is 10 megabytes, and you go beyond 10 megabytes,
then you get canceled. SURMA: OK, what if
I give too much? JAKE ARCHIBALD: If you provide
a download total that's higher than what
it turns out to be, the progress bar will get
to 80%, and then it's done, and you're fine. So it's not an error. SURMA: Interesting. JAKE ARCHIBALD: So if you're
unsure about the download total going-- SURMA: Be conservative and-- JAKE ARCHIBALD: Yes. But the idea behind this is
we want to show the user-- because if they look at that
notification and it says, this website is downloading-- SURMA: You might
be using their-- JAKE ARCHIBALD: --10 megabytes,
you think, I'm fine with that, you don't want them to end up
actually using 500 megabytes. SURMA: Yeah, because they might
be on their mobile plan, not Wi-Fi, right? JAKE ARCHIBALD: Yep. All of these are optional. If you don't provide
a download total, you get an indeterminate thing. [INAUDIBLE] SURMA: Oh, but that's OK? JAKE ARCHIBALD: It
is OK, but the idea is, if the site's not going
to tell you how much it's going to download, the user's
more likely to cancel it, because they're like, well, I
don't know what this is doing. I'm not getting any promises. SURMA: So what's the name for? JAKE ARCHIBALD: For
getting it later on. SURMA: Ah! OK. JAKE ARCHIBALD: So you get back
a backgroundFetch registration object. I don't actually have
the-- they didn't do a code slide for this, but you can do
swReg at backgroundFetch.get. You pass in an ID, you
get the registration back. And once you have
the registration, you can start doing
things like this. SURMA: So wait, what is bgFetch? JAKE ARCHIBALD: So
that is bgFetch here. SURMA: Oh, sorry. JAKE ARCHIBALD: This is
the registration object. So it's the same deal. SURMA: That is the registration? So a new fetch returns
your registration object? JAKE ARCHIBALD: Yes. SURMA: Not like-- a normal
fetch would return a response. This one gets you a
registration object, because progress is
probably much more important in a long-running
fetch scenario. JAKE ARCHIBALD: Yes, it is. And this is like a
grouped progress as well. It's for the whole thing. So you get these-- it's very similar
to how XHR works. But this will also give you
things like .ID which is the ID you've already provided. SURMA: Yeah. JAKE ARCHIBALD:
Things like .Abort, that you can cancel
it from code. SURMA: Oh, that's good. Yeah, because you might want to
build your own UI for canceling it, right? JAKE ARCHIBALD: Exactly. SURMA: But you
have in your thing. JAKE ARCHIBALD: Exactly. SURMA: Can it also do upload? JAKE ARCHIBALD: That's
a good question. Not in Chrome right now. SURMA: Because one of
the biggest issues in-- or long-running issues--
that fetchUpload still doesn't have progress,
and you always have to go back via either XHR
or do a weird second channel to the server that reports back
how much has been uploaded. So I feel like this
would be a good fit. JAKE ARCHIBALD: Chrome's
current implementation doesn't support request with
a body, but the spec does. Because one of our use cases is
uploading a gallery of photos. SURMA: Yeah. Or just like a bigger
profile picture. JAKE ARCHIBALD: And
so you want to hit Send, put the phone in
your pocket, don't care. And you could set all
that up when you're in airplane mode or offline. And it will just
figure stuff out. SURMA: That's going to be
interesting, because I think resumable uploads are tricky. JAKE ARCHIBALD: Resumable
uploads are not in the spec, and it's one of the things that
me and a couple of engineers might look at next year. SURMA: Ah! JAKE ARCHIBALD:
And that would be-- SURMA: 2019, the year
of resumable uploads. JAKE ARCHIBALD: Yeah, maybe. So as well as
progress, you get-- this is on the same
registration objects. You can match things. This is very similar to-- SURMA: Meaning I can
look into the record of an individual file of
a grouped download thing? JAKE ARCHIBALD: Yes. So this is me
getting the podcast. It will resolve as
undefined if it's not there. Then you get a
responseReady, which is another promise
for the response. Because you might not
have the response yet. SURMA: No, true. JAKE ARCHIBALD: And the response
might even fail to arrive. SURMA: If you queue
up 1,000 files and you match on the last one-- JAKE ARCHIBALD: Exactly. Exactly. But this will give you an
in-progress response as well. SURMA: Ah, neat. JAKE ARCHIBALD: So the idea is
as you're downloading the MP3, you could start playing it. But that bit's not
supported in Chrome yet. SURMA: Can I add access
to the streams as well? JAKE ARCHIBALD: Well,
the response will-- SURMA: Oh, it would
be a Response object. JAKE ARCHIBALD:
So responseReady. SURMA: So the
responseReady says, the same as in Fetch,
the headers have arrived, but the body might
still be in progress. And it can start and-- JAKE ARCHIBALD: Exactly. SURMA: OK, that's cool. JAKE ARCHIBALD: Exactly. Exactly that. So this is all stuff
you can do on the page. But this is what happens
in a service worker. You get top-level events,
backgroundfetchsuccess. SURMA: So I get to blame
you for this event name. JAKE ARCHIBALD: Yes, you do. I originally called it
backgroundFetched just to try and be short, but
people said that's weird. And I can see where
they're coming from, especially because we've got-- SURMA: Why not bgFetch
as the success? JAKE ARCHIBALD: We've
shipped now, mate. SURMA: [LAUGHS] JAKE ARCHIBALD: Not changing it. SURMA: I've been told that as
long as only one browser has it, you can still change stuff. JAKE ARCHIBALD: Yeah. And it's not in stable yet. So-- SURMA: This doesn't minify. It's a string. JAKE ARCHIBALD: Well, it will
gzip with the other-- only-- actually, there will
only be one of them. Actually, you'll have
backgroundfetchfailed and backgroundfetchabort
as well. They're the three events you
get in your service worker. SURMA: I'll open an
issue on the spec. JAKE ARCHIBALD:
Thank you for that. Thank you. SURMA: [LAUGHS] JAKE ARCHIBALD: So this is-- you get the registration object. SURMA: Yup. JAKE ARCHIBALD: And that's the
same that we started before. SURMA: Oh, now,
that's the same-- OK, cool. JAKE ARCHIBALD:
And this is where-- backgroundfetchsuccess-- after
this event, those requests and responses are gone. SURMA: Ah. So it's your responsibility
to put them in the cache. JAKE ARCHIBALD: Exactly. So this is what I'm
essentially doing here. And this is one of
the things we're thinking about making a helper
method for-- for, like, put these in that cache. SURMA: Yeah. I mean, we already
have cache.AddAll. JAKE ARCHIBALD: Yes, but
that takes just requests. SURMA: I know but I feel
it's a similar helper method on a cache-- JAKE ARCHIBALD: A PutAll. SURMA: Yeah, something. JAKE ARCHIBALD: Or
some kind of transfer. Yes, that is what
we're thinking. SURMA: That seems reasonable. JAKE ARCHIBALD:
Because we also think it might be difficult
for browsers to do this without copying. And so I transfer the rest. Yeah. SURMA: So if we
think along videos, where they can be split
into multiple files and they're probably quite big-- JAKE ARCHIBALD: Yes. SURMA: --what's the story
there with Cache API? Because I feel like I would get
wary about quotas and things. JAKE ARCHIBALD: Well,
if you've got it here, you're taking a quota anyway. SURMA: OK. JAKE ARCHIBALD: So as long
as we can implement this without copying, you're
not doubling the quota. That's why we're thinking
about introducing a transfer method-- to make it
easier for browsers to do that shift rather
than it be a copy operation. SURMA: I mean, this is
something you probably don't want to just easily
lose, because the browser needs to claim space. It'll probably be
a good case also to look at Persistent Storage
API, whatever it's called? JAKE ARCHIBALD: That is what
I'm using in the HTTP203 app as well. SURMA: Oh, cool. JAKE ARCHIBALD: So if you've
been added to the home screen, or bookmarked, or there's
been a strong signal of usage, you can ask for persistent
storage, and you'll get it. The thing-- it's
worth just asking for. And if you don't
get it, it's fine. SURMA: [LAUGHS] JAKE ARCHIBALD: So
another part of it. And this is the last bit. SURMA: backgroundfetchclick? JAKE ARCHIBALD:
backgroundfetchclick. This is-- SURMA: Ooh, let me guess. When you tap on a notification? JAKE ARCHIBALD: When you
tap on a notification? SURMA: Yes! JAKE ARCHIBALD: And so again,
you get the registration, and you can decide
what to do based on maybe how the
background fetch is doing. SURMA: I've never
used the clients, dot thing to open something. I need to look into this. But this is really cool. So you get to decide how
you react to a click. And apparently,
you're deciding what to do depending on whether
the download is done or not, which is cool. JAKE ARCHIBALD: Yes. Exactly. Because if it's successful, we
can go to the latest podcast. If it's not successful or-- so this would be if it's in
progress or it has failed. Just go into the
Download screen, and presumably, you would have
an error there or something, maybe. I don't know. SURMA: All right, cool. JAKE ARCHIBALD: I was just
kind of making this up. But yeah. And so as a result, this
is what you get for that-- this kind of download
system, where you can just sort of
click a load of stuff, and it will just happen. And if the tab closes,
if you're offline when you press these things,
it will still work. SURMA: You said in
Canary behind a flag? JAKE ARCHIBALD: It's in
Canary behind a flag, and we are going to move
to an origin trial for it. SURMA: Ooh-ooh. JAKE ARCHIBALD: So the
details-- we'll have it soon. SURMA: Do we have an article
on this, by any chance? JAKE ARCHIBALD: I have it
ready to land at some point. It might have landed by the
time this video comes out. SURMA: You will find out
by looking in the notes. JAKE ARCHIBALD: In which case,
there'll be a link down the-- what's that bit? SURMA: [INAUDIBLE]. JAKE ARCHIBALD: Below our faces. SURMA: The [INAUDIBLE]? Yeah. Also, [INAUDIBLE] appreciating
this nice Parallax. Ooh! JAKE ARCHIBALD: And yes,
we'll link to an article of how to do that as well. SURMA: [LAUGHS] JAKE ARCHIBALD: Brilliant. We could cut out how long
this is taking to connect. SURMA: Oh, look, it's
blazingly fast to connect. I mean, it's just an
authentic experience. Is it kicking you out? JAKE ARCHIBALD: There we go. Connected, no internet. Come on, figure it out. Figure it out. Figure it out. Come on. SURMA: Ey! JAKE ARCHIBALD: Ey, that's good. Right.
