Progressive Web Apps: Das Web wird nativ(er)

Progressive Web Apps: Das Web wird nativ(er)

Progressive Web Apps (PWA) sind ein heißes und topaktuelles Thema in der Webentwicklung. Dank einer ganzen Reihen von Technologien und Vorgehensweisen aus dem PWA-Umfeld lassen sich Websites und Webanwendungen 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, wie Sie solche PWAs mit Angular erstellen und somit sanft und sacht die Schlucht zwischen reinen Web-Sites, Web Apps und hybriden/nativen Apps schließen können.

12c88a3a10478fa18d0363b3ba3d9df1?s=128

Christian Liebel

March 20, 2018
Tweet

Transcript

  1. 1.

    Progressive Web Apps: Das Web wird nativ(er) Angular Days 2018

    Christian Liebel @christianliebel Consultant
  2. 2.

    Things NOT to expect - Blueprint for PWA development -

    Future-proof tutorial for PWA development with Angular (experimental support) - Extensive one-on-one support Things TO EXPECT - Extensive/up-to-date insights into PWA and Angular’s PWA support - Hands-on labs for you - Latest & greatest software - Lots of fun Das Web wird nativ(er) Progressive Web Apps
  3. 3.

    Christian Liebel Thinktecture AG Microsoft MVP Visual Studio and Development

    Technologies Twitter: @christianliebel E-Mail: christian.liebel@thinktecture.com https://thinktecture.com https://christianliebel.com Gestatten? Das Web wird nativ(er) Progressive Web Apps
  4. 4.

    Intro • Motivation • Cordova/Electron • "Uber Pattern" Web App

    Manifest • Add to Home Screen • App Install Banners Service Worker • Lifecycle • App Shell • Caching • Offline-First & Sync Advanced • Push Messages • Tools • Limitations Das Web wird nativ(er) Progressive Web Apps
  5. 7.

    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
  6. 9.

    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
  7. 11.

    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
  8. 12.

    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
  9. 13.

    The Power of the Modern Web 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
  10. 14.

    Flight Arcade • WebGL • Web Audio API • Gamepad

    API The Power of the Modern Web Das Web wird nativ(er) Progressive Web Apps
  11. 15.

    Device Support Mobile Devices Recent Android devices (4.1+) with recent

    Chrome versions (40+) Apple iOS 11.3 Beta (Safari 11.1, WIP) PWA Status Quo Browsers Google Chrome Mozilla Firefox Microsoft Edge Insider Build 17063+ (WIP) Apple Safari 11.1 Technology Preview (WIP) Das Web wird nativ(er) Progressive Web Apps
  12. 16.

    This looks great, but there are still… features - that

    aren’t exposed to the web platform (e.g. Contacts API) - that aren’t available on every platform (e.g. Ambient Light API) - that require more performance (e.g. PDF annotations) devices - that don’t support Progressive Web Apps (old Androids, current iOS devices, etc.) marketing reasons - App Store presence PWA Status Quo Das Web wird nativ(er) Progressive Web Apps
  13. 17.

    Native App Packaging Real Cross Platform – Get It Today

    Das Web wird nativ(er) Progressive Web Apps
  14. 18.

    Native App Packaging Native web view (WKWebView/UIWebView, Android Browser/Chrome, Edge)

    + Native plug-ins (Objective-C, Java, C#, …) Node.js runtime + Chromium engine Real Cross Platform – Get It Today Das Web wird nativ(er) Progressive Web Apps
  15. 19.

    Native App Packaging Result: App packages .ipa, .apk, .appx Result:

    Executables .exe, .app, ELF Real Cross Platform – Get It Today Das Web wird nativ(er) Progressive Web Apps
  16. 20.

    Progressive Web Apps are not a technology, but a collection

    of features an application must/should support. “Uber Pattern” Das Web wird nativ(er) Progressive Web Apps
  17. 21.

    Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-

    engageable Progressive “Uber Pattern” Das Web wird nativ(er) Progressive Web Apps https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
  18. 22.

    Service Worker Key Technology Service Worker Internet Website HTML/JS Cache

    fetch Das Web wird nativ(er) Progressive Web Apps
  19. 23.

    Please stick to the versions noted in README.md and package.json,

    as there might have been updates in the meantime. Important Note Das Web wird nativ(er) Progressive Web Apps
  20. 28.

    NgServiceWorker • One-size-fits-all Service Worker • Angular CLI supports Service

    Worker generation • Pre-defined functionality, limited customizability Custom Implementation • Individually created Service Worker • Post-process build output of an Angular app • Maximum flexibility, maximum management overhead What about Angular & PWA? Das Web wird nativ(er) Progressive Web Apps
  21. 29.

    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 Das Web wird nativ(er) Progressive Web Apps
  22. 30.

    ngsw-config.json { "index": "/index.html", "assetGroups": [ { "name": "app", "installMode":

    "prefetch", "resources": { "files": [ "/favicon.ico" ], "versionedFiles": [ ] } }, { "name": "assets", "installMode": "lazy", "updateMode": "prefetch", "resources": { "files": [ ], "urls": [ "http://xy.invalid/1.jpg" ], } } ] } @angular/service-worker Das Web wird nativ(er) Progressive Web Apps
  23. 31.

    CLI Integration Angular CLI supports service worker generation since version

    1.0.0-rc.2 Opt-in, requires @angular/service-worker New version 5.x Service Worker requires Angular CLI 1.6 or later When activated, service worker generation is automatically added to the ng build command (for production builds) @angular/service-worker Das Web wird nativ(er) Progressive Web Apps
  24. 32.

    New Service Worker Project ng new project --service-worker Angular CLI

    & @angular/service-worker Das Web wird nativ(er) Progressive Web Apps
  25. 33.

    Existing Projects npm i --save-dev @angular/service-worker ng set apps.0.serviceWorker true

    Introduce ngsw-config.json imports: [ ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }) ] Angular CLI & @angular/service-worker LAB #1 Das Web wird nativ(er) Progressive Web Apps
  26. 34.

    Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-

    engageable Progressive PWA Features Das Web wird nativ(er) Progressive Web Apps https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
  27. 36.

    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 Das Web wird nativ(er) Responsive
  28. 37.

    Frameworks • Bootstrap 4 • Foundation • AdminLTE • etc.

    Progressive Web Apps Das Web wird nativ(er) Responsive
  29. 39.

    Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-

    engageable Progressive PWA Features Das Web wird nativ(er) Progressive Web Apps https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
  30. 40.

    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) Linkable Das Web wird nativ(er) Progressive Web Apps
  31. 41.

    Reference Apps and Internal App States Approximation in (mobile) operating

    systems: URI schemes (e.g. fb://profile) For applications on the web, this comes for free In some cases also for application states/views (e.g. for single-page applications) Linkable Das Web wird nativ(er) Progressive Web Apps
  32. 42.

    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 Das Web wird nativ(er) Progressive Web Apps
  33. 43.

    Angular Router In Angular, you can use the @angular/router package

    in combination with HashLocationStrategy or PathLocationStrategy to achieve “linkability” ng new project --service-worker --routing imports: [ RouterModule.forRoot(ROUTES, { useHash: true }) ] Linkable Das Web wird nativ(er) Progressive Web Apps
  34. 44.

    Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-

    engageable Progressive PWA Features Das Web wird nativ(er) Progressive Web Apps https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
  35. 45.

    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
  36. 46.

    manifest.json { "short_name": "PWA Demo", "name": ”Angular Days 2018 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
  37. 47.

    manifest.json { "short_name": "PWA Demo", "name": ”Angular Days 2018 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
  38. 49.

    Add a Web App Manifest to your app Reference it

    in index.html Test it by adding the app to your home screen Web App Manifest LAB #2 Das Web wird nativ(er) Progressive Web Apps
  39. 50.

    Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-

    engageable Progressive PWA Features Das Web wird nativ(er) Progressive Web Apps https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
  40. 51.

    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. Progressive Web Apps Das Web wird nativ(er) Installable
  41. 52.

    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
  42. 53.

    Prevent/Defer App Install Banners let deferredPrompt; window.addEventListener( 'beforeinstallprompt', e =>

    { e.preventdefault(); deferredPrompt = e; return false; }); btnClick.addEventListener( 'click', () => { if (deferredPrompt) { deferredPrompt.prompt(); } }); Installable Das Web wird nativ(er) Progressive Web Apps
  43. 54.

    App Install Banners – Criteria* Web App Manifest exists Has

    a short_name, name and valid start_url Has a 192x192 PNG icon Service Worker is registered for current scope Site was delivered via HTTPS Site engagement heuristics defined by user agent * Subject to change https://developers.google.com/web/fundamentals/app-install-banners/ Progressive Web Apps Das Web wird nativ(er) Installable
  44. 55.

    manifest.json { "short_name": "PWA Demo", "name": "Angular Days 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
  45. 56.

    Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-

    engageable Progressive PWA Features Das Web wird nativ(er) Progressive Web Apps https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
  46. 57.

    Web Apps that feel natively Native functionality with HTML5 technologies

    • Playing audio and video • Hardware accelerated 2D/3D graphics • Gamepad • Touch input • Local storage • Location-based services • Access to camera • etc. Progressive Web Apps Das Web wird nativ(er) App-like
  47. 58.

    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 Das Web wird nativ(er) App-like
  48. 59.

    Single-Page web applications Approach: Mobile First Start with mobile devices

    when designing use cases and user interfaces Extend for devices with larger screens and more precise input methods at a later point of time Progressive Web Apps Das Web wird nativ(er) App-like
  49. 60.

    SPA architecture Progressive Web Apps Das Web wird nativ(er) App-like

    Server logic Web API Push Service Web API DBs HTML, JS, CSS, Assets Server Browser SPA Client logic View HTML/CSS View HTML/CSS View HTML/CSS HTTPS WebSockets HTTPS HTTPS
  50. 61.

    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 Das Web wird nativ(er) App-like
  51. 62.

    Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-

    engageable Progressive PWA Features Das Web wird nativ(er) Progressive Web Apps https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
  52. 64.

    Progressive Web Apps Das Web wird nativ(er) JavaScript & Threading

    http://techdows.com/wp-content/uploads/2016/01/Firefox-unresponsive-JavaScritp-edit-bookmarkOverlay.png
  53. 65.

    var worker = new Worker('script.js'); Worker snippet is executed in

    an own thread Worker can’t manipulate the parent document’s DOM Communication via thin API (postMessage) Relation: Current tab/window Lifetime: Until tab/window is closed Web Worker Das Web wird nativ(er) Progressive Web Apps
  54. 66.

    var worker = new SharedWorker('script.js'); Worker snippet is executed in

    an own thread Worker can’t manipulate the parent document’s DOM Communication via thin API (postMessage) Relation: Origin (protocol + hostname + port) Lifetime: Until all tabs/windows of an origin are closed Shared Worker Das Web wird nativ(er) Progressive Web Apps
  55. 67.

    Worker snippet is executed in an own thread Worker can’t

    manipulate the parent document’s DOM Communication via thin API (postMessage) + Acts as a controller/proxy/interceptor + Performs background tasks Has to be installed before usage Relation: Scope (origin + path) Lifetime: Unrelated to tab/window Progressive Web Apps Das Web wird nativ(er) Service Worker
  56. 68.

    Progressive Web Apps Das Web wird nativ(er) Service Worker as

    a controller/proxy/interceptor Service Worker Internet Website HTML/JS Cache fetch
  57. 69.

    Progressive Web Apps Das Web wird nativ(er) Service Worker Lifecycle

    Installing Parsed Error Activated Idle Terminated fetch/ message
  58. 70.

    var xmlHttp = new XMLHttpRequest(); xmlHttp.open('GET', 'sample.json', true); xmlHttp.onreadystatechange =

    () => { if (xmlHttp.readyState == 4) { alert(xmlHttp.responseText); } }; xmlHttp.send(null); XHR vs. fetch Das Web wird nativ(er) Progressive Web Apps fetch('sample.json') .then(response => { if (response.status === 200) { response.text() .then(data => alert(data)); } });
  59. 71.

    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) Hence: Local data storage is needed—synchronization/conflict management required (Web Background Synchronization) Progressive Web Apps Das Web wird nativ(er) Connectivity Independent
  60. 72.

    Progressive Web Apps Das Web wird nativ(er) Offline capability in

    General System Website HTML/JS Local storage Central adapter Remote storage Server Internet
  61. 73.

    Progressive Web Apps Das Web wird nativ(er) Offline capability with

    Service Worker System Website HTML/JS Cache Storage Remote storage Server Internet fetch HTTP Service Worker
  62. 75.

    Progressive Web Apps Das Web wird nativ(er) Cache Then Network

    System Website HTML/JS Cache Storage Remote storage Server Internet 2. fetch HTTP Service Worker 1. lookup
  63. 76.

    { "index": "/index.html", "assetGroups": [ // … ], "dataGroups": [

    // … ] } Progressive Web Apps Das Web wird nativ(er) 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
  64. 77.

    @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! Progressive Web Apps Das Web wird nativ(er) Static Caching LAB #3
  65. 78.

    { "index": "/index.html", "assetGroups": [ { "name": "app", "installMode": "prefetch",

    "resources": { "files": [], "versionedFiles": [] } }, { "name": "assets", "installMode": "lazy", "updateMode": "prefetch", "resources": { "files": [], "urls": [] } } ] } Progressive Web Apps Das Web wird nativ(er) Static Caching Default is prefetch Prefetch: Cache directly Lazy: Cache when requested Specify files, versionedFiles or urls
  66. 79.

    Caching Strategies "dataGroups": [ { "name": "my-api", "urls": ["/api"], "cacheConfig":

    { "strategy": "freshness", "maxSize": 30, "maxAge": "30m", "timeout": "2s" } } ] Progressive Web Apps Das Web wird nativ(er) Dynamic Caching Maximum cache duration freshness: network-first performance: cache-first Only for freshness Maximum amount of cached requests
  67. 80.

    Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-

    engageable Progressive PWA Features Das Web wird nativ(er) Progressive Web Apps https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
  68. 81.

    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 Das Web wird nativ(er) Fresh
  69. 82.

    @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 Das Web wird nativ(er) Fresh
  70. 83.

    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 Das Web wird nativ(er) Fresh
  71. 84.

    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!) • Web SQL (deprecated) • Cookies (inconvenient) • IndexedDB Progressive Web Apps Das Web wird nativ(er) Offline Capability
  72. 85.

    Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-

    engageable Progressive PWA Features Das Web wird nativ(er) Progressive Web Apps https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
  73. 86.

    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
  74. 87.

    PWAs Require HTTPS! Recurring Costs Free Manual Renewal Required Comodo

    GeoTrust Verisign … StartSSL Automatic Renewal ? Third-Party (Azure, GitHub, CloudFlare) Progressive Web Apps Das Web wird nativ(er) Safe
  75. 88.

    Free with automatic renewel 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
  76. 89.

    Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-

    engageable Progressive PWA Features Das Web wird nativ(er) Progressive Web Apps https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
  77. 90.

    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 Das Web wird nativ(er) Re-Engageable
  78. 92.

    Push services Every browser vendor has its own push service

    Challenge: Every service is used in a different way Ends in several implementations on the server Solution: One protocol that can be used by every push service Web Push Protocol Progressive Web Apps Das Web wird nativ(er) Re-Engageable
  79. 93.

    Web Push Protocol Every push service talks Web Push Protocol

    Only one server implementation needed To make the push request secure, private and public keys are needed Ready-to-use-packages are available for different servers (e.g. Node, ASP.NET, etc.) Progressive Web Apps Das Web wird nativ(er) Re-Engageable
  80. 94.

    Sending Push Notifications Progressive Web Apps Das Web wird nativ(er)

    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
  81. 95.

    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 Progressive Web Apps Das Web wird nativ(er) Re-Engageable
  82. 96.

    Lab Create key pair https://web-push-codelab.glitch.me/ can be used to generate

    key pairs Register for Push swPush.requestSubscription({ serverPublicKey: "public key"}) .then(subscription => … ); Progressive Web Apps Das Web wird nativ(er) Push Notifications LAB #4
  83. 97.

    Debugging More information on installed service workers can be found

    on • chrome://serviceworker- internals (Google Chrome) • about:serviceworkers (Mozilla Firefox) Progressive Web Apps Das Web wird nativ(er) Service Worker
  84. 100.

    Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-

    engageable Progressive PWA Features Das Web wird nativ(er) Progressive Web Apps https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
  85. 101.

    • moving forward • happening or developing gradually over a

    period of time • using or interested in new or modern ideas especially in politics and education Source: Merriam-Webster's Learner's Dictionary Progressive Web Apps Das Web wird nativ(er) Progressive \prə-ˈgre-siv\
  86. 102.

    Progressive Web Apps Das Web wird nativ(er) Service Worker Compatibility

    https://jakearchibald.github.io/isserviceworkerready/
  87. 103.

    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 Das Web wird nativ(er) Progressive
  88. 104.

    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 Das Web wird nativ(er) Progressive
  89. 105.

    Payment Request API Upcoming payment technology for the web Supported

    by Microsoft Edge 15+, Google Chrome 61+, Safari 11.1+ (iOS 11.3+) https://blogs.windows.com/msedge dev/2016/12/15/payment-request- api-edge/ Monetization Das Web wird nativ(er) Progressive Web Apps
  90. 107.

    Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-

    engageable Progressive “Uber Pattern” Das Web wird nativ(er) Progressive Web Apps https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/