Native Apps im Web: Progressive Web Apps mit Angular!

Native Apps im Web: Progressive Web Apps mit Angular!

Progressive Web Apps (PWA) erfahren derzeit große Beachtung. 2015 von Google in Umlauf gebracht, ist es heute eines der prominentesten Buzzwords im Bereich der Webentwicklung. Sie versprechen Offlinefähigkeit, sollen installierbar sein, können Push-Benachrichtigungen und einiges mehr. Bei der Entwicklung einer solchen PWA kommt meist ein Framework für das Frontend zum Einsatz, wie z.B. Angular. Seit Angular 5 unterstützt das Framework bei der Entwicklung von PWAs in dem es z.B. Services wie zum Empfangen von Push-Benachrichtungen anbietet. Steffen Jahr von Thinktecture zeigt in dieser dieser Session anhand eines praktischen Beispiels wie Sie mit Angular und dem Angular CLI eine PWA umsetzen können und welche Fallstricke es dabei zu beachten gilt.

7e6b46c3ed5205fe1ce4f47425fd267e?s=128

Steffen Jahr

October 17, 2018
Tweet

Transcript

  1. 1.
  2. 2.

    Web Developer Conference Web goes Native: Progressive Web Apps (PWA)

    with Angular CLI 2 Who is speaking? Steffen Jahr Software Developer @ Thinktecture AG ! steffen.jahr@thinktecture.com " @steffenjahr # https://steffenjahr.de
  3. 3.

    Progressive Web Apps HTML5, JavaScript, CSS3 Service Worker API Fetch

    API Web Notifications Web Workers Push API Web App Manifest HTTPS PWA Technology Overview Web Developer Conference Web goes Native: Progressive Web Apps (PWA) with Angular CLI 3
  4. 4.

    Progressive Web Apps are not a technology, but a collection

    of features an application must/should support. “Uber Pattern” Web Developer Conference Web goes Native: Progressive Web Apps (PWA) with Angular CLI 4
  5. 5.

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

    engageable Progressive “Uber Pattern” Web Developer Conference Web goes Native: Progressive Web Apps (PWA) with Angular CLI 5 https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
  6. 6.

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

    fetch Web Developer Conference Web goes Native: Progressive Web Apps (PWA) with Angular CLI 6
  7. 7.

    What about Angular & PWA? Web Developer Conference Web goes

    Native: Progressive Web Apps (PWA) with Angular CLI 7
  8. 8.

    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? Web Developer Conference Web goes Native: Progressive Web Apps (PWA) with Angular CLI 8
  9. 9.

    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 • Update informations @angular/pwa Web Developer Conference Web goes Native: Progressive Web Apps (PWA) with Angular CLI 9
  10. 10.

    CLI Integration Angular CLI supports service worker generation since version

    1.0.0-rc.2 Opt-in, requires @angular/pwa When activated, service worker generation is automatically added to the ng build command (for production builds) @angular/pwa Web Developer Conference Web goes Native: Progressive Web Apps (PWA) with Angular CLI 10
  11. 11.

    Existing Projects ng add @angular/pwa Angular CLI & @angular/pwa Demo

    Web Developer Conference Web goes Native: Progressive Web Apps (PWA) with Angular CLI 11
  12. 12.

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

    engageable Progressive PWA Features Web Developer Conference Web goes Native: Progressive Web Apps (PWA) with Angular CLI 12 https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
  13. 13.

    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 Web Developer Conference Web goes Native: Progressive Web Apps (PWA) with Angular CLI 13
  14. 14.

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

    in combination with HashLocationStrategy or PathLocationStrategy to achieve “linkability” ng new project --routing imports: [ RouterModule.forRoot(ROUTES, { useHash: true }) ] Linkable Web Developer Conference Web goes Native: Progressive Web Apps (PWA) with Angular CLI 14
  15. 15.

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

    engageable Progressive PWA Features Web Developer Conference Web goes Native: Progressive Web Apps (PWA) with Angular CLI 15 https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
  16. 16.

    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. Web goes Native: Progressive Web Apps (PWA) with Angular CLI Web Developer Conference App-like 16
  17. 17.

    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 Web goes Native: Progressive Web Apps (PWA) with Angular CLI Web Developer Conference App-like 17
  18. 18.

    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 Web goes Native: Progressive Web Apps (PWA) with Angular CLI Web Developer Conference App-like 18
  19. 19.

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

    engageable Progressive PWA Features Web Developer Conference Web goes Native: Progressive Web Apps (PWA) with Angular CLI 19 https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
  20. 20.

    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) Web goes Native: Progressive Web Apps (PWA) with Angular CLI Web Developer Conference Connectivity Independent 20
  21. 21.

    Web goes Native: Progressive Web Apps (PWA) with Angular CLI

    Web Developer Conference Service Worker as a controller/proxy/interceptor 21 Service Worker Internet Website HTML/JS Cache fetch
  22. 22.

    Web goes Native: Progressive Web Apps (PWA) with Angular CLI

    Web Developer Conference Offline capability with Service Worker 22 System Website HTML/JS Cache Storage Remote storage Server Internet fetch HTTP Service Worker
  23. 23.

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

    // … ] } Web goes Native: Progressive Web Apps (PWA) with Angular CLI Web Developer Conference Static Caching 23 Name of index document Purged for each new app version, e.g. for static caching Survive app versions, e.g. for dynamic caching
  24. 24.

    @angular/pwa 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! Web goes Native: Progressive Web Apps (PWA) with Angular CLI Web Developer Conference Static Caching 24
  25. 25.

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

    "resources": { "files": [] } }, { "name": "assets", "installMode": "lazy", "updateMode": "prefetch", "resources": { "files": [], "urls": [] } } ] } Web goes Native: Progressive Web Apps (PWA) with Angular CLI Web Developer Conference Static Caching 25 Default is prefetch Prefetch: Cache directly Lazy: Cache when requested Specify files or urls
  26. 26.

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

    engageable Progressive PWA Features Web Developer Conference Web goes Native: Progressive Web Apps (PWA) with Angular CLI 26 https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
  27. 27.

    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. Web goes Native: Progressive Web Apps (PWA) with Angular CLI Web Developer Conference Fresh 27
  28. 28.

    @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. Web goes Native: Progressive Web Apps (PWA) with Angular CLI Web Developer Conference Fresh 28
  29. 29.

    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. Web goes Native: Progressive Web Apps (PWA) with Angular CLI Web Developer Conference Fresh 29
  30. 30.

    App-like, Connectivity Independent, Fresh Cache external content via ngsw-config.json "assetGroups":

    [{ /*…*/ "resources": { "urls": [] } /*…*/ }] Check for application updates swUpdate.available.subscribe(() => …); Web goes Native: Progressive Web Apps (PWA) with Angular CLI Web Developer Conference Static Caching & SwUpdate 30
  31. 31.

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

    engageable Progressive PWA Features Web Developer Conference Web goes Native: Progressive Web Apps (PWA) with Angular CLI 31 https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
  32. 32.

    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 Web goes Native: Progressive Web Apps (PWA) with Angular CLI Web Developer Conference Re-Engageable 32
  33. 33.

    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 Web goes Native: Progressive Web Apps (PWA) with Angular CLI Web Developer Conference Re-Engageable 33
  34. 34.

    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.) Web goes Native: Progressive Web Apps (PWA) with Angular CLI Web Developer Conference Re-Engageable 34
  35. 35.

    Sending Push Notifications Web goes Native: Progressive Web Apps (PWA)

    with Angular CLI Web Developer Conference Re-Engageable 35 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
  36. 36.

    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 Web goes Native: Progressive Web Apps (PWA) with Angular CLI Web Developer Conference Re-Engageable 36
  37. 37.

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

    engageable Progressive PWA Features Web Developer Conference Web goes Native: Progressive Web Apps (PWA) with Angular CLI 37 https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
  38. 38.

    Advance with Progressive Enhancement if (swUpdate.isEnabled || swPush.isEnabled) { /*

    … */ } In JavaScript: check whether or not an API/feature is available If yes—use it! Web goes Native: Progressive Web Apps (PWA) with Angular CLI Web Developer Conference Progressive 38
  39. 39.

    Web Share API Relatively new API of the web platform

    Allows sharing any URLs or text Source website must be served over HTTPS API can only be invoked as a result of a user action (i.e. a click) Web goes Native: Progressive Web Apps (PWA) with Angular CLI Web Developer Conference Progressive 39
  40. 40.

    Web Share API navigator.share({ title: 'title', text: 'text', url: 'https://foobar.com’

    }) .then(() => /* success */) .catch(err => /* error */); Web goes Native: Progressive Web Apps (PWA) with Angular CLI Web Developer Conference Progressive 40
  41. 41.

    Web Share API In our demo application, there’s a FeatureService

    for detecting browser features (Progressive Enhancement) Implement Web Share API in share.service.ts Use a fallback method in case Web Share API is unavailable Web goes Native: Progressive Web Apps (PWA) with Angular CLI Web Developer Conference Progressive 41
  42. 42.

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

    engageable Progressive “Uber Pattern” Web Developer Conference Web goes Native: Progressive Web Apps (PWA) with Angular CLI 42 https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
  43. 43.