Progressive Angular apps

20 minutes talk about Progressive Web Apps with Angular 2

Transcript

1. Progressive WEB APPS
2. @cironunesdev
6. Progressive Web App
7. Progressive Web App Enhancement
8. Progressive Web App Enhancement Like
9. http://alistapart.com/article/understandingprogressiveenhancement
10. http://alistapart.com/article/understandingprogressiveenhancement
11. App Like
12. RESPONSIVE CONNECTIVITY INDEPENDENT DISCOVERABLE ENGAGEABLE INSTALLABLE SAFE LINKABLE
13. App Like, but…
14. Service Workers Cache API Fetch API Notification API HTTPS ❤ }
15. How to build a PWA?
16. 1. Web Application Manifest 2. App Shell 3. Cache (SW)
17. { "name": "Ali Express", "short_name": "AliExpress", "icons": [{ "src": "images/icons/icon-128x128.png", "sizes": "128x128", "type": "image/png" }], "start_url": "/index.html", "display": "standalone", "background_color": "#3E4EB8", "theme_color": "#2F3BA2" } manifest.webapp
18. Splash Screen
19. 1. Web Application Manifest 2. App Shell 3. Cache (SW)
23. 1. Architect & implement your app shell 2. Cache via service workers
24. <link rel="stylesheet" href="inline.css"> <div> <header> <h1>App shell</h1> <button>Menu</button> <menu>...</menu> </header> <main class="content"> ... </main> </div>
25. 1. Architect & implement your app shell 2. Cache via service workers
26. if ('serviceWorker' in navigator) { navigator['serviceWorker'] .register('./service-worker.js') .then(() => console.log('Service Worker Registered')); } main.ts REGISTER
27. var cacheName = 'myApp'; var filesToCache = [...]; self.addEventListener('install', function(e) { e.waitUntil( caches.open(cacheName).then(function(cache) { return cache.addAll(filesToCache); }) ); }); service-worker.js ADD TO CACHE
28. self.addEventListener('activate', (e) => { e.waitUntil(self.clients.claim()); e.waitUntil( caches.keys().then((keyList) => { return Promise.all(keyList.map((key) => { if (key !== cacheName) { return caches.delete(key); } })); }) ); }); service-worker.js CLEAR CACHE
29. self.addEventListener('fetch', (e) => { e.respondWith( caches.match(e.request).then((response) => { return response || fetch(e.request); }) ); }); service-worker.js READING FROM CACHE
30. 1. Web Application Manifest 2. App Shell 3. Cache (SW)
31. self.addEventListener('fetch', function(e) { var dataUrl = 'https://sample-api.com'; if (e.request.url.indexOf(dataUrl) > -1) { e.respondWith( caches.open(dataCacheName).then(function(cache) { return fetch(e.request).then(function(response){ cache.put(e.request.url, response.clone()); return response; }); }) ); } else { e.respondWith( caches.match(e.request).then(function(response) { return response || fetch(e.request); }) ); } }); service-worker.js
32. self.addEventListener('fetch', function(e) { var dataUrl = 'https://sample-api.com'; if (e.request.url.indexOf(dataUrl) > -1) { e.respondWith( caches.open(dataCacheName).then(function(cache) { return fetch(e.request).then(function(response){ cache.put(e.request.url, response.clone()); return response; }); }) ); } else { e.respondWith( caches.match(e.request).then(function(response) { return response || fetch(e.request); }) ); } }); service-worker.js
33. self.addEventListener('fetch', function(e) { var dataUrl = 'https://sample-api.com'; if (e.request.url.indexOf(dataUrl) > -1) { e.respondWith( caches.open(dataCacheName).then(function(cache) { return fetch(e.request).then(function(response){ cache.put(e.request.url, response.clone()); return response; }); }) ); } else { e.respondWith( caches.match(e.request).then(function(response) { return response || fetch(e.request); }) ); } }); service-worker.js
34. self.addEventListener('fetch', function(e) { var dataUrl = 'https://sample-api.com'; if (e.request.url.indexOf(dataUrl) > -1) { e.respondWith( caches.open(dataCacheName).then(function(cache) { return fetch(e.request).then(function(response){ cache.put(e.request.url, response.clone()); return response; }); }) ); } else { e.respondWith( caches.match(e.request).then(function(response) { return response || fetch(e.request); }) ); } }); service-worker.js
36. caches.match(e.request.clone()).then((response) => { return response || fetch(e.request.clone()).then((theResponse) => { return caches.open(dataCacheName).then((cache) => { cache.put(e.request.url, theResponse.clone()); return theResponse.clone(); }); }); }); service-worker.js
37. Profit!
38. Profit! What about a protip?
39. Lighthouse
43. Bootstrap App shell Service worker Notifications
46. Bootstrap App shell Service worker Notifications
48. ~ $ npm i --save @angular/app-shell
49. ~ $ npm i --save @angular/app-shell // App code import { AppShellModule } from '@angular/app-shell'; @NgModule({ bootstrap: [AppComponent], imports: [ BrowserModule, AppShellModule.runtime(), AppModule })
50. @Component({ selector: 'app-root-component', template: ` <!-- Only show loading indicator in the shell --> <loading-indicator *shellRender> </loading-indicator> <!-- Hide a dynamic view until runtime --> <dynamic-view *shellNoRender> </dynamic-view> ` }) export class AppRootComponent {}
51. Can we be faster?
53. @NgModule({ bootstrap: [AppComponent], imports: [ AppShellModule.prerender(), AppModule, UniversalModule.withConfig({...}) })
54. Bootstrap App shell Service worker Notifications
55. ~ $ npm i --save @angular/service-worker
56. ~ $ npm i --save @angular/service-worker // worker-basic.min.js is copied from // node_modules/@angular/service-worker/bundles if (navigator.serviceWorker) { navigator.serviceWorker.register('/worker-basic.min.js'); }
57. { "routing": { "routes": { "/": { "prefix": false } }, "index": "/index.html" } } ngsw-manifest.json
58. Bootstrap App shell Service worker Notifications
59. self.addEventListener('push', function(e) { e.waitUntil( fetch('http://localhost:8090/pushdata').then(function(response) { return response.json(); }).then(function(data) { return self.registration.showNotification(title, { body: body, icon: icon, tag: tag }); }, function(err) { err(err); }) ); }); worker-push.js
60. self.addEventListener('push', function(e) { e.waitUntil( fetch('http://localhost:8090/pushdata').then(function(response) { return response.json(); }).then(function(data) { return self.registration.showNotification(title, { body: body, icon: icon, tag: tag }); }, function(err) { err(err); }) ); }); worker-push.js
62. pwa.rocks Go get inspired and create something great!
63. @cironunesdev Dzięki!