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.

Transcript

1. Steffen Jahr @steffenjahr Web goes Native: Progressive Web Apps (PWA) with Angular CLI Web Developer Conference
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. 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. 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. 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. 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. What about Angular & PWA? Web Developer Conference Web goes Native: Progressive Web Apps (PWA) with Angular CLI 7
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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. { "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. @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. { "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. 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. 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. @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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Thank you for your kind attention! Repository: http://bit.ly/wdc-pwa 43 Steffen Jahr @steffenjahr steffen.jahr@thinktecture.com