Going Big: PWAs Come to Desktop and Chrome OS (Google I/O ’19)
Going Big: PWAs Come to Desktop and Chrome OS (Google I/O ’19)
Progressive Web Apps aren’t just for mobile any more, they make it possible to deliver high quality, capable apps on Windows, Mac, Linux and Chrome OS. We’ll dive into the key things you need to know about how to build them, some of the unique features they offer, best practices you should be following, and how some of our favorite desktop PWAs were built.
Watch more #io19 here:
Web at Google I/O 2019 Playlist → https://goo.gle/io19web
Google I/O 2019 All Sessions Playlist → https://goo.gle/io19allsessions
Learn more on the I/O Website → https://google.com/io
Subscribe to the Chrome Developers Channel → https://goo.gle/ChromeDevs
Get started at → https://www.google.com/chrome/dev/
Speaker(s): Paul Covell, Dominick Ng
TBA2A9 event: Google I/O 2019; re_ty: Publish; product: Chrome - General; fullname: Paul Covell, Dominick Ng;
Content
1.43 -> [Music]
3.65 -> good morning and welcome also to our
6.6 -> live streaming audience it may not be
8.849 -> very early where you are so thank you my
11.67 -> name is Paul I'm a product manager on
13.2 -> Chrome and I'm Dominic a software
16.08 -> engineer on Chrome we're here from
18.51 -> Sydney Australia today
20.039 -> are there any Australians in the room ah
24.529 -> terrible why aren't we all here in in
27.75 -> person well but before we get started
30.539 -> let's do a bit of a show of hands how
33.12 -> many of you here have heard of
34.35 -> progressive web apps Oh
37.02 -> almost everyone fantastic and how many
39.719 -> of you have actually built a progressive
41.55 -> web app Oh fantastic getting to half I
44.67 -> think great so for those of you familiar
46.739 -> with progressive web apps already we're
49.14 -> gonna show you some of the things we're
50.219 -> really excited about both what's
51.809 -> happening now but also what's coming
53.52 -> down the pipe in the roadmap if you're
55.68 -> new and you're thinking what's all this
57.51 -> fuss we'll try to explain we talk a lot
62.94 -> about how the web is universal and that
64.949 -> could mean a lot of things but what we
67.83 -> mean today is that anyone can publish
69.659 -> and anyone can access content on the web
72.24 -> you don't need to be well-known or
74.46 -> wealthy and it doesn't matter what
76.59 -> device is your end-users are using and
79.13 -> this was true in the beginning when
81.299 -> websites were basic static and images
84.509 -> and text but what's really interesting
86.939 -> is that it's remained true today
88.86 -> even as we have expanded the
91.229 -> capabilities of the web to do things
93.329 -> like rich media streaming interactive
97.1 -> graphics and really full web apps you
101.28 -> could still more or less create at once
103.829 -> and your users can consume it anywhere
106.02 -> on any device they happen to have this
109.079 -> is really important as devices have
112.979 -> really proliferated and exploded so as a
116.6 -> developer today you don't really have to
119.759 -> think about the number of people and all
124.829 -> the different details that happen when
126.509 -> your website goes out and people consume
128.28 -> it anybody can really access it you've
130.11 -> got hundreds of vendors
132.319 -> hundreds of form factors all sorts of
134.48 -> different geographies and industry niche
135.98 -> it just works
138.04 -> but there's one area where this really
140.06 -> isn't true today and that's applications
141.95 -> if you're building an application you
144.26 -> still have to think about which platform
146.269 -> it's going to be used on and you have to
148.04 -> develop it once for every major platform
150.189 -> so one of our big questions here was why
153.709 -> should this universality only work for
156.65 -> websites why can't we bring this
159.379 -> functionality to applications so that as
161.81 -> a developer you can make your
163.489 -> application once and have it run on all
165.95 -> these different devices so what all the
169.129 -> fuss is about is we'll talk today about
171.169 -> how that's really starting to happen and
172.909 -> we're really excited about that but
175.129 -> before we can really talk about
177.409 -> applications we need to we need to look
179.599 -> at what that word means and we get this
181.159 -> question a lot people come up to us like
183.409 -> great progressive web apps so what's an
184.79 -> app and everybody has their own angle on
186.65 -> it so just to sort of put a stake in the
190.159 -> ground will tell you what we look at as
192.47 -> an application so we take a step back
194.93 -> and look at the web the web does a lot
196.579 -> of application like things Gmail and
199.069 -> maps brought rich web apps more than ten
202.37 -> years ago
202.879 -> and fifteen years ago and ever since
206.659 -> then the valley and unicorns around the
209.449 -> world have really leveraged this to
210.919 -> build build their businesses rich web
214.099 -> applications amazon.com Facebook all
216.919 -> these things so today it's a huge part
219.68 -> of the tech industry but they still
221 -> don't feel like an application they
223.31 -> don't feel like a Photoshop or a word so
227.06 -> why is that if we put apps up next to
231.859 -> what we sat on the web they stand apart
233.629 -> in a number of ways you can launch them
236.449 -> from an icon on your desktop you can
238.729 -> launch them when you double-click the
239.989 -> right kind of file when you launch them
242.479 -> they open in their own window and that
244.579 -> window has a consistent UI that really
247.519 -> makes it feel like one person designed
249.259 -> it it can start up offline sometimes
252.59 -> they don't do much after they start up
254.18 -> but they can always start up and they
256.759 -> can take advantage of all of the cool
258.32 -> tech in the latest devices fingerprint
260.389 -> readers and new accelerometers and all
262.01 -> that stuff
262.669 -> so when we look at applications
265.66 -> these are the kinds of characteristics
267.16 -> that we think matter and our goal is to
270.76 -> bring those capabilities to the web
272.44 -> directly using pwace we want to break
276.04 -> the web out of the browser so that it
278.38 -> can deliver this app-like behavior we're
281.89 -> not really alone in trying to crack this
283.36 -> problem if you look at technology
285.4 -> architectures like electron like Cordova
288.04 -> like react native this is a common kind
290.65 -> of desire how can I use this web
292.21 -> technology to build native apps PW
295.66 -> always take this idea just one step
297.19 -> further and actually build this directly
299.86 -> on the web we want to bring users the
305.29 -> best of both worlds
306.49 -> and we want to make it so that you spend
308.38 -> less of your time but sing with
309.82 -> different platforms and more of your
311.77 -> time and effort on making your users
314.26 -> happy so how's that working out so far
316.63 -> DOM is gonna bring us up to speed thanks
319.93 -> Paul let me take you back a few years to
323.71 -> the start of our journey with PW A's on
326.32 -> Android in 2015 in a mobile first world
330.13 -> the mobile web was in a particularly bad
332.8 -> way and users had clearly shown that
335.47 -> apps were their preferred medium on an
338.08 -> increasingly preferred device three key
343.3 -> properties really stood out about apps
345.85 -> on mobile firstly they often had a far
349 -> superior UI that was built with the
351.43 -> device and touch interaction model in
353.77 -> mind next on devices where typing was
357.13 -> difficult having a homescreen launcher
359.71 -> icon for instant easy access was a
362.8 -> paramount importance and finally deep
366.13 -> system integration having the app show
368.83 -> up in places like share sheets app lists
371.8 -> and settings was necessary to make an
374.65 -> app feel well like an app those last two
378.97 -> in particular are two of those
380.56 -> superpowers that we just highlighted so
385.03 -> we leant on progressive web apps as a
387.07 -> vehicle to level the playing field for
389.56 -> the mobile web we focused on encouraging
391.96 -> developers like yourselves to build
394.33 -> touchable mobile first responsive
396.91 -> experiences to address the UI gap
399.669 -> we went to work fixing the system
401.409 -> integration ensuring that installed
403.719 -> pwace interacted seamlessly with Android
406.749 -> and other apps we worked on lots of the
409.599 -> little details making sure that the app
411.669 -> launched properly from push
413.11 -> notifications or from web links from
415.569 -> other apps since then our core goal has
420.069 -> been to use PWS to allow you to build an
423.969 -> experience that's indistinguishable from
426.4 -> native we've definitely got a lot of
429.4 -> areas to improve on but our work has
431.74 -> really paid off in adoption user
434.02 -> engagement and developers success fast
437.02 -> forward to today all major mobile
439.21 -> browsers support PWA installation even
442.509 -> ios now we'll focus mostly on desktop
447.159 -> for the rest of this talk but if you
449.02 -> want to hear more about the latest on
450.699 -> pwace on android you should check out
453.069 -> the talk at 12:30 on stage eight taking
456.009 -> chrome fullscreen with trusted web
458.05 -> activities back to the history while
462.759 -> mobile is now a dominant consumption
464.71 -> platform desktop remains the dominant
466.87 -> creative platform we knew that
469.479 -> transforming that success on mobile to
472.12 -> success on desktop would require
474.039 -> significant additional investment well
477.069 -> we made that investment and we're
479.349 -> excited to announce that as of March
481.149 -> this year we now support installing
483.879 -> progressive web apps and running them as
485.77 -> standalone app experiences on all Chrome
488.649 -> platforms
496.65 -> Chrome OS was the first desktop platform
499.36 -> to get support in early 2018 we took the
502.54 -> time to reimagine the UX for desktop
504.79 -> settling on a themed title bar a 3.9 you
508.03 -> to access useful browser functionality
510.54 -> and the title bar serves as a security
514.09 -> surface for us where we can disclose
516.099 -> things like permission usage and anchor
518.349 -> prompts for features like autofill and
520.3 -> translate we followed Chrome OS with
524.26 -> Windows and Linux support in late 2018
526.8 -> for both of those we retained the title
529.45 -> bar design with the window controls
531.52 -> matching the style of the host OS with
534.82 -> Linux showing the app icon in the title
537.67 -> bar and Mac support was shipped in March
541.36 -> this year with the familiar left-aligned
543.4 -> traffic light window controls and
545.26 -> centered app title now it's possible to
550.839 -> do things like this
551.98 -> here you see Sketchup web a 3d modeling
555.73 -> tool running as an installed PWA and
558.76 -> looking native on all three desktop
561.49 -> platforms one code base we're really
567.28 -> excited about the possibilities that
569.11 -> this opens up for all of you the web is
572.14 -> no longer confined to the browser but
574.6 -> open as an app platform where you can
576.91 -> make native experiences available right
579.28 -> once run anywhere let's make this a bit
584.77 -> more real I'm gonna walk through an
586.87 -> introduction to the key ingredients of
588.88 -> progressive web apps for many of you
591.37 -> who've built them before this is going
593.35 -> to be familiar and for those of you who
595.42 -> are new to pwace it'll hopefully give
597.76 -> you a great starting place to build on
601.5 -> but if you take nothing else away from
603.82 -> this talk just take this PWA s are just
608.44 -> websites with a few additional pieces
612.93 -> being websites they should work
615.55 -> perfectly well in the browser any
617.86 -> browser and being the web these
620.65 -> additional pieces also work in the
623.29 -> browser users should never have to
625.6 -> install a PWA
627.34 -> in order to use its capabilities but
630.55 -> taken together these additional pieces
632.65 -> are the progressive in progressive web
635.08 -> apps the ability to be installed to
637.75 -> function while offline and to access the
640.12 -> api's and operating system integrations
642.82 -> that create a compelling app experience
647.339 -> even better these pieces all the code
650.95 -> that I'm about to show you works on
653.05 -> mobile and desktop the look and feel is
656.14 -> tailored to the platform but it's the
657.94 -> exact same code cross platform and cross
661.089 -> browser and that's really the power of
663.4 -> the web why we do what we do we might
667.18 -> take a little longer on the web platform
668.62 -> to deliver capabilities and integrations
671.5 -> but when we do it it's done universally
676.38 -> so let's start with the first puzzle
679.21 -> piece the web app manifest this is a
682.96 -> JSON file linked from your pages header
685 -> element it provides application metadata
687.94 -> that's used for a variety of purposes
690.9 -> note that we usually expect the manifest
694.03 -> to be retrievable without needing to
696.1 -> attach credentials to the request if
698.47 -> that's not the case for you you'll want
700.42 -> to add the cross origin attribute to
702.43 -> your manifest declaration and that will
704.47 -> cause the browser to make a credential
706.03 -> request for the manifest that attaches
708.19 -> things like cookies here's an example
712.57 -> manifest that our team built for
714.58 -> squooshed app it's an image compression
717.07 -> PWA that lets you access all of the
719.62 -> advanced options offered by native image
722.32 -> compressors but right in the browser
724.29 -> meaning that you can use it anywhere by
727.75 -> the way if you drop by the web sandbox
729.97 -> you can see screw in action and hear
732.43 -> about how it was built or just visit
734.74 -> squish dot app if you're following along
736.78 -> on the live stream let me highlight a
740.26 -> couple of the key fields in here
741.91 -> the name start URL and icons members I
745.779 -> used to create the launcher shortcut for
747.97 -> the app and the display member tells the
750.91 -> browser how the app should be open when
753.52 -> it's run by specifying standalone this
756.61 -> requests an app window that's
758.65 -> independent of the browser
760.77 -> there are a few other display modes
762.27 -> available but standalone is the one
764.22 -> you'll likely want for your PWA to make
769.74 -> it a bit more real here's the launcher
772.08 -> icon in the Applications folder and in
774.45 -> the dock on a Mac after I've installed
776.64 -> squish top and then when I use one of
779.37 -> those to launch it it's gonna open that
781.5 -> start URL in its own app window this
787.08 -> theme color member provides the color
788.79 -> for the app title bar when it's launched
791.19 -> on both mobile and desktop
793.37 -> that's this orange bar at the top of the
796.649 -> window here and that's going to give
798.3 -> your app a distinctive on-brand
800.07 -> experience but don't worry if you omit
802.92 -> the theme color the browser is going to
805.17 -> choose a neutral color that fits into
807.209 -> the OS theme for you
808.44 -> and finally the scope determines the
812.97 -> extent of the app this is important for
816.24 -> accurate link capturing behavior where
819 -> the browser can intercept navigations
820.98 -> that fall within the scope of your app
823.38 -> and then redirect those links to open in
826.709 -> your app window I'll talk a little bit
829.5 -> more about link capturing and what we're
831.029 -> doing there later in the presentation
833.54 -> now we're continually adding new members
836.73 -> into the web app manifest to help define
838.95 -> new functionality but what's really
841.05 -> exciting is that as of 2018 last year
844.29 -> all major mobile browsers now respect
847.2 -> the web app manifest for their add to
849.45 -> homescreen
850.05 -> functionality and we're seeing an
852.149 -> increasing number of desktop browsers
853.98 -> doing the same as well here I've got a
858.57 -> screen shot of duo hour video calling
861.12 -> PWA
862.079 -> running in a standalone app window on
864.75 -> Chrome OS you can see they've used a
867.51 -> neutral theme color and the app icon
869.76 -> appears as the running app in the Chrome
872.25 -> OS shelf now let's move on to Service
878.22 -> Worker this is the secret source for
880.709 -> offline a lightweight network proxy that
884.31 -> intercepts Network requests and provides
886.68 -> cash resources should those network
888.99 -> requests fail this is the technology
892.11 -> that truly allows website
894.54 -> to break out of that online sandbox and
897.12 -> work seamlessly offline
898.86 -> technology that lets your website's
901.56 -> always be apps and not turn back into a
904.89 -> web browser tab when the network is down
908.45 -> the advent of serviceworker represents a
912.03 -> fundamental shift in how you should
914.4 -> think about architecting your websites
916.74 -> and your web apps offline first rather
920.07 -> than online first we've seen time and
922.92 -> time again that building your app from
924.96 -> the ground up with offline in mind works
927.33 -> way better than trying to retrofit
929.28 -> offline functionality after the fact and
932.36 -> just like the web app manifest all major
935.55 -> browsers now ship full support for the
938.28 -> serviceworker api there is no reason for
941.7 -> modern web apps to not be built offline
944.64 -> first just like native apps using
948 -> service workers let's dive into what
950.43 -> that looks like I'm going to walk
953.25 -> through how you can use serviceworker to
955.59 -> provide a simple offline fallback page
957.63 -> in place of Chrome's offline page this
960.66 -> is an easy way to keep showing users
962.4 -> your themed app UI when the network
965.07 -> isn't available first we wait for the
968.94 -> page load event to register a
970.8 -> serviceworker and that's to make sure we
972.93 -> don't block the page load once
976.53 -> registration is complete the commands in
978.96 -> the serviceworker dot JS file are going
981.27 -> to be run you can specify an optional
984.09 -> scope for the serviceworker that denotes
986.79 -> the extent over which the serviceworker
988.65 -> has controlled the navigations that it's
991.41 -> going to be intercepted this should
995.04 -> definitely match the scope in the
996.93 -> corresponding web app manifest file to
999.54 -> ensure that the serviceworker controls
1001.37 -> all of the URLs in your app so let's
1006.92 -> move on to the serviceworker j/s file in
1009.41 -> here we wait for the install event to
1012.44 -> fire and note that this doesn't have
1014.36 -> anything to do with installing your PWA
1016.73 -> we're going to get to that in a moment
1018.04 -> this just means that the serviceworker
1020.63 -> is ready to go at this point we can
1023.96 -> create an offline cache using the cache
1026.39 -> API
1028.069 -> you'll notice that I've versioned the
1030.39 -> cash name so we can easily invalidate it
1032.85 -> should the content become out-of-date so
1036.929 -> once we have a cache open we just pass
1039.659 -> it a list of the URLs we want cached and
1042.449 -> then we will the cache will go and fetch
1045.209 -> those and store them ready for use later
1048.44 -> the cache itself Maps keys of requests -
1051.96 -> values of responses in this example I
1055.049 -> only need to cache the one page because
1057.27 -> the entirety of that page assets Styles
1060.45 -> contents and scripts they're all
1062.399 -> contained in that one HTML file in Lyon
1064.89 -> and no other network requests will be
1067.169 -> made whilst loading so now we've got
1071.669 -> that page cached we need to ensure that
1073.71 -> we retrieve and serve that page when the
1076.559 -> network is down and we do that with a
1078.75 -> fetch event listener which will be fired
1080.789 -> for every Network request made by your
1084.029 -> site this allows the service worker to
1086.76 -> intercept all those Network requests and
1089.46 -> substitute them if necessary
1091.46 -> now I've emitted a couple of details in
1094.2 -> this example that you'll want to look at
1095.88 -> like patient validation and navigation
1098.34 -> preload to ensure good performance so
1103.049 -> when that fetch event fires we're going
1104.94 -> to use a network first strategy in this
1106.649 -> example we're going to respond to the
1108.539 -> fetch event by calling the fetch method
1110.61 -> and that sends the request to the
1112.59 -> network should that Network request fail
1116.37 -> we'll catch the error open up our cache
1119.549 -> and serve the offline page that we
1122.13 -> stashed earlier ensuring that the user
1124.169 -> is presented with app themed UI at all
1127.11 -> times now this is an incredibly simple
1130.62 -> example of our flying support it is the
1132.63 -> bare minimum that you can do we're not
1135.09 -> even bothering to cache specific
1136.86 -> resources just a single page to display
1139.409 -> when the network is not available you
1142.35 -> can and you should do a lot more and
1145.08 -> many of our partners have done so
1146.85 -> creating cache first loading strategies
1149.46 -> where important content is always
1151.71 -> available and important user journeys
1154.049 -> are always accessible no matter the
1156.51 -> network status buffering new navigations
1159.6 -> for syncing with the server
1161.639 -> later on now serviceworker is an
1165.869 -> extremely low-level api you probably
1168.899 -> want to avoid writing all of this
1170.669 -> caching yourself if you can avoid it and
1172.649 -> of course being the web there are plenty
1175.589 -> of libraries to help you out one that we
1178.259 -> really like is work box which wraps the
1180.899 -> serviceworker api and protects you from
1183.269 -> some of the dark corners and sharp edges
1185.519 -> and it also means you can avoid having
1187.829 -> to write your caching file by file and
1190.679 -> instead use capsule routing paths here's
1193.919 -> an example of how powerful and flexible
1195.539 -> work box can be I'm using the routing
1199.229 -> library to specify that CSS files should
1202.049 -> be cached with a stale while revalidate
1204.539 -> strategy that means that when we load a
1206.909 -> CSS file we race the network and the
1209.789 -> cache and whichever one gets back first
1211.889 -> we send that response straight on
1213.839 -> through the first time the network is
1216.389 -> going to win because the cache is empty
1217.739 -> but then that requests will be
1220.19 -> transparently and immediately saved in
1223.109 -> the cache and from that point on it'll
1225.539 -> be available offline you can find out
1229.499 -> more about work box at work box jeaious
1231.929 -> org it really makes developing powerful
1235.049 -> offline capable Web Apps easy and Paul
1237.749 -> is going to show us one in action so
1243.45 -> we've actually started to use these
1245.099 -> pwace to ship some of our core apps in
1247.379 -> Chrome OS and we use some of the goodies
1249.929 -> that Tom mentioned this application uses
1252.419 -> work box and web assembly so I recorded
1255.179 -> a video of canvas this is our drawing
1257.369 -> app to show you how it can work
1258.929 -> completely offline so this drawing was
1261.959 -> done by a colleague of mine
1263.419 -> using this app when I was planning the
1266.19 -> talk I asked around to see if we had any
1267.959 -> cool illustrations that we could use I
1270.899 -> was expecting something living up to my
1272.609 -> high standard it's like a box or a
1274.32 -> circle but this is what I got so this is
1280.349 -> what we're gonna go with so in this
1282.69 -> video first I turn off the Wi-Fi and you
1285.329 -> can see you know that once I turn that
1288.869 -> off there will be no more network
1290.789 -> connectivity and then the artist uses
1293.639 -> the stylus
1295.13 -> chroma was tablet to sign his name and
1297.65 -> the key thing here is he didn't know
1300.02 -> anything about the offline status he
1303.14 -> doesn't care whether it's connected or
1304.58 -> not he just uses the app the same way
1306.41 -> regardless and the service worker syncs
1308.9 -> it up next time the device connects
1314.02 -> thanks Paul
1315.44 -> so once you've got a web app manifest
1317.39 -> and an offline enabled experience
1319.88 -> powered by service workers you can add
1322.37 -> your own UI to prop users to install
1324.83 -> your PW a turning it from a website into
1328.37 -> and install that we strongly recommend
1331.82 -> taking advantage of this on desktop app
1335.48 -> discovery still overwhelmingly runs
1338.03 -> through search and download links
1341.23 -> replacing those download links with a
1343.7 -> PWA installation prompt allows for a
1346.7 -> smooth seamless installation experience
1349.58 -> and transition into an app window for
1352.46 -> your users and means you're not relying
1354.56 -> on users finding the browser's own
1356.87 -> installation prompts installation is a
1361.61 -> powerful operation since it gives your
1363.5 -> site a permanent presence in the user's
1365.78 -> launcher so when your site loads in the
1368.21 -> browser Chrome run some checks to
1370.55 -> determine if you're eligible to prompt
1372.44 -> for installation now your site needs to
1374.99 -> be a PWA
1375.89 -> so have a manifest have a serviceworker
1378.29 -> with offline functionality and you'll
1380.66 -> also need to have seen some user
1382.46 -> engagement since installation prompting
1384.71 -> shouldn't just happen the first time a
1386.96 -> user visits your site when your site
1390.68 -> passes those checks which could be run
1392.87 -> dynamically through the lifecycle of the
1395.15 -> current page load the before install
1397.43 -> probe devan will be fired into your
1399.5 -> top-level frame you'll need to add a
1401.51 -> listener for this event on your window
1403.52 -> object first up that event handler needs
1408.29 -> to stash the event away somewhere that's
1410.66 -> accessible later since you'll need to
1412.67 -> call the prompt method on the event to
1415.73 -> actually trigger installation putting
1418.79 -> the method on the event ensures that the
1420.86 -> user can't get an installation prompt
1423.11 -> unless the browser has verified that the
1425.66 -> site is eligible
1427.909 -> before install prompt firing is your cue
1431.329 -> that you can enable UI in your app to
1434.629 -> ask the user to install for this simple
1437.809 -> example
1438.379 -> I'm just activating a disable
1440.569 -> installation button when the event fires
1442.849 -> but more broadly an installation prompt
1445.879 -> usually works best if you have some UI
1448.549 -> to tell the user what's going to happen
1451.429 -> if they choose to install and we've got
1453.799 -> a demo of what a good example of that
1455.359 -> looks like coming up in just a moment
1458.589 -> finally we wire up a click listener on
1461.659 -> that now activated install button that
1464.449 -> calls the prompt method on the stashed
1466.399 -> event this is what triggers the browser
1469.039 -> to show the installation prompt without
1472.519 -> that click which signifies user intent
1475.549 -> the prompt method is going to reject and
1478.159 -> not show an installation prompt the
1481.669 -> event also has a user choice promise
1484.009 -> member that will resolve with the users
1486.139 -> response to the prompt whether they
1487.999 -> accepted installation or not another
1492.739 -> useful event to listen to is the app
1494.779 -> installed event which will be fired if
1497.209 -> the app installation is triggered and
1499.149 -> successful from any source now that
1502.129 -> includes before install prompt but also
1504.919 -> mechanisms that the browser might offer
1506.959 -> such as the three diet menu prompt so
1512.989 -> you can see this come together in a few
1514.399 -> mainstream apps I music Spotify on my
1517.19 -> Chromebook here and you can see that
1519.019 -> there's an install app link on the left
1521.569 -> hand navigation when I click it you see
1524.809 -> the familiar confirmation dialog and
1526.699 -> then boom it's installed in my launcher
1531.319 -> and in its own window
1539.64 -> so this is this is you can see thank you
1543.809 -> Spotify you can see this is this is how
1546.99 -> you can actually integrate these before
1549.45 -> install prompt events that dom is
1551.22 -> talking about to encourage your users to
1553.62 -> install at the right time now one thing
1557.429 -> that that was really is visible in that
1559.83 -> earlier video but you'd have to really
1561.45 -> be looking for it to see is this little
1563.94 -> plus in the omnibox so this is a feature
1566.73 -> coming in early August with chrome 76
1569.4 -> that we're super excited about this
1572.34 -> means chrome will actually promote your
1574.11 -> PWA
1574.83 -> in its most prominent UI space in the
1577.62 -> omnibox this uses the same trigger as
1580.799 -> the before install prompt event but you
1583.919 -> don't need to do any coding to get it
1585.57 -> it's just intended to be subtle and
1587.58 -> clear this website is also an app that
1590.37 -> you can install so let's see how that
1593.79 -> works
1594.48 -> in this video I'm installing the PWA up
1596.82 -> duo which you saw earlier you can see
1599.34 -> how it works with just a couple of
1600.75 -> clicks and really no download time I
1603.21 -> have an app in its own window and I can
1605.37 -> use it to make a call so now that you've
1613.47 -> seen the technology in action let's look
1615.27 -> at how it can impact your users and your
1617.04 -> business Hulu is a popular streaming
1620.73 -> platform here in the US you can watch TV
1623.669 -> and movies at home on your big screen or
1625.919 -> on-the-go on your phone or laptop if you
1628.77 -> were a Hulu user with a Windows machine
1630.69 -> you could use their native app but their
1633.54 -> native F had four user reviews and poor
1635.669 -> usage and Hulu started thinking about
1637.65 -> how to fix it they already had a
1641.16 -> world-class web experience what did they
1643.799 -> decide to do you guessed it
1646.71 -> they built a PWA so here you can see the
1651.39 -> Hulu PWA installed in Chrome OS on
1653.94 -> tablet mode it looked good so they
1656.669 -> launched it within three months
1658.77 -> 96% nearly all of their legacy app users
1662.04 -> had switched to using this instead so
1664.62 -> far so good
1665.49 -> even better compared with the website
1667.95 -> Hulu saw the users who installed the
1670.55 -> we're coming back to it more and they
1673.73 -> were watching more videos a whole lot
1678.38 -> more in fact it's still early in our
1681.14 -> experience here with PW A's but this
1682.97 -> does fit the pattern that we're seeing
1684.59 -> because it's in the launcher it's easier
1687.68 -> to remember and more natural return to
1690.41 -> this experience it's also an immersive
1693.19 -> fullscreen experience so if you're
1695.78 -> engaged in the activity you're more
1697.25 -> likely to keep doing it so if you have
1700.16 -> dedicated repeat users on your website
1703.31 -> this same pattern might hold for you
1708.43 -> thanks Paul just some amazing numbers
1711.02 -> therefore for Hulu so it's really
1714.44 -> impressive what the app like web can do
1717.17 -> today cross-platform cross browser from
1720.53 -> one code base now I was talking to some
1724.55 -> folks around IO this week and some of
1726.95 -> them were really surprised to learn that
1728.69 -> the web could already do a lot of these
1730.28 -> things access camera and microphone API
1732.95 -> is use USB and Bluetooth devices or run
1736.25 -> cross-compiled performance critical code
1738.32 -> in webassembly we've come such a long
1740.93 -> way in the last decade but we're not
1744.83 -> stopping here we know we've got a lot of
1747.65 -> work to do to continue to expand the
1750.05 -> capabilities of the web and further
1752.21 -> improve our OS integration I'm super
1755.6 -> excited to share some of our upcoming
1757.22 -> roadmap all of which is being developed
1759.56 -> out in the open in close collaboration
1761.87 -> with partners developers and other
1764.87 -> browsers we are hard at work on a native
1769.49 -> file system API that will let the web
1772.24 -> mediated by user consent directly read
1775.88 -> and write to files on the user's disk
1778.28 -> not a virtual file system but the real
1781.16 -> file system and we know that this access
1784.52 -> is one of the biggest remaining holes in
1786.98 -> our integration story it's particularly
1789.89 -> vital for porting existing creative
1793.16 -> applications to the web and for enabling
1796.13 -> web native creative applications like
1798.26 -> Sketchup which we showed earlier to
1800.72 -> become even more useful alongside
1804.56 -> we're working on new web app manifest
1806.68 -> declarations and api's that will let PWS
1810.02 -> associate themselves with files and mime
1813.29 -> types that means that when you
1815.69 -> double-click a file it can open in an
1818.54 -> installed PWA this will further empower
1822.65 -> creative applications that are shipped
1824.96 -> on the web we're also working on new AP
1830.09 -> is for PW a launch management right now
1833.42 -> we do some basic link capturing on
1835.76 -> Android wear URLs within the scope of
1838.49 -> your PW a will open in your app now that
1842.57 -> works well there because there's only
1844.37 -> ever one instance of the app on Android
1847.37 -> and changing state in response to a link
1850.25 -> is expected behavior but on desktop that
1853.94 -> doesn't quite make as much sense you
1856.16 -> might want different behavior based on
1858.74 -> the content of that link we're creating
1862.1 -> a new launch event that will be fired
1864.26 -> into a PW as a service worker upon an
1867.14 -> incoming navigation allowing you
1869.63 -> fine-grained control to open new windows
1872.42 -> focus existing windows or post message
1875.81 -> the incoming data into an existing
1878.15 -> window but that's not nearly all I've
1882.62 -> picked out several more of our top
1884.66 -> priority API is that are currently under
1886.88 -> development in Chrome of course the
1889.82 -> dates up on the slider tentative and
1891.83 -> subject to slipping if we need more time
1894.14 -> to get things exactly right but with
1896.54 -> luck we're planning for all of these
1898.79 -> api's to ship in chrome this year first
1902.75 -> to origin trials for your feedback
1904.7 -> before making it to stable a few
1907.13 -> versions later those three api's that I
1910.31 -> mentioned native file system PW a file
1913.37 -> handling and launch event should all
1915.68 -> make it to you by the end of the year
1918.14 -> it's incredibly exciting how many new
1921.14 -> capabilities were bringing and we really
1923.42 -> want to hear from you to make sure that
1925.4 -> your needs are being met or how we can
1928.46 -> do more to meet those importantly with
1933.44 -> all of this new API work we don't want
1935.75 -> to break the web and
1937.2 -> use the existing advantages of our
1939.45 -> platform our universality our security
1942.63 -> and our privacy guarantees we're working
1945.42 -> carefully to close the functionality
1947.67 -> gaps in the right way
1948.9 -> collaborating with other browser vendors
1950.7 -> and working out in the open to solicit
1953.52 -> and act upon feedback from partners and
1956.22 -> developers we're working incredibly
1959.34 -> closely with security and privacy teams
1961.56 -> to make sure we don't lose those
1963.51 -> guarantees we've worked so hard to build
1965.91 -> into the web platform to keep users in
1968.85 -> control and aware of what is happening
1971.45 -> our capabilities work is really pushing
1974.19 -> the boundaries of the web adding much
1977.07 -> much more native functionality but we're
1979.71 -> focused on doing this in the right way
1981.6 -> in a way that doesn't create
1983.21 -> fragmentation or prevent other browsers
1986.28 -> from following us PWS mary went the web
1991.92 -> with native experiences we want to let
1994.83 -> you show off the best of the web
1996.75 -> platform and build products that delight
1999.36 -> users no matter where they are in the
2001.73 -> world or what device they use empowering
2005.06 -> the open web empowers you granting the
2008.21 -> widest reach from a single codebase so
2011.69 -> how can you get started you can make web
2014.27 -> apps you can make them offline first
2016.43 -> turn them into pwace leverage
2019.43 -> installation and system integrations and
2021.71 -> take advantage of the best of the web
2024.32 -> and native worlds hopefully we've shown
2027.41 -> you just how compelling progressive web
2029.39 -> apps are as an Universal app platform
2032.45 -> and how much more compelling they're
2034.91 -> going to get over the next year so thank
2039.47 -> you for coming to the talk
2040.81 -> [Music]
2059.23 -> you
2059.699 -> [Music]
Source: https://www.youtube.com/watch?v=2KhRmFHLuhE