Native Qualitäten im Web: Progressive Web Apps mit Angular

Progressive Web Apps kombinieren die Vorzüge des Webs mit denen nativer Anwendungen. Sie starten blitzschnell vom Home-Screen, erlauben Offlineszenarien zur Überbrückung schlechter oder gar fehlender Datenverbindungen und unterstützen echte Push-Nachrichten. Als Web-Anwendungen laufen sie auf jeder Plattform und können direkt per HTTPS bezogen werden. In dieser Session erfahren Sie anhand eines durchgängigen auf Angular basierenden Beispiels, wie Sie solche Web-Anwendungen umsetzen können. Dazu lernen Sie die zugrundeliegenden Techniken, wie Service Worker oder das Web App Manifest sowie das nützliche Browsertool Lighthouse kennen. Daneben erfahren Sie auch, wie Angular die Erstellung solcher Anwendungen drastisch vereinfacht.

Transcript

1. Christian Liebel @chris_liebel christian.liebel@thinktecture.com Native Qualitäten im Web: Progressive Web Apps mit Angular XPC 2017
2. Christian Liebel Thinktecture AG Microsoft MVP Visual Studio and Development Technologies Twitter: @chris_liebel E-Mail: christian.liebel@thinktecture.com https://thinktecture.com https://christianliebel.com Gestatten? Progressive Web Apps mit Angular Native Qualitäten im Web
3. Windows Mobile 5 Apps in 2005… http://pocketpccentral.net/images/help/install_cab_file/ppc2.jpg Progressive Web Apps mit Angular Native Qualitäten im Web
4. Apps in 2007… https://www.youtube.com/watch?v=vN4U5FqrOdQ Progressive Web Apps mit Angular Native Qualitäten im Web
5. Progressive Web Apps mit Angular Native Qualitäten im Web
6. App Stores Apps Today… Progressive Web Apps mit Angular Native Qualitäten im Web
7. The Web is Becoming (More) Native • Idea: No App-Store required any longer • Web App = App App • Feature Parity: Native Experience with Push Notifications, Offline Availability, … • Powered by Google, ready to use on Android today – Mozilla and Microsoft have joined • Downwards compatible (Progressive Enhancement) • PWA are no technology, but a collection of features Apps Tomorrow… Progressive Web Apps mit Angular Native Qualitäten im Web
8. Safe Progressive Responsive Discoverable App-like Fresh Connectivity Independent Re- engageable Installable Linkable Progressive Web Apps are… https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/ Progressive Web Apps mit Angular Native Qualitäten im Web
9. Progressive Web Apps HTML5, JavaScript, CSS3 Service Worker API Fetch API Web Notifications Web Workers Push API Web App Manifest HTTPS PWA Technologies Progressive Web Apps mit Angular Native Qualitäten im Web
10. As a Proxy/Interceptor Service Worker System Website HTML/JS Cache Storage Entfernter Speicher Server Internet fetch HTTP Service Worker Progressive Web Apps mit Angular Native Qualitäten im Web
11. npm install @angular/service-worker ng set apps.0.serviceWorker true Native Qualitäten im Web Progressive Web Apps mit Angular Now what about Angular?
12. Setup Implements a “one size fits all” service worker Instrumented by ngsw-manifest.json Initial static content caching Push notifications Integrations for Gulp and Webpack build pipelines Open-source: https://github.com/angular/mobile Native Qualitäten im Web Progressive Web Apps mit Angular Angular Service Worker DEMO
13. Static caching @angular/service-worker allows static caching Cache information (file names and hashes) is added to ngsw- manifest.json Writing this cache information manually is a rather hard job, build integrations are preferred The Webpack build integration (included in Angular CLI) adds the artifacts from the build output out of the box The service worker already works for productive builds! Native Qualitäten im Web Progressive Web Apps mit Angular Connectivity Independent DEMO
14. Web App Manifest How to distinguish Progressive Web Apps from arbitrary websites? Idea: Define metadata in a manifest and reference it in index.html Information is used for the home screen icon, app switcher, … Search engines can offer web app searches Marketplace providers can crawl the web for web apps (Windows Store) <link rel="manifest" href="manifest.json"> Native Qualitäten im Web Progressive Web Apps mit Angular Discoverable DEMO
15. Push Notifications @angular/service-worker allows push notifications They first have to be enabled via ngsw-manifest.json Required steps for push notifications differ from runtime platform to runtime platform Google Chrome: Firebase API keys required Usually the information from the PushSubscription would be sent to the backend or a third-party service (Batch, OneSignal, …) Native Qualitäten im Web Progressive Web Apps mit Angular Re-Engagable DEMO
16. Push Notifications Native Qualitäten im Web Progressive Web Apps mit Angular Re-Engageable
17. Lighthouse Native Qualitäten im Web Progressive Web Apps mit Angular Tools
18. mobile.twitter.com References https://pwa.rocks Progressive Web Apps mit Angular Native Qualitäten im Web
19. Monetarization Payment Request API Supported by Microsoft Edge Upcoming payment technology for the web https://blogs.windows.com/msedge dev/2016/12/15/payment-request- api-edge/ Progressive Web Apps Progressive Web Apps mit Angular Native Qualitäten im Web
20. On GitHub https://github.com/thinktecture/xpc-2017-pwa-demo git clone https://github.com/thinktecture/xpc-2017-pwa-demo.git npm install ng serve --prod Demo-Repository Progressive Web Apps mit Angular Native Qualitäten im Web
21. Vielen Dank für Ihre Aufmerksamkeit Christian Liebel @chris_liebel christian.liebel@thinktecture.com