Slides for a talk at Web Directions 2018 in Melbourne, Australia. The current state of PWAs as August 2018 and the challenges and problems we have, and how to deal with them.

1. Maximiliano Firtman
@firt
Uncovering the Secrets of
Progressive Web Apps

7. Progressive Web Apps

8. An innovative new way to
create applications for
mobile devices

9. you write apps that look and
behave exactly like apps on
the phone

10. Just put them on an internet
server.

11. Instant distribution.
Easy to update

12. 3years ago

19. 11years ago

22. 19years ago

25. 0years ago

26. #YearOfPWA

27. Ideal for all those apps that are just
consuming web content or web
services

30. State of the Platform

31. Every Web Browser
🤔

32. App Support - Mobile OS
iOS 11.3+
Only from store Only from store

33. Careful with Social Network
Browsing
🤔

36. App Support - Desktop OS
Only from store

41. Secrets

42. Secrets
Installation

43. Web App Banner
PWA Criteria
Engagement?

44. Installation
Add or Install?
Badging

45. Installation

46. Installation

47. Installation

48. Installation

49. Installation

50. Installation

51. Installation

52. Installation

53. Installation

54. Installation

55. Installation

56. Installation

57. Badging 🤨

58. Install Custom Action

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

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

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

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

63. Install Custom Action
buttonInstall.addEventListener("click", e => {
installPrompt.prompt();
});
JavaScript

64. Secrets
Dev Tools

65. Testing and Debugging

66. iOS Simulator

67. iOS Simulator

68. Android Emulator

69. Android Emulator

70. Android Emulator

71. Localhost on Android

72. Localhost on Android

73. Localhost on Android

74. Localhost on Android

75. Localhost on Android

76. Chromebook Emulator

77. Chromebook Emulator
https://developer.android.com/topic/arc/emulator

78. Chromebook Emulator

79. Secrets
LifeCycle & Storage

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

81. PWA LifeCycle
First Visit Browser Loading

82. PWA LifeCycle
First Visit
SW Installation ⚡install
⚡activate
Browser Loading

83. PWA LifeCycle
First Visit
SW Installation
User installs PWA
⚡install
⚡activate
Browser Loading
⚡appinstalled

84. PWA LifeCycle
Second visit App Loading
❓display-mode
❓start_url

85. PWA LifeCycle
Second visit
App goes background
App Loading
⚡visibilitychange
❓display-mode
❓start_url

86. PWA LifeCycle
Second visit
App goes background
App is terminated on iOS
App Loading
⚡visibilitychange
❓display-mode
❓start_url
😣

87. PWA LifeCycle
Second visit
App goes background
App might be suspended
App Loading
⚡visibilitychange
❓display-mode
❓start_url
⚡freeze 🆕

88. PWA LifeCycle
Second visit
App goes background
App will be suspended
App Loading
⚡visibilitychange
❓display-mode
❓start_url
⚡freeze 🆕
User goes back to App ⚡resume 🆕
⚡visibilitychange
App in memory

89. PWA LifeCycle
Second visit
App goes background
App will be suspended
App Loading
⚡visibilitychange
❓display-mode
❓start_url
⚡freeze 🆕
User goes back to App ❓document.wasDiscarded 🆕
⚡load
App was discarded

90. Secrets
User Interface

91. Pull to Refresh

92. Pull to Refresh
body {
/* Disables pull-to-refresh */
overscroll-behavior-y: contain;
}
CSS

93. Avoid App Translation

94. Avoid App Translation
<meta name="google" content="notranslate">
HTML

95. Avoid App Translation
if (matchMedia('(display-mode: standalone)').matches) {
document.querySelector("head").innerHTML +=
'<meta name="google" content="notranslate">';
}
JavaScript

96. Secrets
Fighting Challenges

97. WebAPK
Link Capturing (Intents)

98. Careful with Link Capturing

105. Use environment margins
body {
margin-top: env(safe-area-inset-top);
margin-left: env(safe-area-inset-left);
margin-bottom: env(safe-area-inset-bottom);
margin-right: env(safe-area-inset-right);
}
CSS
<meta name="viewport" content="..., viewport-fit: cover" />
HTML

107. Save state
Use Page Visibility API
Restore state

109. Use Cache Storage
Standalone PWASafari
Web Storage
IndexedDB
Cookies
Web Storage
IndexedDB
Cookies

110. Use Cache Storage
Standalone PWASafari
Web Storage
IndexedDB
Cookies
Web Storage
IndexedDB
Cookies
Cache Storage

111. Launch Images

112. Launch Images
<link rel="apple-touch-startup-image"
src="image-screen-size.png">
<link rel="apple-touch-startup-image"
src="launch-iphonex.png"
sizes="1125x2436">
HTML

113. Launch Images

114. Launch Images

115. Launch Images

116. Launch Images

117. Remove support for iOS

118. Remove support for iOS

119. Secrets
App Stores

120. App Store

121. App Store
WebView and LOT of native code

122. App Store
Trusted Web Activities
coming on Chrome 69 later this year

123. App Store
APK
Icons
PWA Certified
URL
TWA
Standalone mode

124. Store Distribution
Microsoft Store
kaiOS store coming
Play Store coming with TWA
App Store?

125. PWAs are great

126. Let’s use a critical eye

127. Remember our Goals

128. Goals
A good,

129. Goals
accessible,

130. Goals
and performant

131. Goals
User Experience

132. uee>
<blink>@firt - firt.mobi</blink>