Progressive Angular apps

Transcript

1. 1.

   Progressive WEB APPS

2. 2.

   @cironunesdev

3. 3.

   None
4. 4.

   None
5. 5.

   None
6. 6.

   Progressive Web App

7. 7.

   Progressive Web App Enhancement

8. 8.

   Progressive Web App Enhancement Like

9. 9.

   http://alistapart.com/article/understandingprogressiveenhancement

10. 10.

    http://alistapart.com/article/understandingprogressiveenhancement

11. 11.

    App Like

12. 12.

    RESPONSIVE CONNECTIVITY INDEPENDENT DISCOVERABLE ENGAGEABLE INSTALLABLE SAFE LINKABLE

13. 13.

    App Like, but…

14. 14.

    Service Workers Cache API Fetch API Notification API HTTPS ❤

    }
15. 15.

    How to build a PWA?

16. 16.

    1. Web Application Manifest 2. App Shell 3. Cache (SW)

17. 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. 18.

    Splash Screen

19. 19.

    1. Web Application Manifest 2. App Shell 3. Cache (SW)

20. 20.

    None
21. 21.

    None
22. 22.

    None
23. 23.

    1. Architect & implement your app shell 2. Cache via

    service workers
24. 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. 25.

    1. Architect & implement your app shell 2. Cache via

    service workers
26. 26.

    if ('serviceWorker' in navigator) { navigator['serviceWorker'] .register('./service-worker.js') .then(() => console.log('Service

    Worker Registered')); } main.ts REGISTER
27. 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. 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. 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. 30.

    1. Web Application Manifest 2. App Shell 3. Cache (SW)

31. 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. 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. 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. 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
35. 35.

    None
36. 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. 37.

    Profit!

38. 38.

    Profit! What about a protip?

39. 39.

    Lighthouse

40. 40.

    None
41. 41.

    None
42. 42.

    None
43. 43.

    Bootstrap App shell Service worker Notifications

44. 44.

    None
45. 45.

    None
46. 46.

    Bootstrap App shell Service worker Notifications

47. 47.

    None
48. 48.

    ~ $ npm i --save @angular/app-shell

49. 49.

    ~ $ npm i --save @angular/app-shell // App code import

    { AppShellModule } from '@angular/app-shell'; @NgModule({ bootstrap: [AppComponent], imports: [ BrowserModule, AppShellModule.runtime(), AppModule })
50. 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. 51.

    Can we be faster?

52. 52.

    None
53. 53.

    @NgModule({ bootstrap: [AppComponent], imports: [ AppShellModule.prerender(), AppModule, UniversalModule.withConfig({...}) })

54. 54.

    Bootstrap App shell Service worker Notifications

55. 55.

    ~ $ npm i --save @angular/service-worker

56. 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. 57.

    { "routing": { "routes": { "/": { "prefix": false }

    }, "index": "/index.html" } } ngsw-manifest.json
58. 58.

    Bootstrap App shell Service worker Notifications

59. 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. 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
61. 61.

    None
62. 62.

    pwa.rocks Go get inspired and create something great!

63. 63.

    @cironunesdev Dzięki!