App Fest 2016, Bangalore, India.

Slide 1

Slide 1 text

Progressive Web Apps Bruce Lawson, Opera Software

Slide 2

Slide 2 text

Who’s Bruce? ▪ Deputy C.T.O., Opera Software ▪ Author of “Introducing HTML5” ▪ Previously: Developer Relations, Opera ▪ Web Developer, Standardiser ▪ Star of “Maharjah Ranjit Singh” (1994) @brucel

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

APPS ARE A BRIDGING TECHNOLOGY - LIKE FLASH @brucel

Slide 5

Slide 5 text

Why did apps come about? ▪ The Web wasn’t powerful enough ▪ Device integration @brucel

Slide 6

Slide 6 text

There’s an API for that ▪ Geolocation ▪ Touch ▪ Accelerometer ▪ Web Audio ▪ , WebGL ▪ WebRTC @brucel

Slide 7

Slide 7 text

It’s an App World. The Web Just Lives in It Today, the U.S. consumer spends an average of 2 hours and 38 minutes per day on smartphones and tablets. 80% of that time (2 hours and 7 minutes) is spent inside apps and 20% (31 minutes) is spent on the mobile web. “ - blog.flurry.com April, 2013 @brucel

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

@brucel

Slide 11

Slide 11 text

USER EXPERIENCE   IS A FEATURE TOO! @brucel

Slide 12

Slide 12 text

Progressive Web Apps ▪ “install” to the home screen ▪ have their own icon (defined by the web developer) ▪ can launch full-screen, portrait or landscape ▪ but “live” on the Web @brucel

Slide 13

Slide 13 text

Millions of mobile-ﬁrst/only users have come online the last couple of years. They have speciﬁc needs & concerns. @brucel

Slide 14

Slide 14 text

A quick story: We found that a subset of active Opera for Android users was not updating. We asked them why. @brucel

Slide 15

Slide 15 text

It turned out that, in many cases, their data package was so limited they were afraid to run out of data by updating; also, some had run out of storage space. @brucel

Slide 16

Slide 16 text

Average android app gets uninstalled by 77% of users in 24 hrs. By day 90, install retention is down to 3.97% “ Unappiness - http://andrewchen.co/new-data-shows-why-losing-80-of-your-mobile-users-is-normal-and-that-the-best-apps-do-much-better/ @brucel

Slide 17

Slide 17 text

Downloading a typical app with 20 MB APK can take more than 30 minutes on a 2G network, and the download is likely to fail before completion, due to the flaky nature of the network. “ - How we built Facebook Lite for every Android phone and network @brucel

Slide 18

Slide 18 text

    With space this limited, the user is comparing their personal photo collection with the adoption of a new app on their phone. “ - Mobile App Developers Are Suffering @brucel

Slide 19

Slide 19 text

we didn’t stand a chance as we were fighting with both our competitors and other apps for a few more MB of room inside people’s phones. “ Birdly - Why you shouldn’t bother creating a mobile app @brucel

Slide 20

Slide 20 text

@brucel

Slide 21

Slide 21 text

@brucel

Slide 22

Slide 22 text

https://dev.opera.com/articles/pwa-nigeria-kenya-interview/ “Nigerians are extremely data sensitive.” “People side-load apps and other content from third parties [or via] Xender.” Constance Okoghenun: @brucel

Slide 23

Slide 23 text

“With PWAs […], without the download overhead of native apps […] developers in Nigeria can now give a great and up-to-date experience to their users.” @brucel

Slide 24

Slide 24 text

Early progressive web apps in Asia & Africa @brucel

Slide 25

Slide 25 text

UNDER THE HOOD OF A PWA @brucel

Slide 26

Slide 26 text

Manifest file stores metadata for your web app: icons, description, colors, and related info that lets browsers create high-quality experiences for the launcher icon, task switcher, and splash screen. @brucel

Slide 27

Slide 27 text

all in the @brucel

Slide 28

Slide 28 text

{ "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true" } @brucel

Slide 29

Slide 29 text

STARTING A PWA @brucel

Slide 30

Slide 30 text

@brucel

Slide 31

Slide 31 text

