App Fest 2016, Bangalore, India.

Progressive Web Apps Bruce Lawson, Opera Software

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

APPS ARE A BRIDGING TECHNOLOGY - LIKE FLASH @brucel

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

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

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

@brucel

USER EXPERIENCE   IS A FEATURE TOO! @brucel

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

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

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

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

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

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

    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

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

@brucel

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

“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

Early progressive web apps in Asia & Africa @brucel

UNDER THE HOOD OF A PWA @brucel

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

{ "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

STARTING A PWA @brucel

@brucel

{ "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

{ "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

{ "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

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

{ "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

@brucel

GOING OFFLINE @brucel

@brucel

“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

BETTER ENGAGEMENT @brucel

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

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

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

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

@brucel

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

@brucel

Let’s talk about @brucel

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

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

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

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

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

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.

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

So, what about PWA support? @brucel

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

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

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

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

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

PWA.ROCKS @brucel

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

[email protected] opera.com/developer brucelawson.co.uk @brucel

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

App Fest 2016, Bangalore, India.

App Fest 2016, Bangalore, India.

More Decks by bruce lawson

Other Decks in Technology

Featured

Transcript