The document discusses progressive web apps (PWAs) and provides suggestions for improving them. It notes that while PWAs aim to have engaging, fast, integrated, and reliable experiences like native apps, they still have room for improvement in areas like speed, integration, and reliability. It emphasizes that PWAs should adhere to web best practices and provide actually useful experiences rather than just focusing on technical features. The document encourages helping the PWA effort by providing feedback, using and contributing to tools, keeping messaging up-to-date, and promoting high-quality examples.

1. Taking the P out of PWA…
Chris Heilmann (@codepo8) January 2018

3. Partner
Application
Experience

4. Apps in the
Enterprise
Photo by Janson G: pixabay.com/en/spaceship-model-isolated-enterprise-2749360/

5. Progressive Web Apps

6. twitter.com/larsklint/status/941504191222054912

7. twitter.com/codepo8/status/954311316113690624

8. “But, what is a PWA?”,
I hear you ask.
Yeah, OK, a developer can dream…

9. A PWA is
Discoverable Installable Linkable
Network
Independent
Safe Re-engageable
Progressive Responsive App-Like Fresh

10. Asking that much is a bit
of a stretch…

11. Let’s make this simpler…
A PWA is a web-technology
based application. It mixes the
best of the web and the app
space.

12. Let’s make this simpler…
A PWA has a unique URL. This
can be used as a distribution
model. The link.

13. Let’s make this simpler…
PWAs are progressive.
They don’t work and behave
the same everywhere.

14. Let’s make this simpler…
PWAs are progressive.
They improve over time and
with the ability of the host
environment.

15. Let’s make this simpler…
If you choose to install PWAs
they behave like we expect
apps to behave. Without any
of the annoying bits…

16. Bridging the gap between
apps and web needed
good technology

17. PWAs use the
current web,
progressively
aka.ms/webcando

18. Additionally, we needed
two new technologies.

19. Web
Manifest

20. Service
Workers

21. We talk far too much
about the nuts and bolts.

22. E
Engaging
Let’s concentrate on
how our apps appear
to the user.
F
Fast
I
Integrated
R
Reliable

23. Where’s the fire?
E
Engaging
F
Fast
I
Integrated
R
Reliable

24. Where’s the fire?
WTF?
E
Engaging
F
Fast
I
Integrated
R
Reliable

25. Let’s talk about things
that need work…

26. Speed

27. E
Engaging
F
Fast
I
Integrated
R
Reliable
Empty shells are fast, but not useful...
twitter.com/codepo8/status/954308397809184768

28. E
Engaging
F
Fast
I
Integrated
R
Reliable
PWAs should be faster, not slower...

29. Integration

30. E
Engaging
F
Fast
I
Integrated
R
Reliable
PWAs should play well with the OS…

31. E
Engaging
F
Fast
I
Integrated
R
Reliable
Alas, it is the web and user choice...

32. E
Engaging
F
Fast
I
Integrated
R
Reliable
We have some work to do...

33. E
Engaging
F
Fast
I
Integrated
R
Reliable
Great integration we don‘t mention...

34. E
Engaging
F
Fast
I
Integrated
R
Reliable
From web to app store via manifest...

35. E
Engaging
F
Fast
I
Integrated
R
Reliable
Yes, the manifest matters...

36. Reliability

37. E
Engaging
F
Fast
I
Integrated
R
Reliable
Embracing the web shareability...

38. E
Engaging
F
Fast
I
Integrated
R
Reliable
Avoiding known annoyances

39. E
Engaging
F
Fast
I
Integrated
R
Reliable
Availability in the worst scenarios...

40. E
Engaging
F
Fast
I
Integrated
R
Reliable
Let’s be mindful of Service Workers…
homebrewery.naturalcrit.com/share/SyZ4Sxms5b

41. Engagement

42. E
Engaging
F
Fast
I
Integrated
R
Reliable
Engaging, not annoying…

43. E
Engaging
F
Fast
I
Integrated
R
Reliable
Not all re-use is advisable...

44. E
Engaging
F
Fast
I
Integrated
R
Reliable
Going too basic isn‘t helping either...

45. E
Engaging
F
Fast
I
Integrated
R
Reliable
Let’s build progressive interfaces…

46. E
Engaging
F
Fast
I
Integrated
R
Reliable
Same app, different environment…

47. This isn’t new - our web
best practices apply…
E
Engaging
F
Fast
I
Integrated
R
Reliable

48. PWA tooling is great!
(as always, it is tough to build tools for an open stack)

49. ServiceWorker
Cookbook
(Mozilla)
aka.ms/serviceworkers

50. Workbox
(Google)
aka.ms/workbox

51. Lighthouse
(Google)
aka.ms/google-lighthouse

52. Not everybody
cares about the nuts
and bolts…
twitter.com/headjs_ru/status/955333399564161024

53. PWA Builder
(Microsoft)
aka.ms/pwa-builder

54. PWA Builder
(Microsoft)
aka.ms/pwa-builder

55. Why is it hard to
find great examples?

56. Why indeed?

57. Our PWA messaging is
at times awful and
short-sighted
E
Engaging
F
Fast
I
Integrated
R
Reliable

58. Moaning travels
upwards and takes a
long time to arrive.
Photo by Janson G: pixabay.com/en/spaceship-model-isolated-enterprise-2749360/

59. It is tough to find
PWAs on FIRE
(that aren’t demos)

60. PWA Stats
(Cloud Four)
aka.ms/pwa-stats

61. Please help the PWA effort

62. Don’t assume your
experience is normal
E
Engaging
F
Fast
I
Integrated
R
Reliable

63. Give feedback and take
part in tools and docs
E
Engaging
F
Fast
I
Integrated
R
Reliable

64. Keep up-to-date before
telling people about PWAs.
E
Engaging
F
Fast
I
Integrated
R
Reliable

65. Promote and celebrate
great examples.
E
Engaging
F
Fast
I
Integrated
R
Reliable

66. I try to stop people to
package awful websites
into containers - again.

67. Please, help!

68. Thanks!
Chris Heilmann
@codepo8