angular pwa

Transcript

1. Angular Progressive Web Apps
2. @JecelynYeen From Kuala Lumpur, Malaysia • GDE - Web technologies, Angular • Software Architect @ Randstad Organizer:
3. • PWA • Angular + PWA • How to start? • How does it works? • How to make it progressive?
5. What is a Mobile App? • Searchable from App Store / Play Store • Installable & Remove-able (Show in Home Screen) • Workable / Semi-workable offline • Need to update • Talk to native api - camera / sensor / notification
6. What is a Web? • Searchable from browser (an url away) • Have address bar • Cross platforms • Non-workable / Semi-workable offline • Refresh browser / Auto update • Talk to limited native api - camera / notification
7. Web + App • Searchable from Play Store / Play Store web • Installable & Remove-able (Show in Home Screen) • No address bar • Cross platforms • Workable / Non-workable / Semi-workable offline • Refresh browser Need / Auto update • Talk to limited native api - camera / notification
8. +
9. How to Start? • npm install @angular/cli • ng new my-app-name Run in command line / terminal:
10. How to Start? • ng add @angular/pwa + Run in command line / terminal: Build & Deploy it: • ng build --prod • deploy /dist/[project] folder to hosting
11. Demo Time https://www.pawtaro.com/
12. Mobile View test pwa
13. How does it works? Magic?
14. Minimum WA • Have manifest.json • Register service worker
15. Behind the scene, … • Creating manifest.json • Creating set of icons • Register service worker • Creating ngsw-config.json
16. In Summary • Online: Load all assets from cache • Offline: Same as online https://www.pawtaro.com/ https://angular.io/guide/service-worker-getting-started
17. Service Worker The Middle Man
18. How Service Worker works? Browser App Service Worker Cache
19. Service Worker & Cache APIs support Browsers Mobile Desktop
20. NGSW configuration file { "assetGroups": [ Smart defaults for the app shell ], "dataGroups": [ Settings for your API, etc ], ... } ngsw-config.json
21. NGSW configuration file { "index": "/index.html", "assetGroups": [{ "name": "app", "installMode": "prefetch", "resources": { "files": [ "/favicon.ico", "/index.html", "/*.css", "/*.js" ] } }] } ngsw-config.json / assetGroups • prefetch: fetch eagerly • lazy: fetch when we need
22. NGSW configuration file { "name": "myApi", "urls": [ "/api/archive/**" ], "cacheConfig": { "strategy": "performance", "maxSize": 100, "maxAge": "365d" } } ngsw-config.json / dataGroups • performance: cache first • freshness: network-first
23. SwUpdate Service constructor(updates: SwUpdate) { // force check for sw update updates.checkForUpdate(); // when sw update available updates.available.subscribe(event => { console.log('current version is', event.current); console.log('available version is', event.available); }); }
24. Web + App • Searchable from Play Store / Play Store web • Installable & Remove-able (Show in Home Screen) • No address bar • Cross platforms • Workable / Non-workable / Semi-workable offline • Refresh browser Auto / Need update • Talk to limited native api - camera / notification
25. How about Progressive? What does it mean?
26. http://www.dictionary.com/browse/progressive
27. + progressive performance
28. Build the app using prod • Run ng build --prod • Using Ahead of Time compilation • Using Build Optimizer
29. Use Lazy Loading • Download the only the code needed to start the app • Preload all the modules by using PreloadAllModules strategy • 100% flexibility with your custom PreloadingStrategy
30. How to const appRoutes: Routes = [{ path: 'customers', loadChildren: 'customers/customers.module#CustomersModule' }] app-routing.module.ts const customersRoutes: Routes = [ { path: '', component: CustomerListComponent }, { path: ':id', component: CustomerDetailsComponent } ]; customers / customers-routing.module.ts https://angular.io/guide/lazy-loading-ngmodules
31. Preloading Strategy @NgModule({ imports: [RouterModule.forRoot(appRoutes, { preloadingStrategy: PreloadAllModules })], exports: [RouterModule] }) app-routing.module.ts
32. Consider Server Side Rendering (SSR) No SSR Load HTML SSR Load HTML Boostrap Boostrap First meaningful Paint <app-root> Loading</app-root> First meaningful Paint Loading • Better first load experience • Social links with preview of a website • Better for SEO
33. How to • ng generate universal --client-project=ssr Long way • ng add @ng-toolkit/universal • npm run build:prod • npm run server Short way Follow the guide here: https://angular.io/guide/universal https://medium.com/@maciejtreder/angular-server-side-rendering-with-ng-toolkit- universal-c08479ca688
35. https://speakerdeck.com/chybie/angular-pwa