Presented at Web Unleashed 2017 More info at www.fitc.ca/webu Overview Most people feel a lot less restricted to open up a browser in lieu of installing a mobile app. The convenience, security and simplicity of just typing a URL into an address bar is a powerful advantage of the web, and Progressive Web Apps (PWA) combine this with the feel of native applications. In short, PWAs are applications that use modern web capabilities to provide a user experience similar to that of mobile and native apps. This presentation will go over how you can add a number of progressive aspects to your application including faster load times, offline support and the ability to install to your mobile home screen. Objective Explain the concept of Progressive Web Apps, how to build one and how to improve apps built with React, Angular or any other framework without adding too much complexity. Target Audience Front-end developers Assumed Audience Knowledge Some understanding of building web applications with a JavaScript framework or library Five Things Audience Members Will Learn What exactly is a Progressive Web App How to use Lighthouse to test and improve your webpage Improve app loading times with a Service Worker App Shell Use a App Shell + Dynamic Content model to allow for offline support Add a web app manifest file to allow for installing an app to a mobile home screen

1. XKCD/Installing

2. PROGRESSIVE WEB
APPLICATIONS
@hdjirdeh

5. WEBPAGE
INGREDIENT
INGREDIENT
INGREDIENT
INGREDIENT
INGREDIENT
INGREDIENT

6. PWAs use modern web capabilities to
provide a reliable, engaging and fast
user experience on any device
reliable engaging fast
on any device

9. NETWORK CONNECTION
IS SECURE

11. CAN WORK WITH
POOR/NO CONNECTION

12. DOWNASAUR

13. Service workers

14. A service worker is a script that
runs in the background of your
browser when you view a webpage

15. ADDING A SERVICE WORKER
1. Create the file and write the logic yourself
2. Use a library

17. npm install workbox-cli --global
workbox-cli generate:sw

19. <script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('/service-worker.js').then(function(){
// Registration was successful
console.log('ServiceWorker registration successful!');
}).catch(function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
});
}
</script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('/service-worker.js')
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('/service-worker.js').then(function(){
// Registration was successful
console.log('ServiceWorker registration successful!');
}).catch(function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
});
}
</script>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('/service-worker.js').then(function(){
// Registration was successful
console.log('ServiceWorker registration successful!');
}).catch(function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
});
}
</script>

21. APPLICATION SHELL

22. APPLICATION SHELL CONTENT

23. module.exports = {
globDirectory: 'dist/',
globPatterns: ['**/*.{js,png,svg,html,json}'],
swDest: 'dist/service-worker.js',
navigateFallback: '/index.html'
};
module.exports = {
globDirectory: 'dist/',
globPatterns: ['**/*.{js,png,svg,html,json}'],
swDest: 'dist/service-worker.js',
navigateFallback: '/index.html',
};
module.exports = {
globDirectory: 'dist/',
globPatterns: ['**/*.{js,png,svg,html,json}'],
swDest: 'dist/service-worker.js',
navigateFallback: '/index.html'
};
globDirectory: 'dist/'
globPatterns: ['**/*.{js,png,svg,html,json}']
swDest: 'dist/service-worker.js'
navigateFallback: '/index.html'

24. BUILD PROCESS

25. npm install workbox-cli --save-dev
// package.json
"scripts": {
//...
"build": "{build} && workbox-cli generate:sw"
}

26. workbox-webpack-plugin

27. DYNAMIC CONTENT

28. module.exports = {
globDirectory: 'dist/',
globPatterns: ['**/*.{js,png,svg,html,json}'],
swDest: 'dist/service-worker.js',
navigateFallback: '/index.html',
runtimeCaching: [
{
urlPattern: /^https://your.api.com/.*/,
handler: 'networkFirst'
}
]
};
module.exports = {
globDirectory: 'dist/',
globPatterns: ['**/*.{js,png,svg,html,json}'],
swDest: 'dist/service-worker.js',
navigateFallback: '/index.html',
runtimeCaching: [
{
urlPattern: /^https://your.api.com/.*/,
handler: 'networkFirst'
}
]
};
runtimeCaching: [
{
urlPattern: /^https://your.api.com/.*/,
handler: 'networkFirst'
}
]
runtimeCaching: [
{
urlPattern: /^https://your.api.com/.*/,
handler: 'networkFirst'
}
]
networkFirst

