Slide 1
Slide 1 text
Progressive Web Apps mit Angular
Das Web wird nativ(er)
Christian Liebel
@christianliebel
Consultant
Slide 2
Slide 2 text
Hello, it’s me.
Web Components als Frameworkersatz
Das Frontend-Experiment
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
Das Web wird nativ(er)
Progressive Web Apps mit Angular
Slide 4
Slide 4 text
Progressive Web Apps mit Angular
Das Web wird nativ(er)
- Das PWA-Anwendungsmodell
- Web App Manifest
- Service Worker und Cache API
- Workbox: Toolkit für PWAs
- Angular-Unterstützung für PWAs
- Natives Look & Feel
- Migrieren & veröffentlichen
- Payment Request API & Apple Pay
www.rheinwerk-verlag.de/4707
Slide 5
Slide 5 text
Original
09:00–10:30 Block 1
10:30–11:00 Break
11:00–12:30 Block 2
Timetable
Das Web wird nativ(er)
Progressive Web Apps mit Angular
Slide 6
Slide 6 text
Progressive Web Apps mit Angular
Das Web wird nativ(er)
https://blogs.windows.com/windowsdeveloper/2019/11/25/developing-for-the-new-category-of-dual-screen-devices-built-for-mobile-productivity/
Slide 7
Slide 7 text
Progressive Web Apps mit Angular
Das Web wird nativ(er)
Cross-Platform Sample
https://pwapraxis.liebel.io
Slide 8
Slide 8 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
Das Web wird nativ(er)
Progressive Web Apps mit Angular
Slide 9
Slide 9 text
Setup complete?
(Node.js, Angular CLI,
Google Chrome, Editor)
Let’s get started
Das Web wird nativ(er)
Progressive Web Apps mit Angular
Slide 10
Slide 10 text
ng new my-pwa --routing --style css
cd my-pwa
Angular CLI
LAB #1
Das Web wird nativ(er)
Progressive Web Apps mit Angular
Slide 11
Slide 11 text
Das Web wird nativ(er)
Progressive Web Apps mit Angular
Responsive Linkable Discoverable Installable App-like
Connectivity
Independent
Fresh Safe Re-engageable Progressive
Slide 12
Slide 12 text
Platform Support
PWA Status Quo
Das Web wird nativ(er)
Progressive Web Apps mit Angular
17
11.1
44
40 4.1
Chrome 40
11.3
Slide 13
Slide 13 text
Responsive
Progressive Web Apps mit Angular
Das Web wird nativ(er)
PWA Features
Slide 14
Slide 14 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 mit Angular
Das Web wird nativ(er)
Responsive
Slide 15
Slide 15 text
Frameworks
• Angular Material
• ngx-admin
• Bootstrap
• Foundation
• Framework7
• Custom-tailored solution
Progressive Web Apps mit Angular
Das Web wird nativ(er)
Responsive
Slide 16
Slide 16 text
ng add @angular/material
Responsive
LAB #2
Das Web wird nativ(er)
Progressive Web Apps mit Angular
Slide 17
Slide 17 text
Linkable
Progressive Web Apps mit Angular
Das Web wird nativ(er)
PWA Features
Slide 18
Slide 18 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
Das Web wird nativ(er)
Progressive Web Apps mit Angular
Slide 19
Slide 19 text
ng g c todos
ng g c about
Linkable
LAB #3
Das Web wird nativ(er)
Progressive Web Apps mit Angular
Slide 20
Slide 20 text
Discoverable
Progressive Web Apps mit Angular
Das Web wird nativ(er)
PWA Features
Slide 21
Slide 21 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
Das Web wird nativ(er)
Progressive Web Apps mit Angular
Slide 22
Slide 22 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
Das Web wird nativ(er)
Progressive Web Apps mit Angular
Slide 23
Slide 23 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
Das Web wird nativ(er)
Progressive Web Apps mit Angular
Slide 24
Slide 24 text
Angular CLI & PWA Schematic
ng add @angular/pwa
Web App Manifest
LAB #4
Das Web wird nativ(er)
Progressive Web Apps mit Angular
Slide 25
Slide 25 text
Shortcuts (upcoming)
Progressive Web Apps mit Angular
Das Web wird nativ(er)
Web App Manifest
Slide 26
Slide 26 text
Badging API (upcoming)
Progressive Web Apps mit Angular
Das Web wird nativ(er)
Web App Manifest
Slide 27
Slide 27 text
Installable
Progressive Web Apps mit Angular
Das Web wird nativ(er)
PWA Features
Slide 28
Slide 28 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
Das Web wird nativ(er)
Progressive Web Apps mit Angular
Slide 29
Slide 29 text
Progressive Web Apps mit Angular
Das Web wird nativ(er)
Slide 30
Slide 30 text
Progressive Web Apps mit Angular
Das Web wird nativ(er)
Installable
Slide 31
Slide 31 text
Web App Manifest
Adjust the Web App Manifest
(manifest.webmanifest) to your needs
Run ng build --prod
Test it by adding the app to your
home screen
Installable
LAB #5
Das Web wird nativ(er)
Progressive Web Apps mit Angular
Slide 32
Slide 32 text
App-Like
Progressive Web Apps mit Angular
Das Web wird nativ(er)
PWA Features
Slide 33
Slide 33 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
Das Web wird nativ(er)
Progressive Web Apps mit Angular
Slide 34
Slide 34 text
Native look & feel
Progressive Web Apps mit Angular
Das Web wird nativ(er)
App-like
Slide 35
Slide 35 text
ng generate @angular/material:nav nav
Progressive Web Apps mit Angular
Das Web wird nativ(er)
Generate Navigation
LAB #6
Slide 36
Slide 36 text
Connectivity
Independent
Part 1
Progressive Web Apps mit Angular
Das Web wird nativ(er)
PWA Features
Slide 37
Slide 37 text
Progressive Web Apps mit Angular
Das Web wird nativ(er)
Offline capability with Service Worker
System
Website
HTML/JS
Cache
Storage
Remote
storage
Server
Internet
fetch HTTP
Service
Worker
Slide 38
Slide 38 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
Das Web wird nativ(er)
Progressive Web Apps mit Angular
Slide 39
Slide 39 text
Debugging
More information on installed
service workers can be found on
• chrome://serviceworker-
internals (Google Chrome)
• about:serviceworkers
(Mozilla Firefox)
Progressive Web Apps mit Angular
Das Web wird nativ(er)
Service Worker
Slide 40
Slide 40 text
Debugging
Debug Service Workers using
Chrome Developer Tools
Progressive Web Apps mit Angular
Das Web wird nativ(er)
Service Worker
LAB #7
Slide 41
Slide 41 text
Fresh
Progressive Web Apps mit Angular
Das Web wird nativ(er)
PWA Features
Slide 42
Slide 42 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 mit Angular
Das Web wird nativ(er)
Fresh
Slide 43
Slide 43 text
@angular/service-worker Update Process
Progressive Web Apps mit Angular
Das Web wird nativ(er)
Fresh
V1 V2 V2
V1 V1 V2
Server
Browser
Slide 44
Slide 44 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 mit Angular
Das Web wird nativ(er)
Fresh
Slide 45
Slide 45 text
App-like, Connectivity Independent, Fresh
Check for application updates
swUpdate.available.subscribe(() => …);
Progressive Web Apps mit Angular
Das Web wird nativ(er)
Fresh
LAB #8
Slide 46
Slide 46 text
Connectivity
Independent
Part 2
Progressive Web Apps mit Angular
Das Web wird nativ(er)
PWA Features
Slide 47
Slide 47 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 mit Angular
Das Web wird nativ(er)
Offline Capability
Slide 48
Slide 48 text
IndexedDB
Progressive Web Apps mit Angular
Das Web wird nativ(er)
Offline Capability
Slide 49
Slide 49 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 mit Angular
Das Web wird nativ(er)
Offline Capability
Slide 50
Slide 50 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 mit Angular
Das Web wird nativ(er)
Offline Capability
Slide 51
Slide 51 text
IndexedDB
Model
{ "id": "2db0d3e5-…", "title": "Angular lernen", "done": false }
Install packages
npm i dexie uuid --save-dev
Dexie.js Table API
Implement a TodoService with getAll & add methods
Progressive Web Apps mit Angular
Das Web wird nativ(er)
Offline Capability LAB #9
Slide 52
Slide 52 text
Safe
Progressive Web Apps mit Angular
Das Web wird nativ(er)
PWA Features
Slide 53
Slide 53 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
Das Web wird nativ(er)
Progressive Web Apps mit Angular
Slide 54
Slide 54 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
Das Web wird nativ(er)
Progressive Web Apps mit Angular
Slide 55
Slide 55 text
Re-engageable
Progressive Web Apps mit Angular
Das Web wird nativ(er)
PWA Features
Slide 56
Slide 56 text
Get the user back with notifications
Progressive Web Apps mit Angular
Das Web wird nativ(er)
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 57
Slide 57 text
Push API
Progressive Web Apps mit Angular
Das Web wird nativ(er)
Re-Engageable
17
—
44
44
Slide 58
Slide 58 text
Progressive
Progressive Web Apps mit Angular
Das Web wird nativ(er)
PWA Features
Slide 59
Slide 59 text
Progressive Web Apps mit Angular
Das Web wird nativ(er)
Slide 60
Slide 60 text
A More Capable Web
Progressive Web Apps mit Angular
Das Web wird nativ(er)
Project Fugu
»Let’s bring the web
back – API by API«
Thomas Steiner, Google
Slide 61
Slide 61 text
Progressive Web Apps mit Angular
Das Web wird nativ(er)
Project Fugu
Contacts
Picker
Screen Wake
Lock API
File System
Access API
Shape
Detection API
Slide 62
Slide 62 text
Progressive Web Apps mit Angular
Das Web wird nativ(er)
PWAs & App Stores
(US)
Slide 63
Slide 63 text
Native App Packaging
Das Web wird nativ(er)
Progressive Web Apps mit Angular
JS
HTML
CSS
.ipa
.exe .app ELF
.apk .appx
Single-Page
Application
Cordova
Electron
Slide 64
Slide 64 text
Progressive Web Apps mit Angular
Das Web wird nativ(er)
Where’s the Web Heading to?
Slide 65
Slide 65 text
Thank you
for your kind attention!
Christian Liebel
@christianliebel
[email protected]