Slide 1

Slide 1 text

The Case for Progressive Web Apps

Slide 2

Slide 2 text

During: @grigs_talks After: @grigs Slides: http://bit.ly/grigs-pwa-sf17

Slide 3

Slide 3 text

Have you heard the Progressive Web App hype?

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

WAIT! THE WEB ISN’T DEAD AFTER ALL. GOOGLE MADE SURE OF IT IN 2010, THE web died. Or so said the publication you’re CADE METZ BUSINESS 04.20.16 1:00 PM GOOGLE BUSINESS CULTURE DESIGN GEAR SCIENCE SECURITY TRANSPORTATION Wait! The Web Isn't Dead After All. Google Made Sure of It SUBSCRIBE

Slide 8

Slide 8 text

of building online services and delivering them across the Internet, but of using these services. At the very least, it’s not dead. The Progressive Web App The Weather Company offers a smartphone app, like any other sane company that harbors aspirations on the Internet. But it has seen more and more people visit its mobile website in recent years. According to Sheri Bachstein, the Weather Company’s vice president of web, about fifty percent of its web traffic now arrives on mobile phones and tablets (as opposed to the desktop). Yes, more people use the company’s various apps, but increasingly, the mobile web is a vital way of reaching its worldwide audience—not to mention maintaining and expanding that audience. The company now offers what Google calls a “progressive web app.” Basically, this is a website that, in sometimes gradually evolving ways, behaves like a native app. You visit it through a browser, just like any other website. But as you continue to use it, turning on certain tools, it transforms into something more. With a progressive web app, you can set up push notifications, so you know when new content arrives. You can add an icon to your phone’s home screen, so you can rapidly revisit the service. And perhaps most importantly, thanks to a technology called service workers, it can operate both online and off, kinda like a web app. Among other things, this means that when you visit the web app a second time, it loads faster. It’s more like the thing is sitting on your phone. ‘You use it. You like it. And over time, you progressively build a relationship with it.’ —ALEX KOMOROSKE, CHROME PRODUCT MANAGER

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Photo by helin, http://bit.ly/2fg3eME

Slide 12

Slide 12 text

Time Visibility Technology Trigger Peak of Inflated Expectations Trough of Disillusionment Slope of enlightenment Plateau of Productivity Gartner Hype Cycle

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

What is a Progressive Web App?

Slide 15

Slide 15 text

Source: Google Developers, http://bit.ly/1X36bm2 | Original definition: http://bit.ly/1K8Tm4L Progressive Web App Features

Slide 16

Slide 16 text

Source: FlipKart, http://bit.ly/2ejW2Rr Flipkart’s Progressive Web App

Slide 17

Slide 17 text

Browsers are providing incentives for PWAs. Photo by Stephen Korecky, http://bit.ly/2epjw48

Slide 18

Slide 18 text

Add to home screen install banners Source: Google, http://bit.ly/2ejW2Rr

Slide 19

Slide 19 text

Browsers hope they can increase install rates by observing user engagement and fine-tuning when they show the banner.

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Coming Soon… (Likely)

Slide 22

Slide 22 text

App Stores

Slide 23

Slide 23 text

SEO Benefits

Slide 24

Slide 24 text

Progressive Web Apps Simply Make Sense (Irrespective of what you do on native)

Slide 25

Slide 25 text

1. Not every customer or potential customer will install your native app.

Slide 26

Slide 26 text

DUH!

Slide 27

Slide 27 text

Sometimes we need to restate the obvious.

Slide 28

Slide 28 text

Plus, there are cracks in the app store.

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

Over 2 million apps available in iOS and Android app stores. Source: Statista, http://bit.ly/2fleesH | Photo by Blake Patterson, http://bit.ly/2foGNpj

Slide 32

Slide 32 text

8+ apps 5-7 apps 4 apps 3 apps 2 apps 1 app 0 apps 49% 13% 11% 8% 6% 7% 6% U.S. smartphone users’ number of apps downloads per month Source: Comscore 2016 U.S. Mobile App Report, http://bit.ly/2d27iPI

Slide 33

Slide 33 text

Average Android App Retention of Daily Active Users Source: Quettra via Andrew Chen http://bit.ly/1Hq53AR Percentage of Users Still Active 0% 25% 50% 75% 100% Days Since App Install 0 1 3 7 14 30 60 90

Slide 34

Slide 34 text

