Awesome PWAs with Angular

Be834f0968111acbbc6f3bf67041c8d5?s=47 Mike Hartington
January 10, 2019
160

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.

Be834f0968111acbbc6f3bf67041c8d5?s=128

Mike Hartington

January 10, 2019
Tweet

Transcript

  1. 3.
  2. 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 } )
  3. 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] } ]
  4. 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; } }); } }
  5. 22.

    This is how Ionic works Each component, a single ES-Module

    IonicModule will fetch as needed FUN FACT
  6. 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
  7. 28.
  8. 32.

    { "index": "/index.html", "assetGroups": [ { "name": "app", "installMode": "prefetch",

    "resources": { "files": ["/index.html", "/*.css", "/*.js"] } }, ], "dataGroups": [...] }
  9. 33.

    import { ServiceWorkerModule } from '@angular/service-worker'; @NgModule({ declarations: [AppComponent], imports:

    [ ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production }), BrowserModule,
  10. 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" }
  11. 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>
  12. 44.