Slides for the session at JSConfEU in Berlin June 2019. How to create Progressive Web Apps.

1. Maximiliano Firtman
@firt
The modern PWA Cheat Sheet

6. App Ecosystem is broken

14. Progressive Web Apps

17. Web App

18. Web App
Web App
Service Workers

19. Web AppWeb App
Web App
Service Workers
Distribution

21. PWA Support - Mobile
Only from stores

22. PWA Support - Mobile
Only from stores

23. PWA Support - Desktop OS
Win 7 / 8.x

24. Modern Cheat Sheet

25. Understand App Lifecycle

26. PWA LifeCycle
App Loading

27. PWA LifeCycle
App goes background
App Loading
⚡visibilitychange

28. App goes background
App might be suspended
App Loading
⚡visibilitychange
⚡freeze 🆕
PWA LifeCycle

29. PWA LifeCycle
App goes background
App will be suspended
App Loading
⚡visibilitychange
⚡freeze 🆕
User goes back to AppApp in memory

30. PWA LifeCycle
App goes background
App will be suspended
App Loading
⚡visibilitychange
⚡freeze 🆕
User goes back to App ⚡resume 🆕
⚡visibilitychange
App in memory

31. PWA LifeCycle
App goes background
App will be suspended
App Loading
⚡visibilitychange
⚡freeze 🆕
App was discarded

32. PWA LifeCycle
App goes background
App will be suspended
App Loading
⚡visibilitychange
⚡freeze 🆕
User goes back to AppApp was discarded
❓document.wasDiscarded 🆕
⚡load

33. Not on iOS!!!

34. Not on iOS!!!

35. Not on iOS!!!

36. For iOS at least
• Provide a reload action within your UI
• Provide full navigation apart from gestures

37. App Resources by SW

39.
if (navigator.storage && navigator.storage.persist) {
navigator.storage.persist();
}
JavaScript
Persistent Storage API

40. Progressive Experience

41. One App for All
• Devices
• Connection Latency
• Battery Level

42. YouTube mental model

43. Know about context with APIs
• Network Information
• Performance Observers
• Device Memory

44. Reporting API
• Report-To header with a server endpoint
• Browser will send you reports

45. Consistent Experience
• Change SW’s cache policy
• SSR vs CSR
• Reduce amount of loaded data

46. Platform Integration

47. Web Authentication

48. Web Authentication

49. Web Share API
Share content from your App

50. <code>
navigator.share({
title: 'Checkout this funny photo',
text: '',
url: window.location.href
});
JAVASCRIPT

51. Web Share API

52. Web Share Target API

53. Web APK
APK
Icons
PWA Certified URL
Cloud-based
Generation

55. WebAPK now available on Samsung
Signed by Samsung Apps

56. Desktop multiple window

57. Desktop multiple window

58. Desktop multiple window
• Use the Service Worker and messages to control
• Future looks promising

63. Installation Experience

64. Web AppWeb App
Web App
Service Workers
Distribution

65. Web App
Manifest

66. Web App
Manifest

67. Web App
Manifest

68. Web App
Manifest

69. Installation UI

70.
let installPrompt;
window.addEventListener("beforeinstallprompt", e => {
//TODO: enable Install button
e.preventDefault();
installPrompt = e;
});
JavaScript
Installation UI

71.
let installPrompt;
window.addEventListener("beforeinstallprompt", e => {
//TODO: enable Install button
e.preventDefault();
installPrompt = e;
});
JavaScript
Installation UI

72.
let installPrompt;
window.addEventListener("beforeinstallprompt", e => {
//TODO: enable Install button
e.preventDefault();
installPrompt = e;
});
JavaScript
Installation UI

73.
buttonInstall.addEventListener("click", e => {
installPrompt.prompt();
});
JavaScript
Installation UI

74. Web App
Manifest
iOS
Meta data

75. Web App
Manifest
iOS
Meta data
App
Launcher

76. APPX Generation
App Launcher for Windows

77. Packaged App Generation
App Launcher for kaiOS/Jio

78. Play Store for Android?

79. 1-800 Flowers
A good PWA
A native Android App (20MB)

83. 1-800 Flowers PWA
They had a native Android App (20MB)
Replaced by a PWA (700KB)

84. App Launcher for Android
Trusted Web Activities

85. APK
Icons
PWA Certified
URL
TWA
Standalone mode
App Launcher for Android

86. App Launcher for iOS

87. App Launcher for iOS

89. Store Distribution
Be careful

92. Store Distribution
Check the store rules!

93. The modern PWA Cheat Sheet
Basic PWA support
Pass PWA Criteria
Service Worker
Web App Manifest
Web Performance
App Lifecycle
Save & restore state on freeze
iOS Reload action
Request Persistent Storage
Track events
Progressive Experience
Read Context APIs
Implement Reporting API
Pick quality & let user change it
You are not an average user
Platform Integration
WebAuthn & WebShare
Understand WebAPK
Multi-window support
iOS meta data
Installation Experience
Provide Custom Install UI
Track Installation events
Create App Launchers
Publish on App Stores
@firt