29. networkFirst
cacheFirst
fastest
cacheOnly
networkOnly

30. APP SHELL
+
DYNAMIC CACHING

31. OFFLINE SUPPORT
+
FASTER REPEAT VISITS

33. preview.starbucks.com

34. CAN I HAZ?
Under development

35. PAGE LOAD IS FAST

37. CSS
JS
PNG

38. <link rel="preload" as="script" href="script.js"><link rel="preload" as="script" href="script.js">
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!--(>'-')> <('-'<)-->
<script src="script.js"></script>
</body>
</html>

39. JS
JS

40. <link rel="preload" as="script" href="script.js">as="script"
<link rel="preload" as="style" href="styles.css">as="style"
as="font"
as="audio"
as="image"
as="video"

41. <link rel="prefetch">

42. preload-webpack-plugin
<link rel="preload" href="chunk.cf7bd8260d685f704bd0.js" as="script">
<link rel="prefetch" href="chunk.cf7bd8260d685f704bd0.js">

43. CAN I HAZ?
Partial Support

44. HTTP/2 Server Push

47. Link: </app/style.css>; rel=preload; as=style
Link: </app/script.js>; rel=preload; as=script

49. Link: </app/style.css>; rel=preload; as=style; nopush
Link: </app/script.js>; rel=preload; as=script

50. A Comprehensive Guide To HTTP/2 Server Push - Jeremy Wagner
https://rebrand.ly/http2

51. Pushing too much
Pushing unused assets
Cache?

52. Service WorkerH2 Push

53. BUNDLES

54. 4KB - 145KB
Size of JS frameworks, gzipped
Restuta/framework-sizes.md GIST

55. CODE SPLITTING

56. export const routes: Routes = [
{ path: '', redirectTo: 'main', pathMatch: 'full' },
{ path: 'main', component: MainComponent },
{ path: 'details', loadChildren: 'details/details.module#DetailsModule' }
];
export const routes: Routes = [
{ path: '', redirectTo: 'main', pathMatch: 'full' },
{ path: 'main', component: MainComponent },
{ path: 'details', loadChildren: 'details/details.module#DetailsModule' }
];
loadChildren: 'details/details.module#DetailsModule'

57. import Loadable from 'react-loadable';
import Loading from './loading.component';
const LoadableComponent = Loadable({
loader: () => import('./details.component'),
loading: Loading,
});

59. WEBPACK BUNDLE ANALYZER

60. bundlesize

61. FIRST MEANINGFUL PAINT
TIME TO INTERACTIVE

62. SHOW SOME CONTENT
WITHOUT JAVASCRIPT

63. <noscript>
Sorry, JavaScript needs to be enabled in
order to run this application.
</noscript>

64. SERVER SIDE RENDERING

65. INSTALL ON
YOUR DEVICE

66. <link rel="manifest" href="/manifest.json">

67. {
name: "Angular 2 HN",
short_name: "Angular 2 HN",
icons: [
{
src: "assets/icons/android-chrome-192x192.png",
sizes: "192x192",
type: "image/png"
},
// ...
],
theme_color: "#b92b27",
background_color: "#ffffff",
display: "standalone",
orientation: "portrait"
}

68. APP INSTALL BANNER

69. INSTALL TO HOMESCREEN

70. SPLASH SCREEN

71. APP LOADED

72. CAN I HAZ?
Under development

73. SAFARI ON IOS
Can install to homescreen
but that’s it…

74. <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" sizes="180x180" href="icon.png">
<link rel="apple-touch-icon" sizes="120x120" href="icon-120x120.png">
<link rel="apple-touch-icon" sizes="152x152" href="icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="icon-180x180.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" sizes="180x180" href="icon.png">
<link rel="apple-touch-icon" sizes="120x120" href="icon-120x120.png">
<link rel="apple-touch-icon" sizes="152x152" href="icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="icon-180x180.png">

77. NativeProgressive Web

78. Progressive web apps can replace native apps

79. @hdjirdeh