Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
XKCD/Installing
PROGRESSIVE WEB
APPLICATIONS
@hdjirdeh
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 ...
NETWORK CONNECTION
IS SECURE
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
npm install workbox-cli --global
workbox-cli generate:sw
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.registe...
APPLICATION SHELL
APPLICATION SHELL CONTENT
module.exports = {
globDirectory: 'dist/',
globPatterns: ['**/*.{js,png,svg,html,json}'],
swDest: 'dist/service-worker.js'...
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'...
networkFirst
cacheFirst
fastest
cacheOnly
networkOnly
APP SHELL
+
DYNAMIC CACHING
OFFLINE SUPPORT
+
FASTER REPEAT VISITS
preview.starbucks.com
CAN I HAZ?
Under development
PAGE LOAD IS FAST
CSS
JS
PNG
<link rel="preload" as="script" href="script.js"><link rel="preload" as="script" href="script.js">
<html lang="en">
<head>...
JS
JS
<link rel="preload" as="script" href="script.js">as="script"
<link rel="preload" as="style" href="styles.css">as="style"
a...
<link rel="prefetch">
preload-webpack-plugin
<link rel="preload" href="chunk.cf7bd8260d685f704bd0.js" as="script">
<link rel="prefetch" href="ch...
CAN I HAZ?
Partial Support
HTTP/2 Server Push
Link: </app/style.css>; rel=preload; as=style
Link: </app/script.js>; rel=preload; as=script
Link: </app/style.css>; rel=preload; as=style; nopush
Link: </app/script.js>; 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 WorkerH2 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: MainCompon...
import Loadable from 'react-loadable';
import Loading from './loading.component';
const LoadableComponent = Loadable({
loa...
WEBPACK BUNDLE ANALYZER
bundlesize
FIRST MEANINGFUL PAINT
TIME TO INTERACTIVE
SHOW SOME CONTENT
WITHOUT JAVASCRIPT
<noscript>
Sorry, JavaScript needs to be enabled in
order to run this application.
</noscript>
SERVER SIDE RENDERING
INSTALL ON
YOUR DEVICE
<link rel="manifest" href="/manifest.json">
{
name: "Angular 2 HN",
short_name: "Angular 2 HN",
icons: [
{
src: "assets/icons/android-chrome-192x192.png",
sizes: "192...
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…
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black...
NativeProgressive Web
Progressive web apps can replace native apps
@hdjirdeh
Progressive Web Apps
Progressive Web Apps
Progressive Web Apps
Progressive Web Apps
Progressive Web Apps
Progressive Web Apps
Progressive Web Apps
Progressive Web Apps
Progressive Web Apps
Progressive Web Apps
Progressive Web Apps
Progressive Web Apps
Progressive Web Apps
Progressive Web Apps
Progressive Web Apps
Progressive Web Apps
Upcoming SlideShare
Loading in …5
×

Progressive Web Apps

321 views

Published on

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

Published in: Internet
  • Be the first to comment

Progressive Web Apps

  1. 1. XKCD/Installing
  2. 2. PROGRESSIVE WEB APPLICATIONS @hdjirdeh
  3. 3. WEBPAGE INGREDIENT INGREDIENT INGREDIENT INGREDIENT INGREDIENT INGREDIENT
  4. 4. PWAs use modern web capabilities to provide a reliable, engaging and fast user experience on any device reliable engaging fast on any device
  5. 5. NETWORK CONNECTION IS SECURE
  6. 6. CAN WORK WITH POOR/NO CONNECTION
  7. 7. DOWNASAUR
  8. 8. Service workers
  9. 9. A service worker is a script that runs in the background of your browser when you view a webpage
  10. 10. ADDING A SERVICE WORKER 1. Create the file and write the logic yourself 2. Use a library
  11. 11. npm install workbox-cli --global workbox-cli generate:sw
  12. 12. <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>
  13. 13. APPLICATION SHELL
  14. 14. APPLICATION SHELL CONTENT
  15. 15. 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'
  16. 16. BUILD PROCESS
  17. 17. npm install workbox-cli --save-dev // package.json "scripts": { //... "build": "{build} && workbox-cli generate:sw" }
  18. 18. workbox-webpack-plugin
  19. 19. DYNAMIC CONTENT
  20. 20. 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
  21. 21. networkFirst cacheFirst fastest cacheOnly networkOnly
  22. 22. APP SHELL + DYNAMIC CACHING
  23. 23. OFFLINE SUPPORT + FASTER REPEAT VISITS
  24. 24. preview.starbucks.com
  25. 25. CAN I HAZ? Under development
  26. 26. PAGE LOAD IS FAST
  27. 27. CSS JS PNG
  28. 28. <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>
  29. 29. JS JS
  30. 30. <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"
  31. 31. <link rel="prefetch">
  32. 32. preload-webpack-plugin <link rel="preload" href="chunk.cf7bd8260d685f704bd0.js" as="script"> <link rel="prefetch" href="chunk.cf7bd8260d685f704bd0.js">
  33. 33. CAN I HAZ? Partial Support
  34. 34. HTTP/2 Server Push
  35. 35. Link: </app/style.css>; rel=preload; as=style Link: </app/script.js>; rel=preload; as=script
  36. 36. Link: </app/style.css>; rel=preload; as=style; nopush Link: </app/script.js>; rel=preload; as=script
  37. 37. A Comprehensive Guide To HTTP/2 Server Push - Jeremy Wagner https://rebrand.ly/http2
  38. 38. Pushing too much Pushing unused assets Cache?
  39. 39. Service WorkerH2 Push
  40. 40. BUNDLES
  41. 41. 4KB - 145KB Size of JS frameworks, gzipped Restuta/framework-sizes.md GIST
  42. 42. CODE SPLITTING
  43. 43. 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'
  44. 44. import Loadable from 'react-loadable'; import Loading from './loading.component'; const LoadableComponent = Loadable({ loader: () => import('./details.component'), loading: Loading, });
  45. 45. WEBPACK BUNDLE ANALYZER
  46. 46. bundlesize
  47. 47. FIRST MEANINGFUL PAINT TIME TO INTERACTIVE
  48. 48. SHOW SOME CONTENT WITHOUT JAVASCRIPT
  49. 49. <noscript> Sorry, JavaScript needs to be enabled in order to run this application. </noscript>
  50. 50. SERVER SIDE RENDERING
  51. 51. INSTALL ON YOUR DEVICE
  52. 52. <link rel="manifest" href="/manifest.json">
  53. 53. { 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" }
  54. 54. APP INSTALL BANNER
  55. 55. INSTALL TO HOMESCREEN
  56. 56. SPLASH SCREEN
  57. 57. APP LOADED
  58. 58. CAN I HAZ? Under development
  59. 59. SAFARI ON IOS Can install to homescreen but that’s it…
  60. 60. <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">
  61. 61. NativeProgressive Web
  62. 62. Progressive web apps can replace native apps
  63. 63. @hdjirdeh

×