© comScore, Inc. Proprietary. 26 Advertising and marketing is becoming a more important driver of app installs, while the app store’s influence may have peaked. App acquisition appears to be moving from ‘pull’ to ‘push’. App stores remain the most important method, but they are no longer growing in importance. Meanwhile, more users are now discovering apps from websites, digital ads and traditional media ads, highlighting the increasing importance of traditional push marketing for user acquisition. Most Common App Discovery Channels Among Smartphone Users Source: comScore MobiLens, U.S., Age 13+, 3 Month Average Ending June 2016 vs. June 2015 21% 14% 16% 9% 8% 9% 8% 6% 21% 14% 16% 11% 8% 11% 9% 9% 0% 5% 10% 15% 20% 25% Searched app store Featured/ Top List in app store via friend/ family via comment/ review/ social site via news/ print review/ TV show via a website via Ad on device browser/ app via Ad on TV/ print/ billboard % of Smartphone Users Jun-2015 Jun-2016 App Store Word-of-Mouth/Opinion Advertising/Marketing Being in the app store is no longer enough. Cost of acquisition higher.

Slide 35

Slide 35 text

© comScore, Inc. Proprietary. 15 And mobile audience growth is being driven more by mobile web properties, which are actually bigger and growing faster than apps. A comparison of the Top 1000 Apps vs. the Top 1000 Mobile Web Properties shows that despite apps dominance in usage time, mobile web is responsible for big audiences on mobile. Mobile web audiences are almost 3x the size and growing 2x as fast as app audiences. Average Monthly Audience: Top 1000 Mobile Apps vs. Top 1000 Mobile Web Properties Source: comScore Mobile Metrix, U.S., Age 18+ - 2,000 4,000 6,000 8,000 10,000 12,000 Jun-2014 Sep-2014 Dec-2014 Mar-2015 Jun-2015 Sep-2015 Dec-2015 Mar-2016 Jun-2016 Unique Visitors (000) Apps Mobile Web +82% vs. 2014 +45% vs. 2014 “Mobile web audiences are almost 3x the size and growing 2x as fast as app audiences.”

Slide 36

Slide 36 text

2. You should provide a secure site or app for your web customers

Slide 37

Slide 37 text

Image by CHRISTOPHER DOMBRES, http://bit.ly/2fKjJoC

Slide 38

Slide 38 text

Photo by Mario Antonio Pena Zapatería, http://bit.ly/2fuQ27D

Slide 39

Slide 39 text

Let’s Encrypt is a free, automated, and open Certificate Authority. We are a 501(c)(3) nonprofit. We're running a crowdfunding campaign to support our operations, please consider contributing now! Get Started Donate FROM OUR BLOG Nov 1, 2016 Launching Our Crowdfunding Campaign Today we kicked off our first crowdfunding campaign with the goal of raising enough funds to cover about one month of our operations - $200,000. Read more Oct 27, 2016 Our First Grant: The Ford Foundation We are proud to announce that The Ford Foundation has awarded us a grant to help our growing operations. Read more Oct 24, 2016 Squarespace OCSP Stapling Implementation MA JOR SPONSORS Documentation Get Help Donate ▾ About Us ▾

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

3. You should provide a fast experience for your web customers

Slide 42

Slide 42 text

The Washington Post PWA shows big speed increase

Slide 43

Slide 43 text

The Washington Post PWA shows big speed increase

Slide 44

Slide 44 text

Service workers key to performance boon Source: Google, http://bit.ly/2fpGrRr

Slide 45

Slide 45 text

4. Your web customers would benefit from an offline experience

Slide 46

Slide 46 text

Service workers are also key to providing an offline experience

Slide 47

Slide 47 text

5. Your web customers might benefit from push notifications

Slide 48

Slide 48 text

Push notifications can help increase engagement

Slide 49

Slide 49 text

6. You can create a text file and some icons for a Web Manifest

Slide 50

Slide 50 text

Manifest files are simple JSON documents

Slide 51

Slide 51 text

{ name: "Cloud Four", short_name: "Cloud Four", description: "We design and develop responsive websites and progressive web apps.", icons: [ { src: "/android-chrome-192x192.png", sizes: "192x192", type: "image/png" }, { src: "/android-chrome-512x512.png", sizes: "512x512", type: "image/png" } ], theme_color: "#456BD9", background_color: "#FFFFFF", display: "standalone", orientation: "natural", start_url: "/", gcm_sender_id: "482941778795" } Manifest files are simple JSON documents

Slide 52

Slide 52 text

Every step on the path to a PWA makes sense on its own.

Slide 53

Slide 53 text

Early PWA Returns are Promising

Slide 54

Slide 54 text

Konga • 92% less data for initial load, vs. native app • 82% less data to complete first transaction, vs. native app • 63% less data for initial load, vs. previous mobile web experience • 84% less data to complete first transaction, vs. previous mobile web experience Source: Google, http://bit.ly/2f64lRo

Slide 55

Slide 55 text

eXtra Electronics • 12% click-through rate • 100% more sales from users arriving via web push • 4x increase in re-engagement Source: Google, http://bit.ly/2eqSf18

Slide 56

Slide 56 text

