Progressive Web Apps für Einsteiger – Hands on!

by Christian Liebel

Slide 1

Slide 1 text

Progressive Web Apps für Einsteiger Hands on! Christian Liebel @christianliebel Consultant

Slide 2

Slide 2 text

Hello, it’s me. Progressive Web Apps für Einsteiger Hands on! Christian Liebel Twitter: @christianliebel Email: christian.liebel @thinktecture.com Angular & PWA Slides: thinktecture.com /christian-liebel

Slide 3

Slide 3 text

Things NOT to expect - Blueprint for PWA development - No 1:1 support Things TO EXPECT - Extensive/up-to-date insights into PWA and Angular’s PWA support - A PWA use case that works on your (comparably modern) smartphone & desktop PC - Lots of fun Hands on! Progressive Web Apps für Einsteiger

Slide 4

Slide 4 text

13:30–15:00 Block 1 15:00–15:30 Break 15:30–17:00 Block 2 Timetable Hands on! Progressive Web Apps für Einsteiger

Slide 5

Slide 5 text

Progressive Web Apps für Einsteiger Hands on! Cross-Platform Sample https://pwapraxis.liebel.io

Slide 6

Slide 6 text

- The next best to-do list app - Create & read to-dos - Progressive Web App: installable - Responsive: one size fits all - Offline-first: synchronize to-do list with backend using IndexedDB & Dexie.js - No user context, sorry Demo Use Case Hands on! Progressive Web Apps für Einsteiger

Slide 7

Slide 7 text

Setup Node.js: https://nodejs.org (v12+) Angular CLI: npm i -g @angular/cli Google Chrome Editor Let’s get started Hands on! Progressive Web Apps für Einsteiger

Slide 8

Slide 8 text

ng new my-pwa --routing --style css cd my-pwa Angular CLI LAB #1 Hands on! Progressive Web Apps für Einsteiger

Slide 9

Slide 9 text

Hands on! Progressive Web Apps für Einsteiger Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-engageable Progressive

Slide 10

Slide 10 text

Platform Support PWA Status Quo Hands on! Progressive Web Apps für Einsteiger 17 11.1 44 40 4.1 Chrome 40 11.3

Slide 11

Slide 11 text

Responsive Progressive Web Apps für Einsteiger Hands on! PWA Features

Slide 12

Slide 12 text

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 für Einsteiger Hands on! Responsive

Slide 13

Slide 13 text

Frameworks • Angular Material • ngx-admin • Bootstrap • Foundation • Framework7 • Custom-tailored solution Progressive Web Apps für Einsteiger Hands on! Responsive

Slide 14

Slide 14 text

ng add @angular/material Responsive LAB #2 Hands on! Progressive Web Apps für Einsteiger

Slide 15

Slide 15 text

Linkable Progressive Web Apps für Einsteiger Hands on! PWA Features

Slide 16

Slide 16 text

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) Solved in Angular via Routing (for views and states) Linkable Hands on! Progressive Web Apps für Einsteiger

Slide 17

Slide 17 text

ng g c todos ng g c about Linkable LAB #3 Hands on! Progressive Web Apps für Einsteiger

Slide 18

Slide 18 text

Discoverable Progressive Web Apps für Einsteiger Hands on! PWA Features

Slide 19

Slide 19 text

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 Discoverable Hands on! Progressive Web Apps für Einsteiger

Slide 20

Slide 20 text

