Presentation by Andreas Bovens for Google's Progressive Web Apps Roadshow in Sub-Saharan Africa.

1. Progressive Web Apps: Opera’s
Perspective
Andreas Bovens | @andreasbovens
Opera for Android Product Manager & Dev Relations Lead

2. opr.as/oa

3. home screen offline push bg sync
SOON

4. # UX patterns
home screen offline push

5. home screen

6. Pattern:
Channeling users to install banners
home
screen

7. 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

8. It’s 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

9. 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

10. Pattern:
Using a contextually optimal
orientation and display mode
home
screen

11. "display": "standalone",
"orientation": "portrait"
home
screen
https://airhorner.com/

12. "display": "standalone",
"orientation": "portrait"
https://riorun.theguardian.com/
home
screen

13. […] 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
https://www.theguardian.com/info/developer-
blog/2016/aug/19/how-we-made-the-riorun-progressive-
web-app

14. "display": "browser"
https://www.theguardian.com/
home
screen

15. "display": "fullscreen",
"orientation": "portrait"
https://www.flickplayapp.io/
home
screen

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

17. offline

18. offline
Pattern:
Saving specific content units

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

20. offline

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

22. offline
Pattern:
Saving (almost) all site content

23. offline
The WaPo PWA’s frontpage
works great online…
https://www.washingtonpost.com/pwa/

24. offline
… and here’s its offline
experience!

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

26. offline
Well… not really ;-)
We can even read full articles, but
the images are not pre-fetched.

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

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

29. Google I/O PWA downloads the
full site in the background (except
videos, of course), and informs us
that it will work offline.
offline
https://events.google.com/io2016/

30. offline
Pattern:
Indicating that the user is offline

31. When we go offline on the Google
I/O site, there’s a banner pointing
out that we’re offline, but that
editing will work.
offline

32. offline

33. offline

34. Flipkart &
Geo.tv
indicate “offline”
with a grey
scale filter.
offline
https://m.geo.tv/
https://www.flipkart.com/

35. push

36. push

37. push

38. push
Pattern:
Using notifications for re-engagement

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

40. 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/

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

42. push
Pattern:
Contextualizing why the user should
grant permission to send notifications

43. push
Weather.com does a good job at
contextualizing why we’d want to
click “Allow” on the push
notification permission prompt.

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

45. 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?

46. # Why do PWAs matter in Africa?

47. 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).

48. “If I were to pick just one feature of
PWAs that I’m super-excited
about, it’s 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/

49. Early progressive web apps in Asia & Africa

50. And now that we’re talking about data
savings…

51. Let’s talk about

52. Almost 250 million people
every month use Opera Mini.

53. 6.5 million of whom live in Kenya,
20.5 million of whom live in Nigeria, and
11 million of whom live in South-Africa.

54. Opera Mini now has multiple
rendering modes on Android.

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

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

57. There’s also “Extreme mode”,
which is the classic Presto-based
compression mode.
This gives large savings, but may
cause breakage.

58. We’re 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.

59. So, what about PWA support?

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

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

62. 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/

64. # Did you know about…?

65. … the display-mode media query

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

67. {
"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!"}
}

68. … the “Pop into browser” experiment

69. Standalone & fullscreen modes
hide the URL bar…

70. Jeremy Keith:
“I want people to be able to copy URLs. I want
people to be able to hack URLs. I’m not ashamed
of my URLs …I’m downright proud.”
https://twitter.com/adactio/status/734875747169501185

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

73. … the pwa.rocks demo site!

74. https://pwa.rocks/

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