5miles • 50% decrease in bounce rates • 30% increase in time spent on site • 30% better conversion for users who arrived via Add to Home screen Source: Google, http://bit.ly/2eqS5a6

Slide 57

Slide 57 text

But iOS doesn’t support PWAs…

Slide 58

Slide 58 text

PWAs work fine on iOS. They are progressive.

Slide 59

Slide 59 text

Billions use browsers that support PWA features

Slide 60

Slide 60 text

Billions use browsers that support PWA features Safari has hinted at supporting service workers which is the most critical feature.

Slide 61

Slide 61 text

AliExpress • 104% for new users across all browsers in conversion • 82% increase in iOS conversion Source: Google, http://bit.ly/2fq2ckc

Slide 62

Slide 62 text

The Washington Post saw 5x increase in user engagement

Slide 63

Slide 63 text

Why? Performance. PWA faster even on iOS.

Slide 64

Slide 64 text

PWAs are a trojan horse for performance. Photo by Hsing Wei, http://bit.ly/2fqmBFV

Slide 65

Slide 65 text

Progressive Web Apps Simply Make Sense 1. Not every customer or potential customer will install your native app. 2. You should provide a secure site or app for your web customers 3. You should provide a fast experience for your web customers 4. Your web customers would benefit from an offline experience 5. Your web customers might benefit from push notifications 6. You can create a text file and some icons for a Web Manifest

Slide 66

Slide 66 text

Simply making sense != Simple to design and build

Slide 67

Slide 67 text

Unanswered questions from earliest days of the iPhone

Slide 68

Slide 68 text

Early on, web pages aped native apps http://smashingtops.com/wordpress/wordpress-plugins/

Slide 69

Slide 69 text

The web has evolved its own language. http://www.wptouch.com/

Slide 70

Slide 70 text

When it comes to visual design and interaction patterns, start by forgetting everything you know about conventional web design, and instead imagine you’re actually designing a native app. —Owen Campbell-Moore, Designing Great UIs for Progressive Web Apps

Slide 71

Slide 71 text

http://www.flickr.com/photos/adventuresof/111667571/ Say What?

Slide 72

Slide 72 text

It’s important to pay attention to detail here since native apps have given users expectations around touch interactions and information hierarchy which are important to match to avoid creating a jarring experience. —Owen Campbell-Moore, Designing Great UIs for Progressive Web Apps

Slide 73

Slide 73 text

What makes something an app?

Slide 74

Slide 74 text

How do user’s expectations change when they consider something to be an app?

Slide 75

Slide 75 text

Four related questions and few small details

Slide 76

Slide 76 text

1. How much does your design match the platform?

Slide 77

Slide 77 text

Do you switch design language between platforms? Material Design iOS Design

Slide 78

Slide 78 text

How many platforms will you adapt to?

Slide 79

Slide 79 text

What about desktop browsers?

Slide 80

Slide 80 text

Define your own design and be consistent. Tripcase maintains same design across platforms.

Slide 81

Slide 81 text

2. What impact does going chromeless have on our user experiences?

Slide 82

Slide 82 text

What happens when you remove browser chrome? display: "standalone" display: "fullscreen" display: "browser"

Slide 83

Slide 83 text

What happens when you remove browser chrome? display: "standalone" display: "fullscreen" status bar navigation bar No URL, tabs, or menu

Slide 84

Slide 84 text

What happens when you remove browser chrome? display: "fullscreen" No URL, tabs, menu or back button!

Slide 85

Slide 85 text

Full screen does have hidden controls Pull down for reload Swipe from bottom for navigation bar

Slide 86

Slide 86 text

We’re spoiled by our browsers Photo by Garry Wilmore, http://bit.ly/2noXVxq

Slide 87

Slide 87 text

The warm comforts of the browser navigation bar status bar address bar

Slide 88

Slide 88 text

The warm comforts of the browser info, refresh, download tabs downloads find in page

Slide 89

Slide 89 text

The warm comforts of the browser sharing printing email

Slide 90

Slide 90 text

Roughing it in app land

Slide 91

Slide 91 text

Adding a back button is harder than it seems • Manage the browser history so back button goes to right location. • Back button in an app often implies a hierarchy, not simply going to the last screen you were on. • Do you rearchitect your site to create an app hierarchy?

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

Where does this button go? Does it do the same thing as the browser back button? Should there be an app back button?

Slide 94

Slide 94 text

.backButton { display: none; } @media (display-mode: standalone), (display-mode: fullscreen) { .backButton { display: block; } } Display mode media query

Slide 95

Slide 95 text

Not every customer or potential customer will add your Progressive Web App to their home screen …but every visitor will install your PWA!

Slide 96

Slide 96 text

No content

Slide 97

Slide 97 text

http://codepen.io/mariusbalaj/full/Jtqbm/

Slide 98

Slide 98 text

