Progressive Web Apps: Operas PerspectiveAndreas Bovens | @andreasbovensOpera for Android Product Manager & Dev Relations Lead

opr.as/oa

home screen

offline

push

bg sync

SOON

# UX patterns

home screen

offline

push

bg sync

home screen

offline

push# UX patterns

Pattern:Channeling users to install banners

home screen

If a user engages frequently with a site that is a PWA, the browser shows an add to home screen install banner.

https://pokedex.org/

home screen

Its possible to prevent this banner from popping up all by itself, and it can be tied to a an alternative trigger, like an Install button. https://airhorner.com/

home screen

Flipkart uses its own nudging mechanism, allowing it to target users multiple times, and channel only really engaged users to the install banner.

https://www.flipkart.com/

home screen

Pattern:Using a contextually optimal orientation and display mode

home screen

"display": "standalone","orientation": "portrait"

home screen

https://airhorner.com/

"display": "standalone","orientation": "portrait"

https://riorun.theguardian.com/

home screen

offline

[] we think that PWAs are potentially a perfect vehicle for all kinds of journalism events like election night results, specific verticals like recipes, long-running investigations like The Counted and we hope to see (and make) more in future.

home screen

offline

https://www.theguardian.com/info/developer-blog/2016/aug/19/how-we-made-the-riorun-progressive-web-app

"display": "browser"

https://www.theguardian.com/

home screen

"display": "fullscreen","orientation": "portrait"

https://www.flickplayapp.io/

home screen

offline

"display": "fullscreen","orientation": "landscape"https://andreasbovens.github.io/inbox-attack/

home screen

offline

offline

home screen

offlinePattern:Saving specific content units

offline

https://www.soundslice.com/scores/34716/ Soundslice offers a save offline option for specific content units.

offline

When we are offline, the site offers a handy overview of all available content.

offline

offlinePattern:Saving (almost) all site content

offline

The WaPo PWAs frontpage works great onlinehttps://www.washingtonpost.com/pwa/

offline

and heres its offline experience!

offline

We can even read full articles, but the images are not pre-fetched.

offline

Well not really ;-)

We can even read full articles, but the images are not pre-fetched.

offline

This is what the article looks like when we reconnect and refresh.

offline

And if we go offline again and refresh, already downloaded images stay nicely cached.

Google I/O PWA downloads the full site in the background (except videos, of course), and informs us that it will work offline.

offlinehttps://events.google.com/io2016/

offlinePattern:Indicating that the user is offline

When we go offline on the Google I/O site, theres a banner pointing out that were offline, but that editing will work.

offline

offline

offline

Flipkart & Geo.tvindicate offline with a grey scale filter.

offline

https://m.geo.tv/ https://www.flipkart.com/

push

push

offline

push

push

pushPattern:Using notifications for re-engagement

pushPush notifications allow web apps to list visitors for re-engagement in a low-friction manner, without requiring sign-up or app download.

push

New Scientist asks if it can send push notifications, instead of asking for an email address, sign up or app download.https://www.newscientist.com/

push

http://www.slideshare.net/julianmartinez2/building-selio-a-local-market-progressive-web-app

pushPattern:Contextualizing why the user should grant permission to send notifications

push

Weather.com does a good job at contextualizing why wed want to click Allow on the push notification permission prompt.

push

Facebook asks immediately after the user is logged in, so there is indirect context.https://m.facebook.com/

So, to summarize you should consider:

Channel add to home screen prompts, or not?Is the display mode and orientation optimal?What type of content is saved for offline?Save content after a user action, or automatically?How to indicate that the user is offline?Is sign up needed, or are push notifications better?When & how to ask users to accept notifications?

# Why do PWAs matter in Africa?

PWAs are typically more lightweight than native apps, and offer an always up-to-date experience. This is great for end users (no more data-slurping app updates & more available device storage) and developers (updates are distributed instantly).

If I were to pick just one feature of PWAs that Im super-excited about, its the ability to detect and handle offline / unreliable network conditions with service workers.Constance Okoghenun (Konga):https://dev.opera.com/articles/pwa-nigeria-kenya-interview/

Early progressive web apps in Asia & Africa

And now that were talking about data savings

Lets talk about

Lets talk aboutAnd now that were talking about data savings

Almost 250 million people every month use Opera Mini.

6.5 million of whom live in Kenya,20.5 million of whom live in Nigeria, and11 million of whom live in South-Africa.

Opera Mini now has multiple rendering modes on Android.

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

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

Theres also Extreme mode, which is the classic Presto-based compression mode.

This gives large savings, but may cause breakage.

Were moving users as much as possible over to the webview-powered modes (sometimes dynamically), but many still use extreme mode.

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.

So, what about PWA support?

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

Extreme mode however does not support PWA features, and comes with limited JS support.

For this reason, its 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/

# Did you know about?

You are offline. is outdated.

You are offline. is an OK message to show if an offline user tries to load a site that shes never visited before

However, if a site that has been visited before doesnt load in an offline scenario, then maybe the browser should start showing This site does not work offline. instead.

Ambient badging!

Alex Russell:

Wouldnt it be great if there were a button in the URL bar that appeared whenever you landed on a PWA that you could always tap to save it to your homescreen?https://infrequently.org/2016/06/pwa-discovery-you-aint-seen-nothin-yet/

Yes, that would be great!

the display-mode media query

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

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

CSS

@media (display-mode: standalone) {h3:after {content: " in standalone mode!"}}

the Pop into browser experiment

Standalone & fullscreen modes hide the URL bar

Jeremy Keith:

I want people to be able to copy URLs. I want people to be able to hack URLs. Im not ashamed of my URLs Im downright proud.https://twitter.com/adactio/status/734875747169501185

https://dev.opera.com/blog/pwa-badge-pop/

the pwa.rocks demo site!

https://pwa.rocks/

Thank you!@andreasbovens#PWARoadshow#PWARoadshowNairobi#PWARoadshowLagos #PWARoadshowJoburg