Slide 1
Slide 1 text
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Christian Liebel
Consultant
@christianliebel
Slide 2
Slide 2 text
Hello, it’s me.
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Christian Liebel
Twitter:
@christianliebel
Email:
christian.liebel
@thinktecture.com
Angular & PWA
Slides:
thinktecture.com
/christian-liebel
Slide 3
Slide 3 text
The image part with relationship ID rId12 was not found in the file.
The image part with relationship ID rId12 was not found in the file.
Special Day “Modern Business Applications”
Thema Sprecher Datum, Uhrzeit
Ein Wegweiser durch den Dschungel
der Web-API Möglichkeiten
Gregor Biswanger DI, 22. September 2020,
10.30 bis 11.30
Web Components auf Steroiden
mit StencilJS
Manuel Rauber DI, 22. September 2020,
12.00 bis 13.00
Progressive Web Apps –
die Grundlagen
Sebastian Springer DI, 22. September 2020,
14.30 bis 15.30
Progressive Web Apps mit Angular:
Tipps für Fortgeschrittene
Christian Liebel DI, 22. September 2020,
16.00 bis 17.00
Blazor: Single Page Applications
im Browser mit C# & WebAssembly
Christian Weyer DI, 22. September 2020,
17.30 bis 18.30
Slide 4
Slide 4 text
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Slide 5
Slide 5 text
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
PWAs with Angular LIVE DEMO
Slide 6
Slide 6 text
ü Web App Manifest
ü Icon
ü Service Worker configuration
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
PWAs with Angular
Slide 7
Slide 7 text
§ Initial caching of static content
§ Caching external content
§ Dynamic caching
§ Push notifications
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Angular Service Worker (NGSW)
Slide 8
Slide 8 text
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Slide 9
Slide 9 text
Debugging
Communicate
App Updates
Push
Notifications
Request
Installation
When
Workbox?
When NGSW?
Project Fugu
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Agenda
Slide 10
Slide 10 text
Debugging
Communicate
App Updates
Push
Notifications
Request
Installation
When
Workbox?
When NGSW?
Project Fugu
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Agenda
Slide 11
Slide 11 text
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Service Worker
System
Website
HTML/JS
Cache
Storage
Internet
fetch HTTP
Service
Worker
Slide 12
Slide 12 text
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Service Worker Debugging (DevTools)
Slide 13
Slide 13 text
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Cache Debugging (DevTools) LIVE DEMO
Slide 14
Slide 14 text
ngsw-config.json
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Cache Debugging
{
"index": "/index.html",
"assetGroups": [
// …
],
"dataGroups": [
// …
]
}
Name of index document
Caches source files of a single app version (i.e., static caching)
Survive app versions (i.e., for dynamic caching)
Slide 15
Slide 15 text
ngsw.json
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Cache Debugging
ngsw-
config.json
ng build
--prod
ngsw.json
Slide 16
Slide 16 text
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
NGSW Debug State
Slide 17
Slide 17 text
§ Developers have a full debugging experience for Service Workers in
Chrome DevTools
§ In Angular: /ngsw/state shows the debug page of Angular’s Service
Worker
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Takeaways
Slide 18
Slide 18 text
Debugging
Communicate
App Updates
Push
Notifications
Request
Installation
When
Workbox?
When NGSW?
Project Fugu
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Agenda
Slide 19
Slide 19 text
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Communicate App Updates
V1 V2 V2
V1 V1 V2
Server
Browser
Slide 20
Slide 20 text
Angular: SwUpdate
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Communicate App Updates
Slide 21
Slide 21 text
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Communicate App Updates LIVE DEMO
Slide 22
Slide 22 text
ngsw-config.json
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Communicate App Updates
Slide 23
Slide 23 text
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Communicate App Updates LIVE DEMO
Slide 24
Slide 24 text
§ Inform your users when there is an update and allow them to get the
update instantly
§ Optional: Show a changelog of what is included in the update
§ In Angular: Use SwUpdate
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Communicate App Updates
Slide 25
Slide 25 text
Debugging
Communicate
App Updates
Push
Notifications
Request
Installation
When
Workbox?
When NGSW?
Project Fugu
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Agenda
Slide 26
Slide 26 text
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
SwPush
Slide 27
Slide 27 text
Permissions
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Push Notifications
Slide 28
Slide 28 text
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Push Notifications
https://dev.to/chromiumdev/yestifications-exploring-how-users-engage-with-notification-prompts-in-the-chrome-ux-report-4h7c
Slide 29
Slide 29 text
Permissions
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Push Notifications
https://blog.chromium.org/2020/01/introducing-quieter-permission-ui-for.html
“In addition, the quieter UI will
be automatically enabled for
users under two conditions:
first, for users who typically
block notification permission
requests and second, on sites
with very low opt in rates.”
Slide 30
Slide 30 text
Permissions
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Push Notifications
https://blog.mozilla.org/futurereleases/2019/11/04/restricting-notification-permission-prompts-in-firefox/
Slide 31
Slide 31 text
Double Permission
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Push Notifications
Slide 32
Slide 32 text
SWR3 – Double Opt-In
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Push Notifications
Slide 33
Slide 33 text
SWR3 – Channels
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Push Notifications
Slide 34
Slide 34 text
Register for Push
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Push Notifications LIVE DEMO
Slide 35
Slide 35 text
Debugging
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Push Notifications
Slide 36
Slide 36 text
Takeaways
§ Always make use of double opt-in
§ Communicate the advantages of your push notifications
§ Optional: Allow users to subscribe to specific channels
§ In Angular: Use SwPush
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Push Notifications
Slide 37
Slide 37 text
Debugging
Communicate
App Updates
Push
Notifications
Request
Installation
When
Workbox?
When NGSW?
Project Fugu
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Agenda
Slide 38
Slide 38 text
Requirements
Web App is not already installed
Meets a user engagement heuristic (previously: user has interacted with
domain for at least 30 seconds)
Includes a Web App Manifest that has short_name or name, at least a
192px and 512px icon, a start_url and a display mode of fullscreen,
standalone or minimal-ui
Served over HTTPS
Has a registered service worker with a fetch event handler
https://developers.google.com/web/fundamentals/app-install-banners/
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Request Installation
Slide 39
Slide 39 text
Address Bar
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Request Installation
Slide 40
Slide 40 text
beforeinstallprompt
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Request Installation LIVE DEMO
Slide 41
Slide 41 text
beforeinstallprompt
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Request Installation
Slide 42
Slide 42 text
Takeaways
§ Fulfill the installation requirements
§ Optional: Provide an install button within your own UI via
beforeinstallprompt (at risk in Web App Manifest, could stay
Chromium-only)
§ Test criteria via Lighthouse
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Request Installation
Slide 43
Slide 43 text
Debugging
Communicate
App Updates
Push
Notifications
Request
Installation
When
Workbox?
When NGSW?
Project Fugu
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Agenda
Slide 44
Slide 44 text
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
When Workbox? When NGSW?
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
Slide 45
Slide 45 text
Debugging
Communicate
App Updates
Push
Notifications
Request
Installation
When
Workbox?
When NGSW?
Project Fugu
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Agenda
Slide 46
Slide 46 text
Cross-Vendor Initiative Led By…
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Project Fugu – A More Capable Web
»Let’s bring the web
back – API by API«
Thomas Steiner, Google
Slide 47
Slide 47 text
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Project Fugu
Contacts
Picker
Wake Lock
API
Picture in
picture
File System
Access API
Slide 48
Slide 48 text
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Project Fugu
https://goo.gle/fugu-api-tracker
Slide 49
Slide 49 text
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Project Fugu LIVE DEMO
Slide 50
Slide 50 text
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Project Fugu
navigator.share();
Intent.ACTION_SEND DataTransferManager
…
SharingViewController
Slide 51
Slide 51 text
Takeaways
§ Expect web applications to become more and more powerful
§ Keep an eye on Fugu’s Bug Tracker (e.g. by subscribing to changes of
the spreadsheet)
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Project Fugu
Slide 52
Slide 52 text
Questions?
Progressive Web Apps mit Angular
Tipps für Fortgeschrittene
Slide 53
Slide 53 text
Thank you
for your kind attention!
Christian Liebel
@christianliebel
[email protected]
PWA-Cheat-Sheet