{ "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "fullscreen", "orientation": "portrait", "start_url": "/simple-demo/?home=true" } @brucel

Slide 32

Slide 32 text

{ "name": "Air Horner", "short_name": "Air Horner", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#2196F3", "background_color": "#2196F3", "display": "fullscreen", "orientation": "portrait", "start_url": "/?home=true" } @brucel

Slide 33

Slide 33 text

{ "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#990000", "background_color": "#DFCFAF", "display": "fullscreen", "orientation": "landscape", "start_url": "/inbox-attack/?home=true" } https://andreasbovens.github.io/inbox-attack/ @brucel

Slide 34

Slide 34 text

Tools Manifest Generator http://brucelawson.github.io/manifest/   Manifest validator manifest-validator.appspot.com  List of PWAs pwa.rocks @brucel

Slide 35

Slide 35 text

Slide 36

Slide 36 text

@brucel

Slide 37

Slide 37 text

@brucel

Slide 38

Slide 38 text

GOING OFFLINE @brucel

Slide 39

Slide 39 text

@brucel

Slide 40

Slide 40 text

@brucel

Slide 41

Slide 41 text

@brucel

Slide 42

Slide 42 text

@brucel

Slide 43

Slide 43 text

“If I were to pick just one feature of PWAs that I’m super-excited about, it’s the ability to detect and handle ofﬂine / unreliable network conditions with service workers.” @brucel

Slide 44

Slide 44 text

BETTER ENGAGEMENT @brucel

Slide 45

Slide 45 text

Web Apps with Service Workers can also use Push Notifications to drive engagement, even when the browser/app isn’t open. “ Push notifications -https://developers.google.com/web/fundamentals/getting-started/push-notifications/?hl=en @brucel

Slide 46

Slide 46 text

Beyond the Rack ▪ 72% increase in time spent for users visiting via a push notification   ▪ 26% increase in average spend per visit by members arriving via a push notification  ▪ +50% repeat visits within 3 months @brucel

Slide 47

Slide 47 text

Where does this work? ▪ Opera for Android  ▪ Chrome for Android  ▪ Firefox for Android (soon) ▪ Microsoft Edge and Windows (soon)  ▪ Safari/ iOS (homescreen-only, non-standard) @brucel

Slide 48

Slide 48 text

Progressive Web Apps ▪ live on the server so no update distribution lag  ▪ require no app store or gatekeeper  ▪ are a normal website on browsers such as Opera Mini, Safari, Windows phones  ▪ searchable, indexable, linkable  ▪ can work offline @brucel

Slide 49

Slide 49 text

@brucel

Slide 50

Slide 50 text

THE UX OF APPS + THE REACH OF THE WEB =THE FUTURE @brucel

Slide 51

Slide 51 text

@brucel

Slide 52

Slide 52 text

Let’s talk about @brucel

Slide 53

Slide 53 text

Almost 250 million people every month use Opera Mini. @brucel

Slide 54

Slide 54 text

Opera Mini now has multiple rendering modes on Android. @brucel

Slide 55

Slide 55 text

On data, it uses built-in webview with compression. @brucel

Slide 56

Slide 56 text

@brucel On WiFi, it uses built-in webview without compression, unless you turn it on.

Slide 57

Slide 57 text

There’s also an “Extreme mode” setting, which is the classic Presto-based compression mode, resulting in large savings (and some breakage). @brucel

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

We’re moving users as much as possible over to the webview-powered modes (sometimes dynamically), but many still use extreme mode. @brucel Also note: Opera Mini on iOS also ships with multiple modes, whereas Opera Mini for J2ME & Opera Mini for Windows Phone only ship with extreme mode.

Slide 62

Slide 62 text

Last year, Opera Mini saved Indian users 690 Crore Rupees @brucel

Slide 63

Slide 63 text

So, what about PWA support? @brucel

Slide 64

Slide 64 text

The webview-powered modes have solid standards support, incl. service workers. @brucel

Slide 65

Slide 65 text

“Extreme mode” however does not support PWA features, and comes with limited JS support. @brucel

Slide 66

Slide 66 text

For this reason, it’s important you build your apps carefully balancing content, presentation and client-side scripting, following progressive enhancement principles as much as possible. https://dev.opera.com/articles/making-sites-work-opera-mini/ @brucel

Slide 67

Slide 67 text

we've launched our first Holy Grail app into production! … It looks exactly the same as the app it replaced, however initial pageload feels drastically quicker “ Progressive enhancement = UX - AirBnB

Slide 68

Slide 68 text

because we serve up real HTML instead of waiting for the client to download JavaScript before rendering. Plus, it is fully crawlable by search engines. … It feels 5x faster. “ Holy Grail App - AirBnB

Slide 69

Slide 69 text

PWA.ROCKS @brucel

Slide 70

Slide 70 text

Developer tutorials: https://dev.opera.com/tags/pwa/

Slide 71

Slide 71 text

brucel@opera.com opera.com/developer brucelawson.co.uk @brucel

Slide 72

Slide 72 text

Thanks ▪ Me by HTML sign in Tokyo by Doug Schepers (@shepazu), used with permission ▪ Flurry graphs used by kind permission of Flurry   http://flurrymobile.tumblr.com/post/115188952445/flurry-five-year-report-its-an-app-world-the @brucel