Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Progressive Web Apps - fullStackTO/FITC Web Unl...

Avatar for Houssein Djirdeh Houssein Djirdeh
September 26, 2017
230
0

Progressive Web Apps - fullStackTO/FITC Web Unleashed

Avatar for Houssein Djirdeh

Houssein Djirdeh

September 26, 2017

More Decks by Houssein Djirdeh

See All by Houssein Djirdeh
Performance Empathy
Avatar for Houssein Djirdeh housseindjirdeh
0
210
The Art of Lazy Loading
Avatar for Houssein Djirdeh housseindjirdeh
0
570
GitPoint - Lunch and Learn
Avatar for Houssein Djirdeh housseindjirdeh
0
130
Once you go PRPL - FullStackFest
Avatar for Houssein Djirdeh housseindjirdeh
0
45
Once you go PRPL: SeattleJS
Avatar for Houssein Djirdeh housseindjirdeh
0
200

Featured

See All Featured
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
480
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
350
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
210
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2.1k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.5k
Design in an AI World
Avatar for tapps tapps
1
250
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
210
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
4.2k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Claude Code のすすめ
Avatar for schroneko schroneko
67
230k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8.2k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.3k

Transcript

  1. PROGRESSIVE WEB APPLICATIONS @hdjirdeh

  2. None
  3. None

  4. WEBPAGE INGREDIENT INGREDIENT INGREDIENT INGREDIENT INGREDIENT INGREDIENT

  5. PWAs use modern web capabilities to provide a reliable, engaging

    and fast user experience on any device reliable engaging fast on any device
  6. None
  7. None

  8. NETWORK CONNECTION IS SECURE

  9. None

  10. CAN WORK WITH POOR/NO CONNECTION

  11. DOWNASAUR

  12. Service workers

  13. A service worker is a script that runs in the

    background of your browser when you view a webpage

  14. ADDING A SERVICE WORKER 1. Create the file and write

    the logic yourself 2. Use a library
  15. None

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

  17. None

  18. <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>
  19. None

  20. APPLICATION SHELL

  21. APPLICATION SHELL CONTENT

  22. 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'

  23. BUILD PROCESS

  24. npm install workbox-cli --save-dev // package.json "scripts": { //... "build":

    "{build} && workbox-cli generate:sw" }

  25. workbox-webpack-plugin

  26. DYNAMIC CONTENT

  27. 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

  28. networkFirst cacheFirst fastest cacheOnly networkOnly

  29. APP SHELL + DYNAMIC CACHING

  30. OFFLINE SUPPORT + FASTER REPEAT VISITS

  31. None

  32. preview.starbucks.com

  33. CAN I HAZ? Under development

  34. PAGE LOAD IS FAST

  35. None

  36. CSS JS PNG

  37. <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>

  38. JS JS

  39. <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"

  40. <link rel="prefetch">

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

  42. CAN I HAZ? Partial Support

  43. HTTP/2 Server Push

  44. None
  45. None

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

  47. None

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

  49. A Comprehensive Guide To HTTP/2 Server Push - Jeremy Wagner

    https://rebrand.ly/http2

  50. Pushing too much Pushing unused assets Cache?

  51. Service Worker H2 Push

  52. BUNDLES

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

  54. CODE SPLITTING

  55. 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'

  56. import Loadable from 'react-loadable'; import Loading from './loading.component'; const LoadableComponent

    = Loadable({ loader: () => import('./details.component'), loading: Loading, });
  57. None

  58. WEBPACK BUNDLE ANALYZER

  59. bundlesize

  60. FIRST MEANINGFUL PAINT TIME TO INTERACTIVE

  61. SHOW SOME CONTENT WITHOUT JAVASCRIPT

  62. <noscript> Sorry, JavaScript needs to be enabled in order to

    run this application. </noscript>

  63. SERVER SIDE RENDERING

  64. INSTALL ON YOUR DEVICE

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

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

  67. APP INSTALL BANNER

  68. INSTALL TO HOMESCREEN

  69. SPLASH SCREEN

  70. APP LOADED

  71. CAN I HAZ? Under development

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

  73. <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">
  74. None
  75. None

  76. Native Progressive Web

  77. Progressive web apps can replace native apps

  78. @hdjirdeh