Slides of presentation I gave recently on Progressive Web Apps. In this I describe how to build a PWA and how to debug. I explain how to use Google's LightHouse and Microsoft's PWA Builder to create an app.

2. STEVE
JOBS
“You’ve got everything you
need if you know how to
write apps using the most
modern web standards to
write amazing apps for the
iPhone today”
2007

3. STEVE
JOBS
“You’ve got everything you
need if you know how to
write apps using the most
modern web standards to
write amazing apps for the
iPhone today”
2007

4. STEVE
JOBS
“You’ve got everything you
need if you know how to
write apps using the most
modern web standards to
write amazing apps for the
iPhone today”
2007

5. ALEX
RUSSELL
Progressive Web Apps:
Escaping Tabs Without Losing
Our Soul
2015

6. WHAT ARE
PROGRESSIVE WEB
APPS?

7. WHAT IT’S NOT
A Tool
A Framework

8. WHAT THEY ARE
Progressive
Works on any device and enhance
functionality progressively.
Discoverable
Better discovery and integration
with search.
Linkable
Ability to retain or reload its state
and be shareable from a link.
Responsive
Fit any device’s form factor and
screen size.
Current
Application and content is up to date
when connected to the Internet.
Re-engageable
Promotes re-engagement through
features such as push notifications.
Performant
Works as fast or faster than a native app.
Connected to users
Direct feedback to you through
ratings and reviews
App-like
Looks like a native app and uses the
application shell model with minimal
page refreshes.
Connectivity-agnostic
Works with low connectivity or offline.
Installable
Install on the device’s desktop,
start menu, or task bar making it
readily available.

9. MINIMUM
HTTPS Web App Manifest Service Worker

10. RECOMMENDED
Cross Platform Responsive Deep linking Best Practices

11. SUPPORT

12. WHY?

13. CONNECTIVITY
Service worker takes care of bad connection
• By caching
• Showing custom offline page

14. PLATFORM INDEPENDENT
100% code share
Not in the store (per se)

15. WHY?
 No lengthy installation process
 Don’t occupy device storage
 Discoverable
 Secure
 Fast
 Cheap

16. WHAT ABOUT…?

17. I NEED A NATIVE APP FOR
Geolocation

18. I NEED A NATIVE APP FOR
GeolocationW3C API

19. I NEED A NATIVE APP FOR
Authentication

20. I NEED A NATIVE APP FOR
AuthenticationWeb API

21. I NEED A NATIVE APP FOR
Payment

22. I NEED A NATIVE APP FOR
Payment Request API

23. I NEED A NATIVE APP FOR
USB
Bluetooth
VR
Gamepad

24. I NEED A NATIVE APP FOR
Web USB API
Web Bluetooth API
WebVR
Web Gamepad API

25. IF IT’S REALLY NOT
THERE (YET)

26. WHO?

27. EXAMPLES
Starbucks

28. EXAMPLES
Twitter

29. EXAMPLES
Pinterest

30. EXAMPLES
Instagram

31. MAKING PWA

32. ANALYZING

33. LIGHTHOUSE

34. LIGHTHOUSE
 Chrome Extension
 Dev Tools Audit
 CLI
Lighthouse analyzes web apps and web
pages, collecting modern performance
metrics and insights on developer best
practices.

35. WEBHINT
webhint is a linting tool that will help you with your site's accessibility, speed,
security and more, by checking your code for best practices and common
error
 Online scanner
 CLI
 Visual Studio Code integration

36. GETTING STARTED

37. PWA BUILDER
1. Provide a URL
2. Generate a Manifest
3. Build a Service Worker
4. Publish the App
Generate your Progressive Web App

38. WEB APP MANIFEST
 W3C standard
 Contains all info about app
 Working Draft - 18 October 2018
<link rel="manifest" href="/manifest.webmanifest">

39. SERVICE WORKER
 Runs in background
 Handles cache, push, sync
 programmable network proxy

40. SERVICE
WORKER
Lifecycle

41. FETCH
 Modern replacement of XMLHttpRequest
 Relies on promises

42. WHAT’S NEXT?

43. NOT SHOWN

44. NOT SHOWN
 Push notifications
 Notifications API + Push API
 Build on top of the Service Worker API
 Background Sync
 Defer actions until stable connection

45. FRAMEWORKS

46. Performance Resilience Progressive web app
JavaScript Libraries for adding offline support to web apps
• Precaching
• Runtimecaching Strategies
• Request routing
• Backgroundsync
• Helpful debugging

47. PREACT-CLI
 App creation
 Index.html app shell generation
 Browser list autoprefixing
 Firebase configuration for server
push
 Powered by sw-precache

48. VUE
Vue-cli & @vue/cli-plugin-pwa
 Uses WorkBox
 Can automatically generate service worker or
start with existing one

49. ANGULAR
@angular-cli
 ng add @angular/pwa - Turn your application into
a PWA by adding an app manifest and service
worker

50. TIPS

51. TESTING
 F12 tools
 Connect phone with USB
 Chrome://inspect
 Android debugger needs to be running
“adb.exe start-server”
 Custom domain with SSL
 DNS directs to local IP, ie
192.168.1.13

52. TESTING
• Test on real devices
• Throttling is not enough
• Offline checkbox doesn’t affect websockets

53. PWA SLACK
https://join.slack.com/t/progressive-web-apps/shared_invite/enQtMjY0NDI2MjAxNTc1LWM4ZWYyNDZhNDRlZDUyNTk5YThhZGQwOWRhZTkwZjAwNTlhNzA3MzY0ZWM0NWQxZmVkZjJhNWEzNTZkYmQ3ZTY
• Events
• Tooling
• Help
• Examples

54. SERVICEWORKE.RS

55. ANGULAR CONNECTNovember 6-7

56. CHROME DEV SUMMITNovember 12-13

57. THANK YOU!
Timmy Kokke
https://timmykokke.com
https://youtube.com/c/sorskoot
https://webxr.nl
@sorskoot
Timmy.kokke@centric.eu