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.

Progressive Web Apps

272 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

×