manifest.webmanifest { "short_name": "PWA Demo", "name": "My 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 Age Rating Additional Config Description Related Apps Hands on! Progressive Web Apps für Einsteiger

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Angular CLI & PWA Schematic ng add @angular/pwa Web App Manifest LAB #4 Hands on! Progressive Web Apps für Einsteiger

Slide 23

Slide 23 text

Shortcuts Progressive Web Apps für Einsteiger Hands on! Web App Manifest

Slide 24

Slide 24 text

Badging API Progressive Web Apps für Einsteiger Hands on! Web App Manifest

Slide 25

Slide 25 text

Installable Progressive Web Apps für Einsteiger Hands on! PWA Features

Slide 26

Slide 26 text

manifest.webmanifest { "short_name": "PWA Demo", "name": "My PWA Demo", "icons": [ { "src": "assets/icon-144x144.png", "sizes": "144x144", "type": "image/png" } ], "start_url": "/index.html", "display": "standalone" } App Install Banner Hands on! Progressive Web Apps für Einsteiger

Slide 27

Slide 27 text

Progressive Web Apps für Einsteiger Hands on!

Slide 28

Slide 28 text

Progressive Web Apps für Einsteiger Hands on! Installable

Slide 29

Slide 29 text

Web App Manifest Adjust the Web App Manifest (manifest.webmanifest) to your needs Run ng build Test it by adding the app to your home screen Installable LAB #5 Hands on! Progressive Web Apps für Einsteiger

Slide 30

Slide 30 text

App-Like Progressive Web Apps für Einsteiger Hands on! PWA Features

Slide 31

Slide 31 text

The Power of the Modern Web Web Share API Gamepad API Payment Request API Generic Sensor API Web Bluetooth API Shape Detection API Web Notifications WebXR WebRTC WebGL Speech Synthesis Web Cryptography API IndexedDB Geolocation Canvas Media Capture and Streams Hands on! Progressive Web Apps für Einsteiger

Slide 32

Slide 32 text

Native look & feel Progressive Web Apps für Einsteiger Hands on! App-like

Slide 33

Slide 33 text

cd ../.. ng generate @angular/material:nav nav Progressive Web Apps für Einsteiger Hands on! Generate Navigation LAB #6

Slide 34

Slide 34 text

Connectivity Independent Part 1 Progressive Web Apps für Einsteiger Hands on! PWA Features

Slide 35

Slide 35 text

Progressive Web Apps für Einsteiger Hands on! Offline capability with Service Worker System Website HTML/JS Cache Storage Remote storage Server Internet fetch HTTP Service Worker

Slide 36

Slide 36 text

Overview Implements a “one-size-fits-all” service worker Instrumented via ngsw-config.json Restricted feature set (e.g., no communication between app and SW) • Initial caching of static content • Caching external content • Dynamic Caching • Push notifications @angular/service-worker Hands on! Progressive Web Apps für Einsteiger

Slide 37

Slide 37 text

Debugging More information on installed service workers can be found on • chrome://serviceworker- internals (Google Chrome) • about:serviceworkers (Mozilla Firefox) Progressive Web Apps für Einsteiger Hands on! Service Worker

Slide 38

Slide 38 text

Debugging Debug Service Workers using Chrome Developer Tools Progressive Web Apps für Einsteiger Hands on! Service Worker LAB #7

Slide 39

Slide 39 text

Fresh Progressive Web Apps für Einsteiger Hands on! PWA Features

Slide 40

Slide 40 text

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 für Einsteiger Hands on! Fresh

Slide 41

Slide 41 text

@angular/service-worker Update Process Progressive Web Apps für Einsteiger Hands on! Fresh V1 V2 V2 V1 V1 V2 Server Browser

Slide 42

Slide 42 text

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 für Einsteiger Hands on! Fresh

Slide 43

Slide 43 text

App-like, Connectivity Independent, Fresh Check for application updates swUpdate.available.subscribe(() => …); Progressive Web Apps für Einsteiger Hands on! Fresh LAB #8

Slide 44

Slide 44 text

Connectivity Independent Part 2 Progressive Web Apps für Einsteiger Hands on! PWA Features

Slide 45

Slide 45 text

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!) • Cookies (inconvenient) • IndexedDB Progressive Web Apps für Einsteiger Hands on! Offline Capability

Slide 46

Slide 46 text

IndexedDB Progressive Web Apps für Einsteiger Hands on! Offline Capability

Slide 47

Slide 47 text

IndexedDB let db; const request = indexedDB. open('TestDB'); request.onerror = err => { console.error('boo!'); }; request.onsuccess = evt => { db = request.result; }; IndexedDB API is inconvenient const db = new Dexie('TestDB'); Progressive Web Apps für Einsteiger Hands on! Offline Capability

Slide 48

Slide 48 text

Dexie.js Dexie is a minimalistic wrapper for IndexedDB Operations are based on promises instead of callbacks Near native performance (also for bulk inserts) Open-source Progressive Web Apps für Einsteiger Hands on! Offline Capability

Slide 49

Slide 49 text

IndexedDB Model { "id": "2db0d3e5-…", "title": "Angular lernen", "done": false } Install packages npm i dexie uuid @types/uuid --save-dev Dexie.js Table API Implement a TodoService with getAll & add methods Progressive Web Apps für Einsteiger Hands on! Offline Capability LAB #9

Slide 50

Slide 50 text

Safe Progressive Web Apps für Einsteiger Hands on! PWA Features

Slide 51

Slide 51 text

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 Hands on! Progressive Web Apps für Einsteiger

Slide 52

Slide 52 text

Free with automatic renewal 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 Hands on! Progressive Web Apps für Einsteiger

Slide 53

Slide 53 text

Re-engageable Progressive Web Apps für Einsteiger Hands on! PWA Features

Slide 54

Slide 54 text

Get the user back with notifications Progressive Web Apps für Einsteiger Hands on! Re-Engageable Ä Peter and 12 other people like your photo. SOCIAL NETWORK 08:12 Only today! 350 golden diamonds ! for $3.49!! PAY TO WIN GAME 11:19

Slide 55

Slide 55 text

Push API Progressive Web Apps für Einsteiger Hands on! Re-Engageable 17 — 44 44

Slide 56

Slide 56 text

Progressive Progressive Web Apps für Einsteiger Hands on! PWA Features

Slide 57

Slide 57 text

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 für Einsteiger Hands on! Progressive

Slide 58

Slide 58 text

Progressive Web Apps für Einsteiger Hands on!

Slide 59

Slide 59 text

Native App Packaging Hands on! Progressive Web Apps für Einsteiger JS HTML CSS .ipa .exe .app ELF .apk .appx Single-Page Application Cordova Electron

Slide 60

Slide 60 text

Progressive Web Apps für Einsteiger Hands on! PWAs & App Stores (US)

Slide 61

Slide 61 text

Progressive Web Apps für Einsteiger Hands on! Where’s the Web Heading to?

Slide 62

Slide 62 text

Thank you for your kind attention! Christian Liebel @christianliebel [email protected]