Progressive Web Apps are experiences that combine the best of the web and the best of apps. They load quickly, even on flaky networks, can re-engage with users by sending web push notifications, have an icon on the home screen and load as top-level, full screen experiences.
These are the slides from my talk at Campus TLV.
The contain the links to the code labs and explanations so you can do it on your own time.
Comments/Feedback is most welcome. Both on @greenido and/or +Greenido
12. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Bach's home page</TITLE>
<STYLE type="text/css">
h1 { color: red }
</STYLE>
</HEAD>
<BODY>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a prolific composer.
</BODY>
</HTML>
20. Confidential & Proprietary
● Runs the “desktop Web”
● Pinch and zoom, Pan, etc
● Hitchhikers guide to the galaxy is in
your pocket!
The Mobile Internet came when it brought the Web
36. Confidential & Proprietary
RAIL: Instant loading and smooth navigation
● For first visitors, load pages in <10s on 3G
net
○ Aspirational goal: <3s to first paint
● For repeat visitors, loading of page in <500
ms
● Always scrolling at 60 frames/second
● Content shouldn’t jump as images are loaded
37. Confidential & Proprietary
● Reliable: Fast loading, offline and on flaky
networks
● Fast: Smooth animation, scrolling and nav
● Engaging and integrated
○ On the home screen, no URL bar, icons,
splash
○ Re-engaging with push notifications
● Consistent experience across browsers
(still in progress, though)
The Progressive Web App Experience
38. Confidential & Proprietary
The Progressive Web App - Examples
https://noter-1.firebaseapp.com/https://voice-memos.appspot.com
40. ● Users time on Flipkart lite vs. previous
experience: 3.5 minutes vs 70 seconds.
● 3x more time spent on site
● 40% higher re-engagement rate
● 70% greater conversion rate among those
arriving via Add to Homescreen
● 3x lower data usage
● Read more on Flipkart case study
41. 26%increase in average spend
per visit by members arriving
via a push notification
72%increase in time spent for users
visiting via a push notification
+50%repeat visits within 3 months
45. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
46. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Enter Progressive Web Apps
● Fast loading
● One click away from accessing content
● Smooth animations and navigations
● Re-engages with push notifications
● Good experience on flaky network connections
● Consistent experience across browsers
47. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Enabling app-like capabilities
Service Worker
● Client-side proxy written in JavaScript
● Access device capabilities to allow your
site to be “app like”
48. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Enabling app-like capabilities
Service Worker
● Client-side proxy written in JavaScript
● Access device capabilities to allow your
site to be “app like”
Web App Manifest
● Rich presence on user’s Android
homescreen
● Launch in full-screen mode on Android
● Control the screen orientation
● Define “splash screen” launch, theme
color for site
{ "short_name": "My Cool App",
"name": "My Totally Cool Application",
"icons": [
{"src": "launcher-icon-3x.png",
"sizes": "192x192",
"type": "image/png"}],
"start_url": "index.html",
"display": "standalone",
"background_color" : "#aeaeae",
"theme_color" : "#aeaeae",
"orientation" : "landscape" }
49. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Add to Homescreen & Full Screen
● User who visits 2x in a
within five minutes will
be prompted with
“add to homescreen”
● One tap to add to
homescreen
● Opens full screen - no
URL bar
50. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
A few tips before we start...
● Chapters 6 & 7 will take the longest
● Service Workers - Tips
○ Don't forget to change the cacheName
○ Use an incognito window to ensure a fresh start
○ Keep only one tab open at a time
○ chrome://serviceworker-internals & DevTools are your
new best friends
○ Read More tips on Noter PWA Example
51. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Let’s build it!
g.co/codelabs/pwa
Questions?
Ask!
53. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Misc
Helpful links
● https://www.chromium.org/blink/serviceworker/service-worker-faq
● https://www.chromium.org/blink/serviceworker/getting-started