Das Web wird nativ(er): Progressive Web Apps mit Angular

Progressive Web Apps sind in aller Munde: Hinter diesem Begriff verbergen sich verschiedene Technologien und Vorgehensweisen zur Entwicklung von Webanwendungen mit gewissen Extras. PWAs laufen im Browser und können auf mächtige Features zurückgreifen, die man bis vor wenigen Jahren lediglich nativen Anwendungen zugeschrieben hätte: Pushbenachrichtigungen, Datensychronisation oder Offlinefähigkeit kommen dank Service Worker & co. auch ins Web. Christian Liebel von Thinktecture zeigt Ihnen, wie Sie PWAs mithilfe von Googles Single-Page-Application-Framework Angular entwickeln können. Lernen Sie das Anwendungsmodell der Zukunft kennen.

Transcript

1. Das Web wird nativ(er) Progressive Web Apps mit Angular Christian Liebel @christianliebel Consultant
2. What not to expect - Blueprint for PWA development - Future-proof tutorial for PWA development with Angular (experimental support) What to expect - Extensive/up-to-date insights into PWA and Angular’s PWA support - A PWA use case that works on your (comparably modern) Android phone and Chrome/Firefox browsers - Latest & greatest software Progressive Web Apps mit Angular Das Web wird nativ(er)
3. Hello, it’s me. Christian Liebel Follow me: @christianliebel Blog: christianliebel.com Email: christian.liebel @thinktecture.com Cross-Platform & Cloud & Enterprise Blockchain Progressive Web Apps mit Angular Das Web wird nativ(er)
4. Windows Mobile 5 Apps in 2005… Progressive Web Apps mit Angular Das Web wird nativ(er)
5. Apps in 2007… https://www.youtube.com/watch?v=vN4U5FqrOdQ Progressive Web Apps mit Angular Das Web wird nativ(er)
6. And guess what? There’s no SDK that you need! You’ve got everything you need if you know how to write apps using the most modern web standards to write amazing apps for the iPhone today. — Steve Jobs, June 11, 2007 Progressive Web Apps mit Angular Das Web wird nativ(er)
7. Progressive Web Apps mit Angular Das Web wird nativ(er)
8. Let me just say it: We want native third party applications on the iPhone, and we plan to have an SDK in developers’ hands in February. — Steve Jobs, October 17, 2007 Progressive Web Apps mit Angular Das Web wird nativ(er)
9. App Stores Apps Today… Progressive Web Apps mit Angular Das Web wird nativ(er)
10. Web Goes Native • No app stores anymore! • Web App = App App • Feature parity: Push notifications, offline availability and more for web & native applications • Backwards compatibility: PWAs can also be run on non-PWA browsers, but with reduced feature set Apps Tomorrow… Progressive Web Apps mit Angular Das Web wird nativ(er)
11. Progressive Web Apps HTML5, JavaScript, CSS3 Service Worker API Fetch API Web Notifications Web Workers Push API Web App Manifest HTTPS PWA Technology Overview Progressive Web Apps mit Angular Das Web wird nativ(er)
12. Device Support Mobile Devices Recent Android devices (4.1+) with recent Chrome versions (40+) Apple iOS 11.3 (Safari 11.1) PWA Status Quo Browsers Google Chrome Mozilla Firefox Microsoft Edge Insider Build 17063+ (WIP) Apple Safari 11.1 Progressive Web Apps mit Angular Das Web wird nativ(er)
13. Native App Packaging Real Cross Platform – Get It Today Progressive Web Apps mit Angular Das Web wird nativ(er)
14. Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re- engageable Progressive “Uber Pattern” Progressive Web Apps mit Angular Das Web wird nativ(er) https://developers.google.com/web/fundamentals/getting- started/codelabs/your-first-pwapp/
15. - The next best to-do list app - Create, read, update and delete to-dos - Progressive Web App: installable - Responsive: one size fits all - Offline-first: synchronize to-do list with backend using IndexedDB & Dexie.js - Web Share API: Share your to-dos with just a tap - No user context, sorry Demo Use Case Progressive Web Apps mit Angular Das Web wird nativ(er)
16. https://pwademo.azureedge.net Demo Use Case Progressive Web Apps mit Angular Das Web wird nativ(er)
17. What about Angular & PWA? Progressive Web Apps mit Angular Das Web wird nativ(er)
18. Overview Implements a “one-size-fits-all” service worker Instrumented via ngsw-manifest.json Restricted feature set (i.e. no communication between app and SW) • Initial caching of static content • Caching external content • Dynamic Caching • Push notifications @angular/service-worker Progressive Web Apps mit Angular Das Web wird nativ(er)
19. ngsw-config.json { "index": "/index.html", "assetGroups": [ { "name": "app", "installMode": "prefetch", "resources": { "files": [ "/favicon.ico", "/*.js", ] } }, { "name": "assets", "installMode": "lazy", "updateMode": "prefetch", "resources": { "files": [ ], "urls": [ "http://xy.invalid/1.jpg" ], } } ] } @angular/service-worker Progressive Web Apps mit Angular Das Web wird nativ(er)
20. CLI Integration Angular CLI supports service worker generation Opt-in New version 6.x Service Worker requires Angular CLI 6.x or later When activated, service worker generation is automatically added to the ng build command (for production builds) @angular/pwa Progressive Web Apps mit Angular Das Web wird nativ(er)
21. Existing Projects ng add @angular/pwa Angular CLI & @angular/pwa LIVE DEMO Progressive Web Apps mit Angular Das Web wird nativ(er)
22. Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re- engageable Progressive PWA Features Progressive Web Apps mit Angular Das Web wird nativ(er) https://developers.google.com/web/fundamentals/getting- started/codelabs/your-first-pwapp/
23. Das Web wird nativ(er) Progressive Web Apps mit Angular Responsive
24. Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re- engageable Progressive PWA Features Progressive Web Apps mit Angular Das Web wird nativ(er) https://developers.google.com/web/fundamentals/getting- started/codelabs/your-first-pwapp/
25. Reference Apps and Internal App States Classic (Query String) https://myapp.com/profile.php?id=peter.mueller Hash Anchor (e.g. SPA) https://myapp.com/#/profile/peter.mueller HTML5 History (SPA)/Server Rendered https://myapp.com/profile/peter.mueller Linkable Progressive Web Apps mit Angular Das Web wird nativ(er)
26. Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re- engageable Progressive PWA Features Progressive Web Apps mit Angular Das Web wird nativ(er) https://developers.google.com/web/fundamentals/getting- started/codelabs/your-first-pwapp/
27. manifest.json { "short_name": "PWA Demo", "name": "My PWA Demo", "icons": [ { "src": "assets/icon-144x144.png", "sizes": "144x144", "type": "image/png" } ], "start_url": "/index.html", "display": "standalone" } Web App Manifest Title Icons Start URL Display Type Splash Screen Additional Config Description Related Apps Progressive Web Apps mit Angular Das Web wird nativ(er)
28. manifest.json { "short_name": "PWA Demo", "name": "My PWA Demo", "icons": [ { "src": "assets/icon-144x144.png", "sizes": "144x144", "type": "image/png" } ], "start_url": "/index.html", "display": "standalone" } Web App Manifest Progressive Web Apps mit Angular Das Web wird nativ(er) LIVE DEMO
29. Self publishing Developer publishes the App in the Microsoft store under his own name Auto indexing (beta) PWAs are automatically discovered, reviewed and published in the store by Bing PWA & Windows Store Progressive Web Apps mit Angular Das Web wird nativ(er)
30. Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re- engageable Progressive PWA Features Progressive Web Apps mit Angular Das Web wird nativ(er) https://developers.google.com/web/fundamentals/getting- started/codelabs/your-first-pwapp/
31. App Install Banners Website suggests installing a related native app (e.g. known from iOS, link to App Store) PWA: Web app and installed app are one and the same Showing a banner to pin the website to the homescreen You’ve seen this before: iOS Add to homescreen, IE9 Pinned Websites, Windows 8 Live Tiles etc. Das Web wird nativ(er) Progressive Web Apps mit Angular Installable
32. manifest.json { "short_name": "PWA Demo", "name": "My PWA Demo", "icons": [ { "src": "assets/icon-144x144.png", "sizes": "144x144", "type": "image/png" } ], "start_url": "/index.html", "display": "standalone" } App Install Banner Progressive Web Apps mit Angular Das Web wird nativ(er) LIVE DEMO
33. Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re- engageable Progressive PWA Features Progressive Web Apps mit Angular Das Web wird nativ(er) https://developers.google.com/web/fundamentals/getting- started/codelabs/your-first-pwapp/
34. The Power of the Modern Web Web Share API Gamepad API Payment Request API Generic Sensor API Web Bluetooth API Shape Detection API Web Notifications WebVR WebRTC WebGL Speech Synthesis Web Cryptography API IndexedDB Geolocation Canvas Media Capture and Streams Progressive Web Apps mit Angular Das Web wird nativ(er)
35. App Shell Certain parts of the UI are always visible Other parts are dynamic content Idea: Static parts (App Shell) are stored in the cache App Shell works without or bad connectivity Example: Error message if no connection is available Technology of the App Shell doesn’t matter (Angular, AngularJS, React, jQuery, plain JavaScript, …) Das Web wird nativ(er) Progressive Web Apps mit Angular App-like
36. Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re- engageable Progressive PWA Features Progressive Web Apps mit Angular Das Web wird nativ(er) https://developers.google.com/web/fundamentals/getting- started/codelabs/your-first-pwapp/
37. Das Web wird nativ(er) Progressive Web Apps mit Angular Offline capability with Service Worker System Website HTML/JS Cache Storage Remote storage Server Internet fetch HTTP Service Worker
38. Das Web wird nativ(er) Progressive Web Apps mit Angular Caching Strategies https://jakearchibald.com/2014/offline-cookbook/
39. { "index": "/index.html", "assetGroups": [ // … ], "dataGroups": [ // … ] } Das Web wird nativ(er) Progressive Web Apps mit Angular Static Caching Name of index document Purged for each new app version, e.g. for static caching Survive app versions, e.g. for dynamic caching
40. @angular/service-worker allows static caching Cache information has to be added to the ngsw-manifest.json Webpack build integration (included in Angular CLI) adds the build output artefacts to the manifest automatically Service Worker already works for production builds! Das Web wird nativ(er) Progressive Web Apps mit Angular Static Caching
41. { "index": "/index.html", "assetGroups": [ { "name": "app", "installMode": "prefetch", "resources": { "files": [] } }, { "name": "assets", "installMode": "lazy", "updateMode": "prefetch", "resources": { "files": [], "urls": [] } } ] } Das Web wird nativ(er) Progressive Web Apps mit Angular Static Caching Default is prefetch Prefetch: Cache directly Lazy: Cache when requested Specify files or urls
42. Caching Strategies "dataGroups": [ { "name": "my-api", "urls": ["/api"], "cacheConfig": { "strategy": "freshness", "maxSize": 30, "maxAge": "30m", "timeout": "2s" } } ] Das Web wird nativ(er) Progressive Web Apps mit Angular Dynamic Caching Maximum cache duration freshness: network-first performance: cache-first Only for freshness Maximum amount of cached requests
43. Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re- engageable Progressive PWA Features Progressive Web Apps mit Angular Das Web wird nativ(er) https://developers.google.com/web/fundamentals/getting- started/codelabs/your-first-pwapp/
44. Keep your app up-to-date The Service Worker caches a specific version of your application. If the user is online, you want to deliver the latest version of your app. When new versions become available, you might want to notify the user to update the application. Das Web wird nativ(er) Progressive Web Apps mit Angular Fresh
45. @angular/service-worker Update Process On every page reload, the @angular/service-worker reads the ngsw.json file generated by the CLI as a part of the build process. This file contains information about the bundled files and their contents. If this file differs from the previous version, the Service Worker will refresh your app. Hence, it’s sufficient to just reload the application after an update. Das Web wird nativ(er) Progressive Web Apps mit Angular Fresh
46. @angular/service-worker Update Process Das Web wird nativ(er) Progressive Web Apps mit Angular Fresh V1 V2 V2 V1 V1 V2 Server Browser
47. SwUpdate @angular/service-worker offers an SwUpdate service This service provides an available observable that fires when there’s an update. As a result, the user can be prompted to reload the website. Das Web wird nativ(er) Progressive Web Apps mit Angular Fresh
48. Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re- engageable Progressive PWA Features Progressive Web Apps mit Angular Das Web wird nativ(er) https://developers.google.com/web/fundamentals/getting- started/codelabs/your-first-pwapp/
49. PWAs Require HTTPS! Service workers are very powerful • Can answer representatively for the server • Runs outside of the tab’s/window’s lifecycle Installation of service workers is only allowed via a secure connection Exception: localhost (for development purposes) PWAs can only be delivered via HTTPS à thus: TLS certificates required! Solution: Let’s Encrypt, Hoster (Cloudflare, Azure, …), traditional CAs Safe Progressive Web Apps mit Angular Das Web wird nativ(er)
50. Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re- engageable Progressive PWA Features Progressive Web Apps mit Angular Das Web wird nativ(er) https://developers.google.com/web/fundamentals/getting- started/codelabs/your-first-pwapp/
51. Get the user back with notifications Idea: Push the users to use the app again Known from social networks or games, etc. Das Web wird nativ(er) Progressive Web Apps mit Angular Re-Engageable
52. Sending Push Notifications Das Web wird nativ(er) Progressive Web Apps mit Angular Re-Engageable Push Service Server 4. Send Message to Push Service endpoint 5. Response (success/fail) 1. Register for push 2. Send push information to client 6. Push to client Client(s) 3. Send push endpoint
53. SwPush @angular/service-worker offers an SwPush service The service provides a requestSubscription promise that returns a new push subscription This subscription includes the push service endpoint That endpoint can be used from the server to send push notifications to the client Das Web wird nativ(er) Progressive Web Apps mit Angular Re-Engageable
54. Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re- engageable Progressive PWA Features Progressive Web Apps mit Angular Das Web wird nativ(er) https://developers.google.com/web/fundamentals/getting- started/codelabs/your-first-pwapp/
55. Advance with Progressive Enhancement if ('serviceWorker' in navigator) { navigator.serviceWorker.register(…) .then(() => { /* … */ }); } In JavaScript: check whether or not an API/feature is available If yes—use it! Das Web wird nativ(er) Progressive Web Apps mit Angular Progressive
56. mobile.twitter.com Reference Apps Progressive Web Apps mit Angular Das Web wird nativ(er)
57. Das Web wird nativ(er) Progressive Web Apps mit Angular PWA & Windows Store
58. Thank you for your kind attention! Christian Liebel @christianliebel Consultant