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 das heiße und topaktuelle Thema in der Webentwicklung. Hinter dem Begriff verbergen sich eine ganze Reihe von Webtechnologien und Vorgehensweisen. Das Ziel: Dem Anwender einer Webanwendung dieselbe User Experience zu bieten, die er von nativen Anwendungen kennt. Das schließt Offlinefähigkeit, Datensynchronisation und Pushbenachrichtigungen mit ein. Gefällt dem Benutzer eine Webanwendung, wird sie mit einem Fingertipp zur auf dem Gerät installierten App – inklusive Icon auf dem Home-Screen. Christian Liebel von Thinktecture zeigt Ihnen die verschiedenen PWA-Features anhand einer Beispielanwendung in Angular – dem Framework zur Implementierung von Single-Page Applications (SPA) von Google, das sich auch zur Programmierung von PWAs hervorragend eignet.

12c88a3a10478fa18d0363b3ba3d9df1?s=128

Christian Liebel

May 04, 2018
Tweet

Transcript

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

    Cologne 2018 Christian Liebel @christianliebel Consultant
  2. Hello, it’s me. Christian Liebel Das Web wird nativ(er) Progressive

    Web Apps mit Angular Follow me: @christianliebel Blog: christianliebel.com Email: christian.liebel @thinktecture.com Cross-Platform, Cloud & Enterprise Blockchain
  3. Windows Mobile 5 Apps in 2005… http://pocketpccentral.net/images/help/install_cab_file/ppc2.jpg Das Web wird

    nativ(er) Progressive Web Apps mit Angular
  4. Apps in 2007… https://www.youtube.com/watch?v=vN4U5FqrOdQ Das Web wird nativ(er) Progressive Web

    Apps mit Angular
  5. 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 Das Web wird nativ(er) Progressive Web Apps mit Angular
  6. Das Web wird nativ(er) Progressive Web Apps mit Angular

  7. 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 Das Web wird nativ(er) Progressive Web Apps mit Angular
  8. App Stores Apps Today… Das Web wird nativ(er) Progressive Web

    Apps mit Angular
  9. 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… Das Web wird nativ(er) Progressive Web Apps mit Angular
  10. Progressive Web Apps HTML5, JavaScript, CSS3 Service Worker API Fetch

    API Web Notifications Web Workers Push API Web App Manifest HTTPS PWA Technology Overview Das Web wird nativ(er) Progressive Web Apps mit Angular
  11. Progressive Web Apps mit Angular Das Web wird nativ(er) Service

    Worker as a controller/proxy/interceptor Service Worker Internet Website HTML/JS Cache fetch
  12. Progressive Web Apps are not a technology, but a collection

    of characteristics an application must/should support. “Uber Pattern” Das Web wird nativ(er) Progressive Web Apps mit Angular
  13. Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-

    engageable Progressive PWA Properties Das Web wird nativ(er) Progressive Web Apps mit Angular https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
  14. - The next best Karlsruhe City Guide - Read information

    on Karlsruhe – even offline - Progressive Web App: installable - Responsive: one size fits all - Get informed about great deals via push Demo Use Case Das Web wird nativ(er) Progressive Web Apps mit Angular
  15. Demo Use Case Das Web wird nativ(er) Progressive Web Apps

    mit Angular pwa.liebel.io LIVE DEMO
  16. What about Angular & PWA? Das Web wird nativ(er) Progressive

    Web Apps mit Angular
  17. Overview Implements a “one-size-fits-all” service worker Configured via ngsw-manifest.json Generated

    automatically, limited customizability • 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
  18. New Service Worker Project $ npm i -g @angular/cli $

    ng new project_name $ cd project_name $ ng add @angular/pwa Angular CLI & @angular/service-worker Das Web wird nativ(er) Progressive Web Apps mit Angular
  19. Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-

    engageable Progressive PWA Properties Das Web wird nativ(er) Progressive Web Apps mit Angular https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
  20. Apps adapt to available screen space Frameworks • Bootstrap 4

    • Foundation • AdminLTE • etc. Progressive Web Apps mit Angular Das Web wird nativ(er) Responsive
  21. Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-

    engageable Progressive PWA Properties Das Web wird nativ(er) Progressive Web Apps mit Angular https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
  22. 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/URLs 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 Das Web wird nativ(er) Progressive Web Apps mit Angular
  23. Angular Router In Angular, you can use the @angular/router package

    in combination with HashLocationStrategy or PathLocationStrategy to achieve “linkability” ng new project_name --routing imports: [ RouterModule.forRoot(ROUTES, { useHash: true }) ] Linkable Das Web wird nativ(er) Progressive Web Apps mit Angular
  24. Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-

    engageable Progressive PWA Properties Das Web wird nativ(er) Progressive Web Apps mit Angular https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
  25. 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.json"> Discoverable Das Web wird nativ(er) Progressive Web Apps mit Angular
  26. manifest.json { "short_name": "PWA Demo", "name": "My great 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 Das Web wird nativ(er) Progressive Web Apps mit Angular
  27. manifest.json { "short_name": "PWA Demo", "name": "My great 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
  28. PWAs & Windows Store https://blogs.windows.com/msedgedev/2018/02/06/welcoming-progressive-web-apps-edge-windows-10/ Das Web wird nativ(er) Progressive

    Web Apps mit Angular
  29. Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-

    engageable Progressive PWA Properties Das Web wird nativ(er) Progressive Web Apps mit Angular https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
  30. Imperatively installable by tapping Add to Home screen Installable Das

    Web wird nativ(er) Progressive Web Apps mit Angular
  31. App Install Banners For the web as a part of

    the Web App Install Enhancement Proposal Shows metadata defined in the Web App Manifest file Browser controls when the banner is shown based on certain criteria Event: beforeInstallPrompt Displaying the banner can be prevented/deferred by the application Application can determine if banner was dismissed/confirmed Installable Das Web wird nativ(er) Progressive Web Apps mit Angular
  32. manifest.json { "short_name": "PWA Demo", "name": "ngEurope 2018 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
  33. Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-

    engageable Progressive PWA Properties Das Web wird nativ(er) Progressive Web Apps mit Angular https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
  34. The Power of the Modern Web App-like Web Share API

    Web Bluetooth API Payment Request API Ambient Light Sensor Web Bluetooth API Shape Detection API Web Notifications WebVR WebRTC WebGL Speech Synthesis Web Cryptography API IndexedDB Geolocation Canvas Media Capture and Streams Das Web wird nativ(er) Progressive Web Apps mit Angular
  35. Single-Page Web Applications Pattern how to develop apps in a

    native style: Single-Page Web Applications (SPA) Views, logic and assets are stored locally (e.g. in browser cache) App navigation doesn’t lead to a complete page reload (server round- trip) SPAs only request server for getting or modifying data via APIs Progressive Web Apps mit Angular Das Web wird nativ(er) App-like
  36. 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, …) Progressive Web Apps mit Angular Das Web wird nativ(er) App-like
  37. Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-

    engageable Progressive PWA Properties Das Web wird nativ(er) Progressive Web Apps mit Angular https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
  38. Offline capability Challenge: Connection strength varies a lot (especially en

    route) Lie-Fi: Connection strength of a public WiFi is weak or even completely offline Goal: App works offline or with a weak connection at least within the possibilities (e.g. OneNote) Progressive Web Apps mit Angular Das Web wird nativ(er) Connectivity Independent
  39. 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
  40. ngsw-manifest.json { "index": "/index.html", "assetGroups": [ // … ], "dataGroups":

    [ // … ] } Progressive Web Apps mit Angular Das Web wird nativ(er) Connectivity Independent Name of index document Purged for each new app version, e.g. for static caching Survive app versions, e.g. for dynamic caching
  41. Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-

    engageable Progressive PWA Properties Das Web wird nativ(er) Progressive Web Apps mit Angular https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
  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 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. Progressive Web Apps mit Angular Das Web wird nativ(er) Fresh
  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. Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-

    engageable Progressive PWA Properties Das Web wird nativ(er) Progressive Web Apps mit Angular https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
  46. 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 Free/automatically renewed TLS certificates via Let’s Encrypt etc. Safe Das Web wird nativ(er) Progressive Web Apps mit Angular
  47. Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-

    engageable Progressive PWA Properties Das Web wird nativ(er) Progressive Web Apps mit Angular https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
  48. Get the user back with notifications Idea: Push the users

    to use the app again Known from social networks or games, etc. Combination of two technologies: • Web Notifications • Push API Progressive Web Apps mit Angular Das Web wird nativ(er) Re-Engageable LIVE DEMO
  49. SwPush @angular/service-worker offers an SwPush service The service provides a

    requestSubscription promise that returns a new push subscription This subscription includes the platform-specific push service endpoint (used from the server to send push notifications to the client) Progressive Web Apps mit Angular Das Web wird nativ(er) Re-Engageable
  50. Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-

    engageable Progressive PWA Properties Das Web wird nativ(er) Progressive Web Apps mit Angular https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
  51. 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
  52. 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! Progressive Web Apps mit Angular Das Web wird nativ(er) Progressive
  53. 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
  54. Lighthouse/Audits Progressive Web Apps mit Angular Das Web wird nativ(er)

    Tools
  55. 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 17 Apple Safari 11.1 Das Web wird nativ(er) Progressive Web Apps mit Angular
  56. The Apple Platform Progressive Web Apps mit Angular Das Web

    wird nativ(er) PWA Status Quo Service Worker Shipped Web App Manifest In Development Push API Under consideration?
  57. Payment Request API Upcoming payment technology for the web Supported

    by Microsoft Edge 15+, Google Chrome 61+, Safari 11.1+ (iOS 11.3+) Monetization Das Web wird nativ(er) Progressive Web Apps mit Angular LIVE DEMO
  58. mobile.twitter.com Reference Apps Das Web wird nativ(er) Progressive Web Apps

    mit Angular
  59. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com