Progressive Web Apps (PWAs) are websites that are built using newer web application development techniques to provide an app-like experience to users. PWAs can be installed on the home screen, work offline, receive push notifications, and have app-like interactions. The document discusses how PWA provides a better user experience than traditional websites by making websites feel like native mobile applications while retaining the benefits of the web. It also discusses how travel website Trivago implemented PWAs to increase their market reach, conversion rates, and growth.

1. Progressive Web
Apps: The
Breakdown
@tom_says_things
Front-end Developer &
Project Lead for PWA
Tom Dwyer
talent.trivago.com

3. PWA? What?
Alternative title: PWA? He’s not going to explain it again, is he?

4. Progressive Web Apps
Worst. Name. Ever.
in my opinion..

5. Results
“PWA is like a native app, but not a
real one”
“accessed through the home screen”

6. Results
„ A website which you can save on
your smartphone and it will act like a
native app. That’s how I explain it to
other people. Although they don’t
understand much without showing the
demo.“

7. „Potatoes with attitude“
Credit: http://disney.wikia.com/wiki/Mr._Potato_Head?file=Mr._Potato_Head_Render.png

8. Progressive Web Apps

9. Progressive Web Apps

10. WebsiteWeb app

11. Progressive Web Apps

12. Progressive Web Apps
LY EMULATES SITE THAT

13. Linkable
Responsiveness
Installable
Fresh
Safe
Discoverable
Re-engageable
https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/
Connectivity Independent
App-like-interactions

14. Linkable
Responsiveness
Installable
Fresh
Safe
Discoverable
Re-engageable
https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/
Connectivity Independent
App-like-interactions

15. Installable
Connectivity Independent
App-like-interactionsRe-engageable
https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/
Adopt a Shell + Content application model to
create appy navigations & interactions
Are identifiable as “applications” thanks to W3C
Manifests and Service Worker registration scope
allowing search engines to find them
Discoverable
Can access the re-engagement UIs of the OS; e.g.
Push Notifications
Progressively-enhanced with Serice Workers to let them
work offline
To the home screen through
browser-provided prompts, allowing
users to “keep” apps they find most
useful without the hassle of an app
store

16. Progressive Web Apps
Best. Name. Ever.
in my opinion..

17. Technical prerequisites
Responsive website HTTPS Service Worker

18. trivago attempts prerequisites
HTTPS Service WorkerResponsive website

19. trivago attempts prerequisites
HTTPS Service WorkerResponsive website

20. trivago attempts prerequisites
HTTPS Service WorkerResponsive website

21. HTTPS Rollout
trivago.pl switched on first
Netherlands, France, Russia, Turkey and India follow
Global rollout across 55 platforms done within weeks

22. trivago attempts service worker
HTTPS Service WorkerResponsive website

23. trivago attempts service worker
HTTPS Service WorkerResponsive website

24. Project
Meteorite

25. Lost connection

26. Lost connection

27. Lost connection

28. Already offline

29. Responsive design HTTPS Service Worker

30. Source: https://whatwebcando.today

31. Immediate API’S Abstract API’S

32. Since then, we’ve tested…
Credentials API
Permissions API
Push notification API
Geolocation API
Device memory detection API
Network type & speed API

33. Annoying website

34. Source: https://whatwebcando.today

35. Multifaceted impacts

36. Design impacts

37. PWA requires creativity
Icon Birne?
Get Jeffrey for
feedback

38. Laura Oades, Lead designer of trivago PWA
“PWA is largely unchartered territory in
design and a real opportunity for us as
creative problem solvers to stretch
ourselves to define a new standard. I
would encourage all designers to
embrace that challenge“

39. Laura Oades, Lead designer of trivago PWA
“you have to drink all the tea the
developers make you and it's hard
work“

40. Monstear

41. Product impacts

42. Offline-first
thinking

43. Market reach increased
with seamlessness

44. 5
People
2 Front-end
developers
1 Quality assurance
engineer
1 Designer 1 Project
lead

45. User impacts

46. 1. Growth rate since September 2016
Return 2x
In first two weeks
Conversion
97%

47. Source: www.pwastats.com

48. Progressive Web Apps
More than a website
More than the ability to go offline
More than the ability to add a website to your homescreen
A best in class website that emulates an app whilst retaining the accessibility
and sharing ability of the web

49. ProductTech
Design

50. @tom_says_things
Front-end Developer &
Project Lead for PWA
Tom Dwyer
talent.trivago.com