Fast 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

2. ` Mike Hartington • @mhartington Ionic, Angular GDE AWESOME PWAS WITH ANGULAR
3. LET'S START WITH AN EXPERIMENT
5. 14 SECONDS AVERAGE LOAD
 TIME ON MOBILE
6. AVERAGE EXPERIENCE MBs of JS over the network Slow load times Lower user engagement
7. HOW DO PWAS 
 RELATE TO THIS?
8. PWAs provide an optimized experience 
 that is faster and more resilient
9. –Mike Hartington "Essentially, a responsive web site
 that's fast and works offline"
10. –Mike Hartington "Marketing Words"
11. PROGRESSIVE WEB APPS Fast Progressive Secure Integrated
12. Cool, so can I PWA with Angular?
13. Make it Fast Make it Cache Make it Last
14. MAKE IT FAST
15. Goal: Ship less code Lazy Loading best practices Choosing the right libraries
16. LAZY LOADING Lazy load as much as possible! Reduce initial load time
17. const routes: Routes = [ { path: '', component: LandingPage }, { path: 'browse', loadChildren: './pages/browse/browse.module#BrowsePageModule' }, { path: 'search', loadChildren: './pages/search/search.module#SearchModule' }, { path: 'album/:id', loadChildren: './pages/album/album.module#AlbumPageModule' }, { path: 'playlist/:id', loadChildren: './pages/playlists/playlists.module#PlaylistsPageModule' } ];
18. [ { 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] } ]
19. 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; } }); } }
20. Group common routes in one module Preloading Strategy for loading times
21. THE RIGHT LIBRARIES moment 335KB, Core + Locales date-fns/esm (format) 9KB, ESModule
22. THE RIGHT LIBRARIES lodash 70KB lodash-es (without) 5KB
23. This is how Ionic works Each component, a single ES-Module Ionic will handling loading the rest FUN FACT
24. THE RIGHT LIBRARIES source-map-explorer
 http://bit.ly/2vNgly4 Angular CLI Budgets
 http://bit.ly/2ATuiA5
25. MAKE IT CACHE
26. SERVICE WORKER Proxy for the network Intercepts out-going and incoming data Caching and much more
27. if ('serviceWorker' in navigator) { navigator.serviceWorker.register('service-worker.js') .then(() => console.log('service worker installed')) .catch(err => console.log('Error', err)); }
28. 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
30. A lot of overhead Can be complex Best to use a library
31. npm install @angular/service-worker
32. JSON driven approach Precache, Lazy, External Caching Strategy and age
33. { "index": "/index.html", "assetGroups": [ { "name": "app", "installMode": "prefetch", "resources": { "files": ["/index.html", "/*.css", "/*.js"] } }, ], "dataGroups": [...] }
34. import { ServiceWorkerModule } from '@angular/service-worker'; @NgModule({ declarations: [AppComponent], imports: [ ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production }), BrowserModule,
35. Check for updates with SwUpdate Send Push Notifications with SwPush
36. BUT WAIT, THERE'S MORE
37. ng add @angular/pwa
38. Creates Service Worker Auto-imports ServiceWorkerModule Enabled for Prod builds
39. MAKE IT LAST
40. MANIFEST JSON file for App assets Icons, theme, and name Display mode for home screen
41. { "name": "Star Track", "short_name": "StarTrack", "theme_color": "#ffffff", "background_color": "#ffffff", "description": "The best Apple Music Client out there", "display": "standalone", "orientation": "portrait", "start_url": "/browse", "icons": [ . { "src": "assets/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, . ] }
42. <!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>
44. PART OF @angular/pwa Adds manifest to project Makes changes to index.html Includes sample icons
45. OK, SO HOW DID WE DO?
47. BONUS MATERIAL
48. @ng-toolkit:
 Schematics for Universal ngx-build-modern
 ES2015/ES5 builds
49. The Average web app loads in 14 seconds
50. THANK YOU github.com/mhartington/StarTrack-ng startrack-ng.firebaseapp.com </html>