Upload
manfred-steyer
View
6.889
Download
8
Embed Size (px)
Citation preview
30.06.2016
1
Progressive Web Appswith Angular 2
Manfred Steyer
About me …
• Manfred Steyer
• SOFTWAREarchitekt.at
• Trainer & Consultant
• Focus: Angular
Page 2
30.06.2016
2
Contents
Overview
Offline with Service Workers
Immediate Value with AppShell
Background Sync
Push
Angular Mobile Toolkit
Overview
30.06.2016
3
Web Apps
Noinstallation
Cross-Plattform
Easy Deployment
Easy toupdate
SearchableLinks/
Bookmarks
Native Apps
Easy tolaunch
ImmetiateValue
Offline
Slow Connections
Push Notifications
Device-Access
30.06.2016
4
Progressive Web Apps provide
the best of both worlds
Progressive Enhancements: Offline, Caching, Home-Screen etc.
30.06.2016
6
[http://alistapart.com/article/understandingprogressiveenhancement]
Content
Layout
Scripting withProgressive Ext.
30.06.2016
9
Offline with Service Workers
What are Service Worker?
• Background Tasks
• Are installed by an Web App
• Can run without Web App
• Can decide to go idle or tore-activate them self
• HTTPS only
• No XHR, but fetch
30.06.2016
10
Service Worker and Offline
• Can intercept requests
• Can decide how to respond to requests
• Caching Pattern• Cache only
• Network only
• Try cache first, then network
• Try network first, then cache
• etc.
Service Worker Toolbox
//sw-with-toolbox.jsimportScripts('/node_modules/sw-toolbox/sw-toolbox.js');
toolbox.precache(CACHE_FILES);
toolbox.router.get('/(.*)', toolbox.networkOnly, {origin: 'http://www.angular.at'});
toolbox.router.default = toolbox.cacheFirst;
<script src="node_modules/sw-toolbox/companion.js" data-service-worker="sw-with-toolbox.js"></script>
Array can be generated
30.06.2016
11
Browser Support
Fallback for Safari & Co.
• AppCache
• Less features
• Not much choice for Caching Patterns
• Cache only
• Network only
30.06.2016
12
Storing data locally
Storing Data while offline
• LocalStroage
• WebDb (deprecated but here)
• IndexedDb
• Good idea: Use an abstraction, like PouchDB
• Challange: Quotas!
30.06.2016
13
Immediate Value
App Shell
• Shell is cached(Service Worker)
• Uses cached data(e. g. PouchDb)
• Can be displayedimmediately
• Updates cached viewwith online-data whenloadad
App Shell
Content
30.06.2016
14
"Install" to Home Screen
{
"name": "Flight PWA-Demo",
"short_name": "Flight-PWA",
"icons": [{
"src": "images/touch/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
}, […] ],
"start_url": "/index.html?homescreen=1",
"display": "standalone",
[…]
}
Referencing the Manifest
<!-- Web Application Manifest -->
<link rel="manifest" href="manifest.json">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Web Starter Kit">
<link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">
30.06.2016
15
Background Sync
Background Sync
• App can request Background Sync
• Service Worker triggers Sync Event when it is appropriate(Network, Battery …)
• Also plans for periodic Background Sync
30.06.2016
16
Request Background Sync in Applet nav: any = navigator;
if ('serviceWorker' in nav && 'SyncManager' in window) {
nav.serviceWorker.ready
.then(reg => {
return reg.sync.register('upload');
})
.catch(_ => {
return this.buchungService.upload();
});
} else {
this.buchungService.upload();
}
Tag
Sync Event in Service Worker
context.addEventListener('sync', function(event) {
console.debug("Service Worker: sync, tag=" + event.tag);
if (event.tag == 'upload') {
event.waitUntil(bs.upload().then(_ => console.debug('background-upload finished')));
}
});
30.06.2016
17
Push Notifications
Push Notifications
Browser
Push-Service
Web API
4. Notification
2. Passing Id
3. Notification for Browser(s)
1. Register
30.06.2016
18
Registering for Push in App
let nav:any = navigator;
if ('serviceWorker' in navigator) {
nav.serviceWorker.ready.then(function(reg) {
reg.pushManager.subscribe({
userVisibleOnly: true
}).then(function(sub) {
console.log('endpoint:', sub.endpoint);
// Send endpoint with id over to web api
});
}).catch(function(error) { […] });
}
React to Push in Service Worker
context.addEventListener('push', function(event: any) {
event.waitUntil(bs.sync().then(p => context.registration.showNotification("Delay", {
body: 'Your flight is delayed',
icon: '/images/touch/icon-128x128.png',
tag: 'my-tag'
})));
});
30.06.2016
19
Angular Mobile Toolkit
Mobile Toolkit
• Scaffolding Angular 2 PWA withAngular CLI
• Helps to get started
• Generates Web App Manifest
• Generates App Shell• Angular Universal
• Service Worker for Caching• AppCache as Fallback for Safari & Co.
30.06.2016
20
Getting Started
> npm install -g angular-cli
> ng new hello-mobile --mobile
Infos and Guids: mobile.angular.io
Summary
Best of Web and Native
Progressive Enhancements
Offline Browser DBs
Background Sync
PushAngular
Mobile Toolkit
M&M's solvenearly all
problems ;-)