Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Build a production ready PWA with Angular and Firebase

85 visualizaciones

Publicado el

This talk covers how to build, optimise and host your PWA to provide native-like app experiences. It provides guidelines for best practices and platform optimisations. It will also score 100 on Lighthouse PWA audit!

Adding PWA capabilities to your app is easy with adding @angular/pwa via ng cli. However, you need to do more on your app to create best experiences for your users on multiple platforms. This session will cover what you need to do to optimise your PWA for the production with the guidelines of best practices and platform optimisations.

These optimisations include iOS compatibility, web app manifest and ngsw configuration along with firebase server configuration. I'll demonstrate the steps required for delivering a PWA on Firebase which will be available immediately for the audience.

Publicado en: Software
  • DOWNLOAD FULL BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí

Build a production ready PWA with Angular and Firebase

  1. 1. B U I L D A P R O D U C T I O N R E A D Y P WA W I T H A N G U L A R A N D F I R E B A S E
  2. 2. @onderceylan Ö N D E R C E Y L A N @onderceylan Sharing knowledge on #javascript, #typescript, #angular, #ionic and #pwa JS Squad Lead @LINKIT Software Technical Lead @KLM Speaker, Organiser @ITNEXT Speaker, Organiser @GDG NL
  3. 3. @onderceylan S TAT E O F T H E P WA D E V E L O P M E N T
  4. 4. @onderceylan N U M B E R O F P WA S 6647 unique PWAs > https://blog.tomayac.com/2018/07/09/progressive-web-apps-in-the-http-archive-143748
  5. 5. @onderceylan AV E R A G E P WA S C O R E S https://blog.tomayac.com/2018/07/09/progressive-web-apps-in-the-http-archive-143748
  6. 6. @onderceylan A D D I N G P WA S C H E M AT I C T O A N A N G U L A R A P P
  7. 7. @onderceylan A D D I N G T H E P WA S C H E M AT I C
  8. 8. @onderceylan Use npx ng command in your Angular project without installing a global @angular/cli package on your system. such tip wow so npx https://blog.npmjs.org/post/162869356040/ introducing-npx-an-npm-package-runner
  9. 9. @onderceylan C H A N G E S E T A F T E R A D D I N G 
 P WA S C H E M AT I C
  10. 10. @onderceylan C H A N G I N G W E B A P P M A N I F E S T F I L E
  11. 11. @onderceylan A N G U L A R ’ S M A N I F E S T F I L E manifest.json
  12. 12. @onderceylan I N S P E C T I N G T H E M A N I F E S T
  13. 13. @onderceylan A D D I N G A D E S C R I P T I O N manifest.json
  14. 14. @onderceylan A D D I N G A D E S C R I P T I O N https://www.w3.org/TR/appmanifest/#description-member https://developer.mozilla.org/en-US/docs/Web/Manifest#description
  15. 15. @onderceylan Providing a name, description and an app icon that is at least 512 x 512 pixels will help your PWA to be automatically indexed and packaged on Microsoft Store. such icon wow so index https://docs.microsoft.com/en-us/microsoft- edge/progressive-web-apps/microsoft- store#automatic-pwa-importing-with-bing
  16. 16. @onderceylan T R A C K I N G T H E S TA R T U R L manifest.json
  17. 17. @onderceylan D I S P L AY I N G A D D T O H O M E S C R E E N G U I D E L I N E S
  18. 18. @onderceylan A 2 H S P R O M P T O N A N D R O I D
  19. 19. @onderceylan • The web app is not already installed • Meets a user engagement heuristic • Includes a web app manifest that includes: • short_name or name • icons must include a 192px and a 512px sized icons • start_url • display must be one of: fullscreen, standalone,
 or minimal-ui • Served over HTTPS (required for service workers) • Has registered a service worker with a fetch event handler A 2 H S C R I T E R I A O N A N D R O I D 👤 👤
  20. 20. @onderceylan short_name field in your manifest will represent your PWA's name when it's added to a home screen. Additionally, name field will be used on Add to Home Screen prompt on Android! such name wow so android https://developers.google.com/web/ fundamentals/app-install-banners/
  21. 21. @onderceylan
  22. 22. @onderceylan A 2 H S P R O M P T O N I O S
  23. 23. @onderceylan A 2 H S P R O M P T O N I O S
  24. 24. @onderceylan
  25. 25. @onderceylan A D D I N G M E TA TA G S F O R P L AT F O R M O P T I M I S AT I O N
  26. 26. @onderceylan L A C K O F S TA N D A R D S O N I O S Safari WebKit
  27. 27. @onderceylan L A C K O F S TA N D A R D S O N I O S
  28. 28. @onderceylan https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/ SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
  29. 29. @onderceylan Keep an eye on WebKit Feature Status for tracking the progress of the implementation of web standards. Once Web App Manifest specs is implemented on WebKit, you won't need to use custom meta tags anymore. such manifest wow so webkit https://webkit.org/status/#?search=manifest
  30. 30. @onderceylan https://webkit.org/status/#?search=manifest
  31. 31. @onderceylan A D D I N G M E TA TA G S F O R 
 A P P I C O N S O N I O S index.html
  32. 32. @onderceylan
  33. 33. @onderceylan A D D I N G M E TA TA G S F O R 
 S P L A S H S C R E E N S O N I O S index.html
  34. 34. @onderceylan index.html A D D I N G M E TA TA G S F O R 
 S P L A S H S C R E E N S O N I O S
  35. 35. @onderceylan https://developer.apple.com/design/human-interface-guidelines/ ios/icons-and-images/launch-screen/
  36. 36. @onderceylan
  37. 37. @onderceylan Use an automated tool to generate your splash screen images and their corresponding html codes. Here's an online tool: 
 https://appsco.pe/ developer/splash- screens such automation wow so splash
  38. 38. @onderceylan
  39. 39. @onderceylan A D D I N G M E TA TA G S F O R T H E S TAT U S B A R O N I O S index.html
  40. 40. @onderceylan S TAT U S B A R O P T I O N S O N I O S • white - displays a white status bar with black text and symbols. • black - displays a black status bar and white text and symbols. This is the default behaviour of a PWA on iOS, when this meta tag is not in place. • black-translucent - displays a white text and symbols, with status bar using the same background color of your app's body element.
  41. 41. @onderceylan white black black-translucent S TAT U S B A R O P T I O N S O N I O S
  42. 42. @onderceylan C O N F I G U R I N G 
 A N G U L A R S E R V I C E W O R K E R
  43. 43. @onderceylan A N G U L A R S E R V I C E W O R K E R 
 N G S W - C O N F I G . J S O N
  44. 44. @onderceylan A S S E T G R O U P S I N 
 N G S W - C O N F I G . J S O N
  45. 45. @onderceylan P R E F E T C H M O D E
  46. 46. @onderceylan L A Z Y M O D E
  47. 47. @onderceylan A S S E T G R O U P C O N F I G E X A M P L E : S H E L L ngsw-config.json [partial]
  48. 48. @onderceylan When you use a caching strategy, you must exclude the resources that you'd like to keep fresh. Such as additional service worker files that your app might use — "!/*-sw.js". such cache wow so fresh https://angular.io/guide/service-worker-config
  49. 49. @onderceylan A S S E T G R O U P C O N F I G E X A M P L E : U I A S S E T S ngsw-config.json [partial]
  50. 50. @onderceylan E X T E N D I N G 
 A N G U L A R 
 S E R V I C E W O R K E R
  51. 51. @onderceylan I N T R O D U C I N G Y O U R O W N S E R V I C E W O R K E R src/sw/main-sw.js src/app/app.module.ts
  52. 52. @onderceylan Browsers automatically check byte differences of the attached service worker file, which would be main- sw.js if you've extended ngsw. You should make sure that other sw files that you might import to your main service worker are not cached. such sw wow so cache
  53. 53. @onderceylan
  54. 54. @onderceylan U P D AT I N G 
 Y O U R P WA
  55. 55. @onderceylan
  56. 56. @onderceylan A P P V E R S I O N S A N D U P D AT E C H E C K S
  57. 57. @onderceylan A P P D ATA ngsw-config.json [partial]
  58. 58. @onderceylan S W U P D AT E S E R V I C E
  59. 59. @onderceylan
  60. 60. @onderceylan C O N F I G U R I N G 
 A N G U L A R . J S O N F O R S TAT I C A S S E T S
  61. 61. @onderceylan D E FA U LT A S S E T C O N F I G O F @ A N G U L A R / P WA angular.json [partial]
  62. 62. @onderceylan A D VA N C E D A S S E T C O N F I G angular.json [partial]
  63. 63. @onderceylan Angular’s config files use glob-like pattern to match file names. Example: 
 
 /**/*.html all HTML files. 
 /*.html only HTML files in the root. 
 !/**/*.map exclude all sourcemaps. such match wow so glob https://angular.io/guide/service-worker- config#glob-patterns
  64. 64. @onderceylan H O S T I N G Y O U R P WA O N F I R E B A S E
  65. 65. @onderceylan
  66. 66. @onderceylan
  67. 67. @onderceylan F I R E B A S E C L I
  68. 68. @onderceylan I N I T I A L I S I N G F I R E B A S E C O N F I G
  69. 69. @onderceylan I N I T I A L I S I N G F I R E B A S E C O N F I G
  70. 70. @onderceylan C O N F I G U R I N G 
 A F I R E B A S E 
 H O S T I N G 
 F O R Y O U R P WA
  71. 71. @onderceylan firebase.json
  72. 72. @onderceylan Do not deploy any file that keep your credentials or any other confidential info under no circumstances. Make sure to ignore any configuration file you have in your public folder. such security wow so public
  73. 73. @onderceylan
  74. 74. @onderceylan A D D I N G C U S T O M H T T P H E A D E R S F O R C A C H I N G
  75. 75. @onderceylan A D D I N G C U S T O M H T T P H E A D E R S F O R C A C H I N G Long cache lifetime and compressed static resources firebase.json
  76. 76. @onderceylan K E E P I N G Y O U R A D D I T I O N A L S E R V I C E W O R K E R F I L E S F R E S H Rule for keeping all service worker files matching with the file name pattern **/*-sw.js fresh firebase.json
  77. 77. @onderceylan Introduce vendor chunk to your production build config of your Angular app - see vendorChunk option in angular.json. This will help on your PWA's cache strategy as you most likely will not update vendor libraries too often. such vendor wow so chunk
  78. 78. @onderceylan A D D I N G C U S T O M H T T P H E A D E R S F O R C A C H I N G {1} Production build output of Angular where vendor chunk is enabled
  79. 79. @onderceylan D E P L O Y I N G 
 Y O U R P WA T O F I R E B A S E
  80. 80. @onderceylan D E P L O Y M E N T O N F I R E B A S E C L I
  81. 81. @onderceylan A U D I T I N G 
 Y O U R P WA W I T H L I G H T H O U S E
  82. 82. @onderceylan U S I N G O N L I N E A U D I T R U N N E R https://developers.google.com/web/tools/lighthouse/run
  83. 83. @onderceylan U S I N G C H R O M E D E V T O O L S
  84. 84. @onderceylan U S I N G L I G H T H O U S E C L I
  85. 85. @onderceylan Executing nightly regressions on your production app to monitor it against updated PWA audits will help you to align with future PWA best practices as the list of audits get updated in time. such audit wow so nightly
  86. 86. @onderceylan @onderceylan Follow me on Twitter T H A N K Y O U !
  87. 87. @onderceylan Q U E S T I O N S ? @onderceylan Follow me on Twitter

×