Slide 1
Slide 1 text
Progressive Web Apps
Cross-Plattform-Apps über iOS und
macOS hinaus
Christian Liebel
@christianliebel
Consultant
Slide 2
Slide 2 text
Hello, it’s me.
Christian Liebel
Follow me:
@christianliebel
Email:
christian.liebel
@thinktecture.com
Cross-Platform Development &
Serverless Cloud Architectures
Cross-Plattform-Apps über iOS und macOS hinaus
Progressive Web Apps
Slide 3
Slide 3 text
Progressive Web Apps
Cross-Plattform-Apps über iOS und macOS hinaus
- 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
Application Models
Mac Catalyst
Progressive Web Apps
Progressive Web Apps
Cross-Plattform-Apps über iOS und macOS hinaus
Cross-Platform
☑ ☑
☑ ☑ ☑
Slide 5
Slide 5 text
Apps in 2007…
https://www.youtube.com/watch?v=vN4U5FqrOdQ
Cross-Plattform-Apps über iOS und macOS hinaus
Progressive Web Apps
Slide 6
Slide 6 text
And guess what? There’s no SDK that you
need! You’ve got everything you need if you
know how to write apps using the most
modern web standards to write amazing
apps for the iPhone today.
— Steve Jobs
Cross-Plattform-Apps über iOS und macOS hinaus
Progressive Web Apps
Slide 7
Slide 7 text
Cross-Plattform-Apps über iOS und macOS hinaus
Progressive Web Apps
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
Cross-Plattform-Apps über iOS und macOS hinaus
Progressive Web Apps
Slide 9
Slide 9 text
Platform Support
PWA Status Quo
Cross-Plattform-Apps über iOS und macOS hinaus
Progressive Web Apps
17
11.1
44
40 4.1
Chrome 40
11.3
Slide 10
Slide 10 text
Progressive Web Apps
Cross-Plattform-Apps über iOS und macOS hinaus
Cross-Platform UI
pwapraxis.liebel.io
Slide 11
Slide 11 text
Cross-Plattform-Apps über iOS und macOS hinaus
Progressive Web Apps
Responsive Linkable Discoverable Installable App-like
Connectivity
Independent
Fresh Safe Re-engageable Progressive
Slide 12
Slide 12 text
Responsive
Progressive Web Apps
Cross-Plattform-Apps über iOS und macOS hinaus
PWA Features
Slide 13
Slide 13 text
Frameworks
• Angular Material
• ngx-admin
• Bootstrap
• Foundation
• Framework7
• Custom-tailored solution
Progressive Web Apps
Cross-Plattform-Apps über iOS und macOS hinaus
Responsive
Slide 14
Slide 14 text
Linkable
Progressive Web Apps
Cross-Plattform-Apps über iOS und macOS hinaus
PWA Features
Slide 15
Slide 15 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)
• https://facebook.com takes you to Facebook
• https://facebook.com/profile takes you to your profile
Approximation in (mobile) operating systems: URI schemes (e.g.
fb://profile)
Linkable
Cross-Plattform-Apps über iOS und macOS hinaus
Progressive Web Apps
Slide 16
Slide 16 text
Discoverable
Progressive Web Apps
Cross-Plattform-Apps über iOS und macOS hinaus
PWA Features
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
Cross-Plattform-Apps über iOS und macOS hinaus
Progressive Web Apps
Slide 18
Slide 18 text
manifest.webmanifest
{
"short_name": "PWA-Demo",
"name": "Meine PWA-Demo",
"icons": [
{
"src": "assets/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
}
],
"start_url": "/index.html",
"display": "standalone"
}
Web App Manifest
Cross-Plattform-Apps über iOS und macOS hinaus
Progressive Web Apps
Slide 19
Slide 19 text
Apple-Proprietary Styling
Status Bar Style
Home Screen Icon
Launch Screen
Progressive Web Apps
Cross-Plattform-Apps über iOS und macOS hinaus
Web App Manifest
Slide 20
Slide 20 text
Progressive Web Apps
Cross-Plattform-Apps über iOS und macOS hinaus
Title provided by
Web App Manifest
Icon provided by
apple-touch-icon
Slide 21
Slide 21 text
https://webkit.org/status/#specification-web-app-manifest
Progressive Web Apps
Cross-Plattform-Apps über iOS und macOS hinaus
Slide 22
Slide 22 text
Installable
Progressive Web Apps
Cross-Plattform-Apps über iOS und macOS hinaus
PWA Features
Slide 23
Slide 23 text
Progressive Web Apps
Cross-Plattform-Apps über iOS und macOS hinaus
Slide 24
Slide 24 text
Progressive Web Apps
Cross-Plattform-Apps über iOS und macOS hinaus
Installable
Slide 25
Slide 25 text
App-Like
Progressive Web Apps
Cross-Plattform-Apps über iOS und macOS hinaus
PWA Features
Slide 26
Slide 26 text
Native Functionality
App-like
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
Cross-Plattform-Apps über iOS und macOS hinaus
Progressive Web Apps
Slide 27
Slide 27 text
Native Look & Feel
Progressive Web Apps
Cross-Plattform-Apps über iOS und macOS hinaus
App-like
Slide 28
Slide 28 text
Connectivity
Independent
Progressive Web Apps
Cross-Plattform-Apps über iOS und macOS hinaus
PWA Features
Slide 29
Slide 29 text
App Assets
Service Worker
Structured Data
IndexedDB
Progressive Web Apps
Cross-Plattform-Apps über iOS und macOS hinaus
Connectivity Independent
Slide 30
Slide 30 text
Service Worker
Worker snippet is executed in an own thread
Worker can’t manipulate the parent document’s DOM
Communication via thin API (postMessage)
Acts as a controller/proxy/interceptor
Performs background tasks
Has to be installed before usage
Relation: Scope (origin + path)
Lifetime: Unrelated to tab/window
Progressive Web Apps
Cross-Plattform-Apps über iOS und macOS hinaus
Connectivity Independent
Slide 31
Slide 31 text
Progressive Web Apps
Cross-Plattform-Apps über iOS und macOS hinaus
Service Worker as a controller/proxy/interceptor
Service
Worker
Internet
Website
HTML/JS
Cache
fetch
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)
Progressive Web Apps
Cross-Plattform-Apps über iOS und macOS hinaus
Connectivity Independent
Slide 33
Slide 33 text
IndexedDB
Progressive Web Apps
Cross-Plattform-Apps über iOS und macOS hinaus
Connectivity Independent
Slide 34
Slide 34 text
IndexedDB Browser Support
Progressive Web Apps
Cross-Plattform-Apps über iOS und macOS hinaus
Connectivity Independent
10
7.1
4
11
Slide 35
Slide 35 text
Fresh
Progressive Web Apps
Cross-Plattform-Apps über iOS und macOS hinaus
PWA Features
Slide 36
Slide 36 text
Update Process
Progressive Web Apps
Cross-Plattform-Apps über iOS und macOS hinaus
Fresh
V1 V2 V2
V1 V1 V2
Server
Browser
Slide 37
Slide 37 text
Update Notification
Prompt users to reload the website in case there’s an update available.
Progressive Web Apps
Cross-Plattform-Apps über iOS und macOS hinaus
Fresh
Slide 38
Slide 38 text
Safe
Progressive Web Apps
Cross-Plattform-Apps über iOS und macOS hinaus
PWA Features
Slide 39
Slide 39 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
Cross-Plattform-Apps über iOS und macOS hinaus
Progressive Web Apps
Slide 40
Slide 40 text
PWAs Require HTTPS!
Recurring Costs Free
Manual Renewal Required
Comodo
GeoTrust
Verisign
DigiCert
…
?
Automatic Renewal ?
Third-Party
(Azure, GitHub, CloudFlare)
Progressive Web Apps
Cross-Plattform-Apps über iOS und macOS hinaus
Safe
Slide 41
Slide 41 text
Re-engageable
Progressive Web Apps
Cross-Plattform-Apps über iOS und macOS hinaus
PWA Features
Slide 42
Slide 42 text
Get the user back with notifications
Progressive Web Apps
Cross-Plattform-Apps über iOS und macOS hinaus
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 43
Slide 43 text
Push API
Progressive Web Apps
Cross-Plattform-Apps über iOS und macOS hinaus
Re-Engageable
17
—
44
44
Slide 44
Slide 44 text
Limitations
Not supported by Apple Safari on desktop and mobile
- Safari Push Notfications: an alternative for the desktop platform
- No information on whether or when push will be supported
BUT: You can make a difference!
Let the WebKit team know what you want to build with Push API:
https://liebel.io/pushbug
Progressive Web Apps
Cross-Plattform-Apps über iOS und macOS hinaus
Re-Engageable
Slide 45
Slide 45 text
Send an SMS
❌ Neither shows app name nor icon
❌ Tapping the notification opens Messages
Advanced Progressive Web Apps
Push Notifications Under Control
“Polyfills” on iOS
https://support.apple.com/en-us/HT201925
Slide 46
Slide 46 text
Wallet Push Notification
Can show app name and icon
Requires registering a pass first
Tapping the notification opens the pass
Advanced Progressive Web Apps
Push Notifications Under Control
“Polyfills” on iOS
https://support.apple.com/en-us/HT204003
Slide 47
Slide 47 text
Native wrapper (Cordova)
Shows app name and icon
Tapping the notification opens the app
Requires App Store distribution (!= PWA)
Advanced Progressive Web Apps
Push Notifications Under Control
“Polyfills” on iOS
Slide 48
Slide 48 text
Progressive
Progressive Web Apps
Cross-Plattform-Apps über iOS und macOS hinaus
PWA Features
Slide 49
Slide 49 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
Cross-Plattform-Apps über iOS und macOS hinaus
Progressive
Slide 50
Slide 50 text
Project Fugu
Progressive Web Apps
Cross-Plattform-Apps über iOS und macOS hinaus
Progressive
Contacts
Picker
Wake Lock
API
Native File
System API
Shape
Detection API
Slide 51
Slide 51 text
Web API Concept (e.g. Web Share API)
Progressive Web Apps
Cross-Plattform-Apps über iOS und macOS hinaus
Progressive
navigator.share({ url: 'http://example.com' });
ShareIntent DataTransferManager
…
NSSharingServicePicker
Slide 52
Slide 52 text
Payment Request API
Monetize your app with Payment
Request API
On Safari, Payment Request API is
supported in combination with
Apple Pay only
Great for In-App Purchases, online
shops, …
Progressive
Cross-Plattform-Apps über iOS und macOS hinaus
Progressive Web Apps
Slide 53
Slide 53 text
Payment Request API
Progressive
Cross-Plattform-Apps über iOS und macOS hinaus
Progressive Web Apps
15
11.1
64
61
Slide 54
Slide 54 text
PWA is a true cross-platform application model that covers all relevant
platforms, including but not limited to iOS, iPadOS and macOS
Connectivity independence, installability and monetization are
supported by the iOS/iPadOS platform
Push messages and background data synchronization are currently not
supported
The web platform currently moves more quickly than Apple keeps up
(“Safari is The New Internet Explorer”?)
Progressive Web Apps
Cross-Plattform-Apps über iOS und macOS hinaus
Summary
Slide 55
Slide 55 text
Thank you
for your kind attention!
Christian Liebel
@christianliebel
[email protected]