Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Progressive Web Apps für Einsteiger – Hands on!

Progressive Web Apps für Einsteiger – Hands on!

Stellen Sie sich vor, Sie schreiben Ihre moderne Businessanwendung genau einmal – und sie läuft auf Windows, macOS, Linux, Android, iOS und im Browser. Diese Anwendungen werden per Fingertippen aus dem Browser auf dem Gerät installiert, können Pushbenachrichtigungen empfangen und funktionieren auch dann, wenn das Wi-Fi im Zug gerade mal wieder nicht funktioniert. Das klingt fantastisch? Dank Progressive Web Apps (PWA) wird all das Wirklichkeit. Mit Hilfe moderner Webtechnologien wird aus einer Webanwendung eine App, die einer nativen App in nichts nachsteht. In diesem Workshop zeigt Ihnen Christian Liebel die Grundlagen der PWA-Entwicklung. Und Sie können aktiv mitentwickeln!

12c88a3a10478fa18d0363b3ba3d9df1?s=128

Christian Liebel
PRO

October 05, 2021
Tweet

Transcript

  1. Progressive Web Apps für Einsteiger Hands on! Christian Liebel @christianliebel

    Consultant
  2. Hello, it’s me. Progressive Web Apps für Einsteiger Hands on!

    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! Progressive Web Apps für Einsteiger
  4. 13:30–15:00 Block 1 15:00–15:30 Break 15:30–17:00 Block 2 Timetable Hands

    on! Progressive Web Apps für Einsteiger
  5. Progressive Web Apps für Einsteiger Hands on! https://blogs.windows.com/windowsdeveloper/2019/11/25/developing-for-the-new-category-of-dual-screen-devices-built-for-mobile-productivity/

  6. Progressive Web Apps für Einsteiger Hands on! Cross-Platform Sample https://pwapraxis.liebel.io

  7. - The next best to-do list app - Create &

    read to-dos - Progressive Web App: installable - Responsive: one size fits all - Offline-first: synchronize to-do list with backend using IndexedDB & Dexie.js - No user context, sorry Demo Use Case Hands on! Progressive Web Apps für Einsteiger
  8. Setup Node.js: https://nodejs.org (v12+) Angular CLI: npm i -g @angular/cli

    Google Chrome Editor Let’s get started Hands on! Progressive Web Apps für Einsteiger
  9. ng new my-pwa --routing --style css cd my-pwa Angular CLI

    LAB #1 Hands on! Progressive Web Apps für Einsteiger
  10. Hands on! Progressive Web Apps für Einsteiger Responsive Linkable Discoverable

    Installable App-like Connectivity Independent Fresh Safe Re-engageable Progressive
  11. Platform Support PWA Status Quo Hands on! Progressive Web Apps

    für Einsteiger 17 11.1 44 40 4.1 Chrome 40 11.3
  12. Responsive Progressive Web Apps für Einsteiger Hands on! PWA Features

  13. 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 für Einsteiger Hands on! Responsive
  14. Frameworks • Angular Material • ngx-admin • Bootstrap • Foundation

    • Framework7 • Custom-tailored solution Progressive Web Apps für Einsteiger Hands on! Responsive
  15. ng add @angular/material Responsive LAB #2 Hands on! Progressive Web

    Apps für Einsteiger
  16. Linkable Progressive Web Apps für Einsteiger Hands on! PWA Features

  17. 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 Hands on! Progressive Web Apps für Einsteiger
  18. ng g c todos ng g c about <router-outlet> Linkable

    LAB #3 Hands on! Progressive Web Apps für Einsteiger
  19. Discoverable Progressive Web Apps für Einsteiger Hands on! PWA Features

  20. 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 Hands on! Progressive Web Apps für Einsteiger
  21. manifest.webmanifest { "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 Hands on! Progressive Web Apps für Einsteiger
  22. manifest.webmanifest { "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 Hands on! Progressive Web Apps für Einsteiger
  23. Angular CLI & PWA Schematic ng add @angular/pwa Web App

    Manifest LAB #4 Hands on! Progressive Web Apps für Einsteiger
  24. Shortcuts Progressive Web Apps für Einsteiger Hands on! Web App

    Manifest
  25. Badging API Progressive Web Apps für Einsteiger Hands on! Web

    App Manifest
  26. Installable Progressive Web Apps für Einsteiger Hands on! PWA Features

  27. manifest.webmanifest { "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 Hands on! Progressive Web Apps für Einsteiger
  28. Progressive Web Apps für Einsteiger Hands on!

  29. Progressive Web Apps für Einsteiger Hands on! Installable

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

    your needs Run ng build Test it by adding the app to your home screen Installable LAB #5 Hands on! Progressive Web Apps für Einsteiger
  31. App-Like Progressive Web Apps für Einsteiger Hands on! PWA Features

  32. 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 Hands on! Progressive Web Apps für Einsteiger
  33. Native look & feel Progressive Web Apps für Einsteiger Hands

    on! App-like
  34. cd ../.. ng generate @angular/material:nav nav Progressive Web Apps für

    Einsteiger Hands on! Generate Navigation LAB #6
  35. Connectivity Independent Part 1 Progressive Web Apps für Einsteiger Hands

    on! PWA Features
  36. Progressive Web Apps für Einsteiger Hands on! Offline capability with

    Service Worker System Website HTML/JS Cache Storage Remote storage Server Internet fetch HTTP Service Worker
  37. 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 Hands on! Progressive Web Apps für Einsteiger
  38. Debugging More information on installed service workers can be found

    on • chrome://serviceworker- internals (Google Chrome) • about:serviceworkers (Mozilla Firefox) Progressive Web Apps für Einsteiger Hands on! Service Worker
  39. Debugging Debug Service Workers using Chrome Developer Tools Progressive Web

    Apps für Einsteiger Hands on! Service Worker LAB #7
  40. Fresh Progressive Web Apps für Einsteiger Hands on! PWA Features

  41. 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 für Einsteiger Hands on! Fresh
  42. @angular/service-worker Update Process Progressive Web Apps für Einsteiger Hands on!

    Fresh V1 V2 V2 V1 V1 V2 Server Browser
  43. 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 für Einsteiger Hands on! Fresh
  44. App-like, Connectivity Independent, Fresh Check for application updates swUpdate.available.subscribe(() =>

    …); Progressive Web Apps für Einsteiger Hands on! Fresh LAB #8
  45. Connectivity Independent Part 2 Progressive Web Apps für Einsteiger Hands

    on! PWA Features
  46. 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 für Einsteiger Hands on! Offline Capability
  47. IndexedDB Progressive Web Apps für Einsteiger Hands on! Offline Capability

  48. 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 für Einsteiger Hands on! Offline Capability
  49. 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 für Einsteiger Hands on! Offline Capability
  50. IndexedDB Model { "id": "2db0d3e5-…", "title": "Angular lernen", "done": false

    } Install packages npm i dexie uuid @types/uuid --save-dev Dexie.js Table API Implement a TodoService with getAll & add methods Progressive Web Apps für Einsteiger Hands on! Offline Capability LAB #9
  51. Safe Progressive Web Apps für Einsteiger Hands on! PWA Features

  52. 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 Hands on! Progressive Web Apps für Einsteiger
  53. 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 Hands on! Progressive Web Apps für Einsteiger
  54. Re-engageable Progressive Web Apps für Einsteiger Hands on! PWA Features

  55. Get the user back with notifications Progressive Web Apps für

    Einsteiger Hands on! 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
  56. Push API Progressive Web Apps für Einsteiger Hands on! Re-Engageable

    17 — 44 44
  57. 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 für Einsteiger Hands on! Re-Engageable
  58. Progressive Progressive Web Apps für Einsteiger Hands on! PWA Features

  59. 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 für Einsteiger Hands on! Progressive
  60. Progressive Web Apps für Einsteiger Hands on!

  61. Progressive Web Apps für Einsteiger Hands on! PWAs & App

    Stores (US)
  62. Native App Packaging Hands on! Progressive Web Apps für Einsteiger

    JS HTML CSS .ipa .exe .app ELF .apk .appx Single-Page Application Cordova Electron
  63. Progressive Web Apps für Einsteiger Hands on! Where’s the Web

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