2out of 1000 mobile users tap share buttons https://www.moovweb.com/anyone-use-social-sharing-buttons-mobile/

Slide 99

Slide 99 text

No content

Slide 100

Slide 100 text

No content

Slide 101

Slide 101 text

No content

Slide 102

Slide 102 text

Experimental Web Share API to Enable Native Sharing

Slide 103

Slide 103 text

3. To App Shell or not to App Shell?

Slide 104

Slide 104 text

App Shell model of PWAs https://medium.com/google-developers/instant-loading-web-apps-with-an-application-shell-architecture-7c0c2f10c73

Slide 105

Slide 105 text

Perceived performance matters most By Addy Osmani, http://bit.ly/2o0YBgu

Slide 106

Slide 106 text

App Shell means first paint happens quickly No PWA, No App Shell, 4G PWA with App Shell, 4G

Slide 107

Slide 107 text

Personally, I’m not a fan of the app-shell model. I feel that it prioritises exactly the wrong stuff—the interface is rendered quickly while the content has to wait…I also notice it being used as a get- out-of-jail-free card, much like the ol’ “Single Page App” descriptor; “Ah, I can’t do progressive enhancement because I’m building an app shell/SPA, you see.” —Jeremy Keith, Regressive Web Apps

Slide 108

Slide 108 text

PWA != SPA

Slide 109

Slide 109 text

No content

Slide 110

Slide 110 text

4. What part of your site should be made into a Progressive Web App?

Slide 111

Slide 111 text

Desktop Facebook is one app.

Slide 112

Slide 112 text

No content

Slide 113

Slide 113 text

Whole site apps

Slide 114

Slide 114 text

Whole site apps

Slide 115

Slide 115 text

Whole site apps

Slide 116

Slide 116 text

Subdomain apps

Slide 117

Slide 117 text

Tearaway Apps

Slide 118

Slide 118 text

Tearaway Apps

Slide 119

Slide 119 text

Tearaway Apps

Slide 120

Slide 120 text

Four questions for PWAs 1. How much does your design match the platform? 2. What impact does going chromeless have on UX? 3. To App Shell or not to App Shell? 4. What part of your site should be made into a PWA?

Slide 121

Slide 121 text

What makes something an app?

Slide 122

Slide 122 text

How do user’s expectations change when they consider something to be an app?

Slide 123

Slide 123 text

Great PWAs will get the details right.

Slide 124

Slide 124 text

Caching and offline strategy

Slide 125

Slide 125 text

Cache for performance and offline fallback

Slide 126

Slide 126 text

Cache for performance and offline fallback

Slide 127

Slide 127 text

Cache recently viewed content for offline use

Slide 128

Slide 128 text

Cache recently viewed content for offline use

Slide 129

Slide 129 text

Cache recently viewed content for offline use

Slide 130

Slide 130 text

Let people choose what to cache offline

Slide 131

Slide 131 text

Let people choose what to cache offline

Slide 132

Slide 132 text

Cache app ahead of time

Slide 133

Slide 133 text

Cache app ahead of time

Slide 134

Slide 134 text

AMP to PWA Install Path

Slide 135

Slide 135 text

Accelerated Mobile Project

Slide 136

Slide 136 text

Accelerated Mobile Project

Slide 137

Slide 137 text

AMP to PWA Install Path https://developer.washingtonpost.com/pb/blog/post/2016/07/15/amp-up-with-progressive-web-apps/

Slide 138

Slide 138 text

Push notification etiquette

Slide 139

Slide 139 text

Don’t immediately ask for permission to send push notifications

Slide 140

Slide 140 text

Many people are annoyed by notifications http://info.localytics.com/blog/the-inside-view-how-consumers-really-feel-about-push-notifications

Slide 141

Slide 141 text

No content

Slide 142

Slide 142 text

Photo by Scott Hart, http://bit.ly/2or1K9Y

Slide 143

Slide 143 text

No content

Slide 144

Slide 144 text

Planning for your PWA

Slide 145

Slide 145 text

Progressively Punny

Slide 146

Slide 146 text

Progressive Roadmap to a PWA {manifest} https Jul 13 • Redesign launches • Better security with HTTPS • Faster site via HTTP/2 • Better bookmarks via manifest Oct 3 • Faster pages • Offline fallback • It’s a PWA! service worker Wrench by Tony Gines from the Noun Project Oct 18 • Offline pages • Offline indicator • Improved font loading Nov 22 • Push notifications • HTTP/2 Link Preload Dec 7 • Small tweaks • PWA announced

Slide 147

Slide 147 text

Every step on the path to a PWA makes sense on its own.

Slide 148

Slide 148 text

Photo by Kerry J, http://bit.ly/2fuTKOx

Slide 149

Slide 149 text

No content

Slide 150

Slide 150 text

Thank You!