Slide 1
Slide 1 text
Christian Liebel
@christianliebel
Consultant
Progressive Web Apps
for .NET Developers
An Overview
Slide 2
Slide 2 text
Hello, it’s me.
Progressive Web Apps for .NET Developers
An Overview
Christian Liebel
Follow me:
@christianliebel
Blog:
christianliebel.com
Email:
christian.liebel
@thinktecture.com
Cross-Platform &
Serverless
Slide 3
Slide 3 text
Progressive Web Apps for .NET Developers
An Overview
- 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 4
Slide 4 text
Cross-Platform UI Frameworks & .NET Core
An Overview
Progressive Web Apps for .NET Developers
?
Xamarin
UWP
WinForms
WPF
Slide 5
Slide 5 text
PWA!
Cross-Platform UI Frameworks & .NET Core
An Overview
Progressive Web Apps for .NET Developers
Slide 6
Slide 6 text
Google’s Idea
• No app stores anymore!
• Web App = App App
• Feature parity: Push notifications,
offline availability and more for web
& native applications
• Backwards compatibility: PWAs can
also be run on non-PWA browsers,
but with reduced feature set
Progressive Web Apps
An Overview
Progressive Web Apps for .NET Developers
Slide 7
Slide 7 text
An Overview
Progressive Web Apps for .NET Developers
Blazor
Slide 8
Slide 8 text
Progressive Web Apps
HTML5, JavaScript, CSS3
Service Worker API
Fetch API
Web
Notifications
Web Workers Push API
Web App
Manifest
HTTPS
PWA Technology Overview
An Overview
Progressive Web Apps for .NET Developers
Slide 9
Slide 9 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
WebVR
WebRTC
WebGL
Speech Synthesis
Web Cryptography API
IndexedDB
Geolocation
Canvas
Media Capture and Streams
An Overview
Progressive Web Apps for .NET Developers
Slide 10
Slide 10 text
Platform Support
PWA Status Quo
An Overview
Progressive Web Apps for .NET Developers
17
11.1
44
40 4.1
Chrome 40
11.3
Slide 11
Slide 11 text
Platform Support
Microsoft Edge uses Chromium (Blink + V8) in the future
Edge comes to macOS
Improved support for modern web APIs (~ as many as Chrome)
Progressive Web Apps for .NET Developers
An Overview
PWA Status Quo
Slide 12
Slide 12 text
Progressive Web Apps are
not a technology,
but a collection of features
an application must/should support.
“Uber Pattern”
An Overview
Progressive Web Apps for .NET Developers
Slide 13
Slide 13 text
An Overview
Progressive Web Apps for .NET Developers
Responsive Linkable Discoverable Installable App-like
Connectivity
Independent
Fresh Safe Re-engageable Progressive
Slide 14
Slide 14 text
https://pwa.liebel.io
Progressive Web Apps for .NET Developers
An Overview
Slide 15
Slide 15 text
Progressive Web Apps for .NET Developers
An Overview
Responsive
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)
Hash Anchor (e.g. SPA)
https://myapp.com/#/profile/peter.mueller
HTML5 History (SPA)/Server Rendered
https://myapp.com/profile/peter.mueller
Linkable
An Overview
Progressive Web Apps for .NET Developers
Slide 17
Slide 17 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
An Overview
Progressive Web Apps for .NET Developers
Slide 18
Slide 18 text
manifest.json
{
"short_name": "PWA Demo",
"name": "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
An Overview
Progressive Web Apps for .NET Developers
Slide 19
Slide 19 text
Display Modes
Progressive Web Apps for .NET Developers
An Overview
Web App Manifest
browser minimal-ui standalone fullscreen
Slide 20
Slide 20 text
Icon Purposes
Progressive Web Apps for .NET Developers
An Overview
Web App Manifest
(any)
any context (e.g. app icon)
badge
different space constraints/
color requirements
maskable
user agent masks icon as required
Safe Zone
Windows iOS Android
Slide 21
Slide 21 text
Self publishing
Developer publishes the App in the
Microsoft Store under his own name
Auto indexing (beta)
High-quality PWAs are
automatically discovered,
reviewed and published in
the store by Bing
PWAs & Microsoft Store
An Overview
Progressive Web Apps for .NET Developers
Slide 22
Slide 22 text
Benefits
PWAs & Microsoft Store
An Overview
Progressive Web Apps for .NET Developers
• Analytics (usage duration, installs/uninstalls, crashes etc.)
• No storage quotas
• Access to UWP APIs
• Monetization
• Ratings
• Featured apps
Slide 23
Slide 23 text
Progressive Web Apps for .NET Developers
An Overview
PWAs & Microsoft Store
Slide 24
Slide 24 text
Web App Manifest
PWA: Web app and installed app are
one and the same, so the web app can
be directly added to the home screen
instead
The appearance of the home screen/
programs list icon is defined by the
Web App Manifest
Installable
An Overview
Progressive Web Apps for .NET Developers
Slide 25
Slide 25 text
An Overview
Progressive Web Apps for .NET Developers
Slide 26
Slide 26 text
manifest.json
{
"short_name": "PWA Demo",
"name": "PWA Demo",
"icons": [
{
"src": "assets/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
}
],
"start_url": "/index.html",
"display": "standalone"
}
Installable
An Overview
Progressive Web Apps for .NET Developers
Slide 27
Slide 27 text
Web Apps that feel natively
Native functionality with HTML5 technologies
• Playing audio and video
• Hardware accelerated 2D/3D graphics
• Gamepad
• Touch input
• Location-based services
• Access to camera
• …
Progressive Web Apps for .NET Developers
An Overview
App-like
Slide 28
Slide 28 text
Web Apps that feel natively
Progressive Web Apps for .NET Developers
An Overview
App-like
Slide 29
Slide 29 text
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)
Progressive Web Apps for .NET Developers
An Overview
Connectivity Independent
Slide 30
Slide 30 text
Service Worker as a controller/proxy/interceptor
Progressive Web Apps for .NET Developers
An Overview
Connectivity Independent
Service
Worker
Internet
Website
HTML/JS
Cache
fetch
Slide 31
Slide 31 text
1. Cache only
2. Network only
3. Cache falling back to network
4. Cache & network race
5. Network falling back to cache
6. Cache then network
7. Generic fallback
8. ServiceWorker-side templating
Progressive Web Apps for .NET Developers
An Overview
Caching Strategies
Slide 32
Slide 32 text
IndexedDB
Indexed Database (IndexedDB) is a database in the browser capable of
storing structured data in tables with keys and value
Data is stored permanently (survives browser restarts)
Service Worker and website share access to the same IndexedDB
database (e.g. for synchronization purposes)
IndexedDB can help when storing client data, whereas Service Worker
helps caching server data
Progressive Web Apps for .NET Developers
An Overview
Connectivity Independent
Slide 33
Slide 33 text
IndexedDB
Progressive Web Apps for .NET Developers
An Overview
Connectivity Independent
Slide 34
Slide 34 text
SwUpdate
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 for .NET Developers
An Overview
Fresh
Slide 35
Slide 35 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
An Overview
Progressive Web Apps for .NET Developers
Slide 36
Slide 36 text
HTTP sites are “Not Secure” in Chrome 68+
Progressive Web Apps for .NET Developers
An Overview
Safe
Slide 37
Slide 37 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
An Overview
Progressive Web Apps for .NET Developers
Slide 38
Slide 38 text
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
Progressive Web Apps for .NET Developers
An Overview
Re-Engageable
Slide 39
Slide 39 text
Sending Push Notifications
Progressive Web Apps for .NET Developers
An Overview
Re-Engageable
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
Slide 40
Slide 40 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 for .NET Developers
An Overview
Progressive
Slide 41
Slide 41 text
Progressive Web Apps for .NET Developers
An Overview
Web Capabilities/Project Fugu
Shape
Detection API
Wake Lock
API
Badging
API
Writable Files
API
9
Slide 42
Slide 42 text
Motivation
- Communicate updates
without distracting the
user (in constrast to push
notifications)
- Typically displays a badge
on the home screen, task
bar or dock
- Appearance varies from
platform to platform
Progressive Web Apps for .NET Developers
An Overview
Badging API
Slide 43
Slide 43 text
https://appsco.pe/
Reference Apps
An Overview
Progressive Web Apps for .NET Developers
Slide 44
Slide 44 text
twitter.com
Reference Apps
An Overview
Progressive Web Apps for .NET Developers
Slide 45
Slide 45 text
Spotify Web Player
Reference Apps
An Overview
Progressive Web Apps for .NET Developers
Slide 46
Slide 46 text
Thank you
for your kind attention!
Christian Liebel
@christianliebel
[email protected]