PROGRESSIVE WEB APPLICATIONS @hdjirdeh 

No content

No content

WEBPAGE INGREDIENT INGREDIENT INGREDIENT INGREDIENT INGREDIENT INGREDIENT 

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

No content

No content

NETWORK CONNECTION IS SECURE 

No content

CAN WORK WITH POOR/NO CONNECTION 

DOWNASAUR 

Service workers 

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

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

No content

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

No content

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); }); }); } if ('serviceWorker' in navigator) { window.addEventListener('load', function () { navigator.serviceWorker.register('/service-worker.js') 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); }); }); } 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); }); }); } 

No content

APPLICATION SHELL 

APPLICATION SHELL CONTENT 

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' 

BUILD PROCESS 

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

workbox-webpack-plugin 

DYNAMIC CONTENT 

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 

networkFirst cacheFirst fastest cacheOnly networkOnly 

APP SHELL + DYNAMIC CACHING 

OFFLINE SUPPORT + FASTER REPEAT VISITS 

No content

preview.starbucks.com 

CAN I HAZ? Under development 

PAGE LOAD IS FAST 

No content

CSS JS PNG 



JS JS 

as="script" as="style" as="font" as="audio" as="image" as="video" 



preload-webpack-plugin 

CAN I HAZ? Partial Support 

HTTP/2 Server Push 

No content

No content

Link: ; rel=preload; as=style Link: ; rel=preload; as=script 

No content

Link: ; rel=preload; as=style; nopush Link: ; rel=preload; as=script 

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

Pushing too much Pushing unused assets Cache? 

Service Worker H2 Push 

BUNDLES 

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

CODE SPLITTING 

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' 

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

No content

WEBPACK BUNDLE ANALYZER 

bundlesize 

FIRST MEANINGFUL PAINT TIME TO INTERACTIVE 

SHOW SOME CONTENT WITHOUT JAVASCRIPT 

Sorry, JavaScript needs to be enabled in order to run this application. 

SERVER SIDE RENDERING 

INSTALL ON YOUR DEVICE 



{ 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" } 

APP INSTALL BANNER 

INSTALL TO HOMESCREEN 

SPLASH SCREEN 

APP LOADED 

CAN I HAZ? Under development 

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



No content

No content

Native Progressive Web 

Progressive web apps can replace native apps 

@hdjirdeh