The Current State of
Progressive Web App
Presented by:
Trần Trọng Thanh
Re-introduction
to Progressive Web App
PWA are Web Apps that make use of latest Web capabilities with progressive enhancement as backbone model.
They features:
- Connectivity independent
- App-like
- Fresh
- Safe
- Discoverable
- Re-engageable
- Installable
- Linkable
MINIMUM TECH SPECS
to be called Progressive Web App
- https: safe, fresh
- SPA: app-like, linkable
- manifest.json: installable, discoverable
index.html
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#00796b">{
"short_name": "Vue Shop",
"name": "Vue Shop - Mobile Shopping",
"icons": [
{
"src": "assets/logo.png",
"type": "image/png",
"sizes": "192x192"
}
],
"start_url": "index.html",
"theme_color": "#00796b",
"background_color": "#b2dfdb",
"display": "standalone",
"orientation": "portrait"
}
MINIMUM TECH SPECS
to be called Progressive Web App
- https: safe, fresh
- SPA: app-like, linkable
- manifest.json: installable, discoverable
- service worker: connectivity independent, re-engageable
Service Worker and Cache
Web capabilities we'll explore:
- Installable
- Working offline
- Push notification
- Background sync
- Web Share API
- Credential Management API
- Web Authentication API
- Payment Request API
State of PWA 2019:
Browser Support
PWAs are enabled by browsers. Let's see how's the Web capabilities supported by most popular browsers
Most popular browsers in Vietnam
Mobile - Android
-
Chrome 78 -
Samsung Internet 10.1
Mobile - iOS
-
Safari 13.2
Desktop
-
Chrome 78 -
Coc Coc 83 (Chrome 77) -
Safari 13 -
Firefox 70
Installable
Android
- Fully support manifest.json
- Native Install banner
- Multi-tasking and intents
- Share local storage and browser data
PWA vs. Web App
- Web apps will not receive install banner
- Browser emblem next to launcher icon
- No launcher icon in app drawer
iOS 13
- First SW support in Safari 11.3
- Not support all manifest.json
- No native install banner
- "Add to home screen" is hidden below the share popup
- Standalone and in-browser not sharing data
Desktop
From Chrome-based browsers, PWA can be installed like desktop apps.
Working offline
(Service worker Cache API)
- Service worker and Cache API are well supported as of today
- For Safari, caches that do not get opened after a few weeks will be removed
Push notification (Web Push API)
Safari / Webkit is the only browser doesn't support push notification yet
Service Worker Background Sync API
- Background Sync schedules data sending in the background, even when tab / app is closed.
- Only Chrome-based browsers support it for now
Web Share API
Android
- Only Chrome on Android support Web Share API
- The overlay share panel is native and provided by the OS
iOS
- iOS Safari support Web Share api since 12.2
Desktop
Only Safari on macOS support this feature.
Credential Management API
- Users can choose an account in a native account chooser
- User's credentials can be sync with different devices
- Auto sign in user even if their session has expired
Web Authentication API
- WebAuthn is an extension of Credential Management API
- The API allows servers to register and authenticate users using public key cryptography instead of a password.
- Currently, desktop browsers only support authentication with USB key
Payment Request API
Chrome & Chrome-based browser
- Support for credit card
- Support Android pay where it is available
Safari (iOS & macOS)
- Safari only support Apple Pay right now.
What's Next For
PWA?
Introducing
TWA
Trusted Web Activity
An Android app is a collection of activities (or screen)
- To display web contents inside an Android app, developer can use WebView or the new Chrome Custom Tab activity
- Chrome Custom Tab share browser data with Chrome
- TWA is your PWA inside a full-screen Chrome Custom Tab activity
- Your PWA domain must be verified by CCT via Digital Asset Links
TWA vs. Hybrid / Native Apps
- Hosted at trusted domain
- Always fresh
- Just web app with Web API
- Can be extended by native activity
- Bundled inside app's apk
- Update via app store or code push
- Has access to native OS API
- Load web content via WebView
Why TWA the App Store?
- Better discovery via the web store
- Monetize the app
- App Shortcuts and other deep integrations with the OS
- Be re-installed after restore on new phone
- Instant app with web content
- Your PWA are now available everywhere
References:
Links to some PWA seen in the slides
PWA resources and articles:
The End
Thank You
The Current State ofProgressive Web App
Presented by:
Trần Trọng Thanh
int3ractive.com -
: @trongthanh
12/2019