Awesome PWAs with Angular

Progressive Web Apps! We're constantly hearing about PWAs and why we should care about them. But when it comes to making one, we're often left to build out all the core features of a PWA, by hand. Thankfully, we have Angular, and have the right tools to help us out. We'll looks at patterns you can take in your Angular app to start to make it an Progressive Web App, and what tools are available to make sure our app is ready to be a PWA.

Transcript

1. ` Mike Hartington • @mhartington Ionic, Angular GDE AWESOME PWAS WITH ANGULAR
2. LET'S START WITH AN EXPERIMENT
4. 14 SECONDS AVERAGE LOAD
 TIME ON MOBILE
5. AVERAGE EXPERIENCE MBs of JS over the network Slow load times Lower user engagement
6. HOW DO PWAS 
 RELATE TO THIS?
7. PWAs provide an optimized experience 
 that is faster and more resilient
8. –Mike Hartington "Essentially, a responsive web site
 that's fast and works offline"
9. –Mike Hartington "Marketing Words"
10. PROGRESSIVE WEB APPS Fast Progressive Secure Integrated
11. Cool, so can I PWA with Angular?
12. Make it Fast Make it Cache Make it Last
13. MAKE IT FAST
14. Goal: Ship less code Lazy Loading best practices Choosing the right libraries
15. LAZY LOADING Lazy load as much as possible! Reduce initial load time
16. RouterModule.forRoot( [ { path: '', component: ShellPage }, { path: 'search', loadChildren: './search/search.module#SearchModule' }, { path: 'detail/:id', loadChildren: './track-detail/track-detail.module#TrackDetailModule' }, ], { preloadingStrategy: PreloadAllModules } )
17. [ { path: '', redirectTo: '/tutorial', pathMatch: 'full' }, { path: 'app', loadChildren: './pages/tabs-page/tabs-page.module#TabsModule' }, { path: 'tutorial', loadChildren: './pages/tutorial/tutorial.module#TutorialModule', canLoad: [CheckTutorial] } ]
18. import { Injectable } from '@angular/core'; import { CanLoad, Router } from '@angular/router'; import { Storage } from '@ionic/storage'; @Injectable({ providedIn: 'root' }) export class CheckTutorial implements CanLoad { constructor(private storage: Storage, private router: Router) {} canLoad() { return this.storage.get('ion_did_tutorial').then(res  { if (res) { this.router.navigate(['/app', 'tabs', 'schedule']); return false; } else { return true; } }); } }
19. Group common routes in one module Preloading Strategy for loading times
20. THE RIGHT LIBRARIES moment 335KB, Core + Locales date-fns/esm (format) 9KB, ESModule
21. THE RIGHT LIBRARIES lodash 70KB lodash-es (without) 5KB
22. This is how Ionic works Each component, a single ES-Module IonicModule will fetch as needed FUN FACT
23. THE RIGHT LIBRARIES source-map-explorer
 http://bit.ly/2vNgly4 Angular CLI Budgets
 http://bit.ly/2ATuiA5
24. MAKE IT CACHE
25. SERVICE WORKER Proxy for the network Intercepts out-going and incoming data Caching and much more
26. if ('serviceWorker' in navigator) { navigator.serviceWorker.register('service-worker.js') .then(() => console.log('service worker installed')) .catch(err => console.log('Error', err)); }
27. self.addEventListener('activate', (event) => { event.waitUntil( // then create our named cached caches .open('my-sw-cache') .then(function(cache) { // once created, lets add some local resources return cache.addAll([ './build/main.js', './build/main.css' ]); }) .then(function(){ console.log('Service worker is ready, and assets are cached'); })); }); https://serviceworke.rs
29. A lot of overhead Can be complex Best to use a library
30. npm install @angular/service-worker
31. JSON driven approach Precache, Lazy, External Caching Strategy and age
32. { "index": "/index.html", "assetGroups": [ { "name": "app", "installMode": "prefetch", "resources": { "files": ["/index.html", "/*.css", "/*.js"] } }, ], "dataGroups": [...] }
33. import { ServiceWorkerModule } from '@angular/service-worker'; @NgModule({ declarations: [AppComponent], imports: [ ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production }), BrowserModule,
34. Check for updates with SwUpdate Send Push Notifications with SwPush
35. BUT WAIT, THERE'S MORE
36. ng add @angular/pwa
37. Creates Service Worker Auto-imports ServiceWorkerModule Enabled for Prod builds
38. MAKE IT LAST
39. MANIFEST JSON file for App assets Icons, theme, and name Display mode for home screen
40. { "name": "ngAtlanta", "short_name": "ngAtl", "start_url": "/app/tabs/schedule", "display": "standalone", "orientation": "portrait-primary", "icons": [ { "src": "assets/img/appicon.png", "sizes": "192x192", "type": "image/png" } ], "background_color": "#222428", "theme_color": "#222428" }
41. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="manifest" href="manifest.json"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> </head>
42. PART OF @angular/pwa Adds manifest to project Makes changes to index.html Includes sample icons
43. OK, SO HOW DID WE DO?
45. BONUS MATERIAL
46. @ng-toolkit:
 Schematics for Universal ngx-build-modern
 ES2015/ES5 builds
47. The Average web app loads in 14 seconds
48. THANK YOU github.com/mhartington/ng-atl-conf ion-ng-atl.firebaseapp.com </html>