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

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

Progressive Web Apps (PWA) sind ein heißes und topaktuelles Thema in der Web-Entwicklung. Dank einer ganzen Reihe von Technologien und Vorgehensweisen aus dem PWA-Umfeld lassen sich Websites und Web-Anwendungen mit einigen zentralen und relevanten Features ausstatten, die bisher ausschließlich nativen Anwendungen vorbehalten waren: Offlinefähigkeit, Push Notifications, schnelles Startverhalten und installierbar – samt Homescreen-Icon. Christian Liebel zeigt Ihnen anhand eines durchgängigen in Angular entwickelten Beispiels, wie Sie solche PWAs mit Angular erstellen und somit sanft und sacht die Schlucht zwischen reinen Websites, Web Apps und hybriden/nativen Apps schließen können.

12c88a3a10478fa18d0363b3ba3d9df1?s=128

Christian Liebel

September 02, 2020
Tweet

Transcript

  1. Progressive Web Apps mit Angular Das Web wird nativ(er) Christian

    Liebel @christianliebel Consultant
  2. Hello, it’s me. Web Components als Frameworkersatz Das Frontend-Experiment Christian

    Liebel Twitter: @christianliebel Email: christian.liebel @thinktecture.com Angular & PWA Slides: thinktecture.com /christian-liebel
  3. Things NOT to expect - Blueprint for PWA development -

    No 1:1 support Things TO EXPECT - Extensive/up-to-date insights into PWA and Angular’s PWA support - A PWA use case that works on your (comparably modern) smartphone & desktop PC - Lots of fun - Hands-on labs Das Web wird nativ(er) Progressive Web Apps mit Angular
  4. Progressive Web Apps mit Angular Das Web wird nativ(er) -

    Das PWA-Anwendungsmodell - Web App Manifest - Service Worker und Cache API - Workbox: Toolkit für PWAs - Angular-Unterstützung für PWAs - Natives Look & Feel - Migrieren & veröffentlichen - Payment Request API & Apple Pay www.rheinwerk-verlag.de/4707
  5. Original 09:00–10:30 Block 1 10:30–11:00 Break 11:00–12:30 Block 2 Timetable

    Das Web wird nativ(er) Progressive Web Apps mit Angular
  6. Progressive Web Apps mit Angular Das Web wird nativ(er) https://blogs.windows.com/windowsdeveloper/2019/11/25/developing-for-the-new-category-of-dual-screen-devices-built-for-mobile-productivity/

  7. Progressive Web Apps mit Angular Das Web wird nativ(er) Cross-Platform

    Sample https://pwapraxis.liebel.io
  8. - 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 Das Web wird nativ(er) Progressive Web Apps mit Angular
  9. Setup complete? (Node.js, Angular CLI, Google Chrome, Editor) Let’s get

    started Das Web wird nativ(er) Progressive Web Apps mit Angular
  10. ng new my-pwa --routing --style css cd my-pwa Angular CLI

    LAB #1 Das Web wird nativ(er) Progressive Web Apps mit Angular
  11. Das Web wird nativ(er) Progressive Web Apps mit Angular Responsive

    Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-engageable Progressive
  12. Platform Support PWA Status Quo Das Web wird nativ(er) Progressive

    Web Apps mit Angular 17 11.1 44 40 4.1 Chrome 40 11.3
  13. Responsive Progressive Web Apps mit Angular Das Web wird nativ(er)

    PWA Features
  14. One size fits all A single website layout for different

    screen resolutions (typically related to the screen’s width) Definition of trigger points at which the layout changes Mobile first: Create (minimal) mobile views first, then proceed with larger screens, so all devices get the best experience Key technologies: CSS3 Media Queries, CSS Flexible Box Layout, CSS Grid Layout Progressive Web Apps mit Angular Das Web wird nativ(er) Responsive
  15. Frameworks • Angular Material • ngx-admin • Bootstrap • Foundation

    • Framework7 • Custom-tailored solution Progressive Web Apps mit Angular Das Web wird nativ(er) Responsive
  16. ng add @angular/material Responsive LAB #2 Das Web wird nativ(er)

    Progressive Web Apps mit Angular
  17. Linkable Progressive Web Apps mit Angular Das Web wird nativ(er)

    PWA Features
  18. Reference Apps and Internal App States Goal: Directly link to

    applications or application states/views (deep link) Key technology for references in the World Wide Web: Hyperlinks Schema for hyperlinks: Uniform Resource Locator (URL) Solved in Angular via Routing (for views and states) Linkable Das Web wird nativ(er) Progressive Web Apps mit Angular
  19. ng g c todos ng g c about <router-outlet> Responsive

    LAB #3 Das Web wird nativ(er) Progressive Web Apps mit Angular
  20. Discoverable Progressive Web Apps mit Angular Das Web wird nativ(er)

    PWA Features
  21. Distinguish Web Apps from Websites How to distinguish websites from

    apps? Idea: Add a file with metadata for apps only Advantage: Apps can be identified by search engines, app store providers etc. Web App Manifest <link rel="manifest" href="manifest.webmanifest"> Discoverable Das Web wird nativ(er) Progressive Web Apps mit Angular
  22. 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 Age Rating Additional Config Description Related Apps Das Web wird nativ(er) Progressive Web Apps mit Angular
  23. 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 Das Web wird nativ(er) Progressive Web Apps mit Angular
  24. Angular CLI & PWA Schematic ng add @angular/pwa Web App

    Manifest LAB #4 Das Web wird nativ(er) Progressive Web Apps mit Angular
  25. Shortcuts (upcoming) Progressive Web Apps mit Angular Das Web wird

    nativ(er) Web App Manifest
  26. Badging API (upcoming) Progressive Web Apps mit Angular Das Web

    wird nativ(er) Web App Manifest
  27. Installable Progressive Web Apps mit Angular Das Web wird nativ(er)

    PWA Features
  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" } App Install Banner Das Web wird nativ(er) Progressive Web Apps mit Angular
  29. Progressive Web Apps mit Angular Das Web wird nativ(er)

  30. Progressive Web Apps mit Angular Das Web wird nativ(er) Installable

  31. Web App Manifest Adjust the Web App Manifest (manifest.webmanifest) to

    your needs Run ng build --prod Test it by adding the app to your home screen Installable LAB #5 Das Web wird nativ(er) Progressive Web Apps mit Angular
  32. App-Like Progressive Web Apps mit Angular Das Web wird nativ(er)

    PWA Features
  33. 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 WebXR WebRTC WebGL Speech Synthesis Web Cryptography API IndexedDB Geolocation Canvas Media Capture and Streams Das Web wird nativ(er) Progressive Web Apps mit Angular
  34. Native look & feel Progressive Web Apps mit Angular Das

    Web wird nativ(er) App-like
  35. ng generate @angular/material:nav nav Progressive Web Apps mit Angular Das

    Web wird nativ(er) Generate Navigation LAB #6
  36. Connectivity Independent Part 1 Progressive Web Apps mit Angular Das

    Web wird nativ(er) PWA Features
  37. Progressive Web Apps mit Angular Das Web wird nativ(er) Offline

    capability with Service Worker System Website HTML/JS Cache Storage Remote storage Server Internet fetch HTTP Service Worker
  38. Overview Implements a “one-size-fits-all” service worker Instrumented via ngsw-config.json Restricted

    feature set (e.g., no communication between app and SW) • Initial caching of static content • Caching external content • Dynamic Caching • Push notifications @angular/service-worker Das Web wird nativ(er) Progressive Web Apps mit Angular
  39. Debugging More information on installed service workers can be found

    on • chrome://serviceworker- internals (Google Chrome) • about:serviceworkers (Mozilla Firefox) Progressive Web Apps mit Angular Das Web wird nativ(er) Service Worker
  40. Debugging Debug Service Workers using Chrome Developer Tools Progressive Web

    Apps mit Angular Das Web wird nativ(er) Service Worker LAB #7
  41. Fresh Progressive Web Apps mit Angular Das Web wird nativ(er)

    PWA Features
  42. 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. Progressive Web Apps mit Angular Das Web wird nativ(er) Fresh
  43. @angular/service-worker Update Process Progressive Web Apps mit Angular Das Web

    wird nativ(er) Fresh V1 V2 V2 V1 V1 V2 Server Browser
  44. 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. Progressive Web Apps mit Angular Das Web wird nativ(er) Fresh
  45. App-like, Connectivity Independent, Fresh Check for application updates swUpdate.available.subscribe(() =>

    …); Progressive Web Apps mit Angular Das Web wird nativ(er) Fresh LAB #8
  46. Connectivity Independent Part 2 Progressive Web Apps mit Angular Das

    Web wird nativ(er) PWA Features
  47. Orthogonal to Service Workers The web platform has different techniques

    to store arbitrary data (e.g. application state) offline: • Web Storage API (Local Storage/Session Storage—synchronous!) • Cookies (inconvenient) • IndexedDB Progressive Web Apps mit Angular Das Web wird nativ(er) Offline Capability
  48. IndexedDB Progressive Web Apps mit Angular Das Web wird nativ(er)

    Offline Capability
  49. IndexedDB let db; const request = indexedDB. open('TestDB'); request.onerror =

    err => { console.error('boo!'); }; request.onsuccess = evt => { db = request.result; }; IndexedDB API is inconvenient const db = new Dexie('TestDB'); Progressive Web Apps mit Angular Das Web wird nativ(er) Offline Capability
  50. Dexie.js Dexie is a minimalistic wrapper for IndexedDB Operations are

    based on promises instead of callbacks Near native performance (also for bulk inserts) Open-source Progressive Web Apps mit Angular Das Web wird nativ(er) Offline Capability
  51. IndexedDB Model { "id": "2db0d3e5-…", "title": "Angular lernen", "done": false

    } Install packages npm i dexie uuid --save-dev Dexie.js Table API Implement a TodoService with getAll & add methods Progressive Web Apps mit Angular Das Web wird nativ(er) Offline Capability LAB #9
  52. Safe Progressive Web Apps mit Angular Das Web wird nativ(er)

    PWA Features
  53. 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 Problem: TLS certificates are required (costs/renewal) Safe Das Web wird nativ(er) Progressive Web Apps mit Angular
  54. Free with automatic renewal Initiative of the Linux Foundation Automatic

    domain validation (Class 1) Website/Webservice has to be public available Period of validity: Comparatively short (90 days) Usage of TLS/SSL as easy as possible Plugins are available for IIS, Apache, Microsoft Azure, Plesk, … free! Let’s Encrypt Das Web wird nativ(er) Progressive Web Apps mit Angular
  55. Re-engageable Progressive Web Apps mit Angular Das Web wird nativ(er)

    PWA Features
  56. Get the user back with notifications Progressive Web Apps mit

    Angular Das Web wird nativ(er) Re-Engageable Ä Peter and 12 other people like your photo. SOCIAL NETWORK 08:12 Only today! 350 golden diamonds for $3.49!! PAY TO WIN GAME 11:19
  57. Push API Progressive Web Apps mit Angular Das Web wird

    nativ(er) Re-Engageable 17 — 44 44
  58. Limitations Not supported by Apple Safari on desktop and mobile

    - Safari Push Notfications: an alternative for the desktop platform - No information on whether or when push will be supported BUT: You can make a difference! Let the WebKit team know what you want to build with Push API: https://liebel.io/pushbug Progressive Web Apps mit Angular Das Web wird nativ(er) Re-Engageable
  59. Progressive Progressive Web Apps mit Angular Das Web wird nativ(er)

    PWA Features
  60. Advance with Progressive Enhancement Idea: Use available interfaces and functions

    of a system Users with modern, feature-rich browsers are getting better experience Apps are available on older browsers but with limited functionality Concept: Browser feature support grows over time—thereby more users can enjoy an increasing number of app features Progressive Web Apps mit Angular Das Web wird nativ(er) Progressive
  61. Progressive Web Apps mit Angular Das Web wird nativ(er)

  62. A More Capable Web Progressive Web Apps mit Angular Das

    Web wird nativ(er) Project Fugu »Let’s bring the web back – API by API« Thomas Steiner, Google
  63. Progressive Web Apps mit Angular Das Web wird nativ(er) Project

    Fugu Contacts Picker Screen Wake Lock API Native File System API Shape Detection API
  64. Progressive Web Apps mit Angular Das Web wird nativ(er) PWAs

    & App Stores (US)
  65. Native App Packaging Das Web wird nativ(er) Progressive Web Apps

    mit Angular JS HTML CSS .ipa .exe .app ELF .apk .appx Single-Page Application Cordova Electron
  66. Progressive Web Apps mit Angular Das Web wird nativ(er) Where’s

    the Web Heading to?
  67. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com