Talk from Angular Camp 2016 in Barcelona

1. 30.06.2016
1
Progressive Web Apps
with Angular 2
Manfred Steyer
About me …
• Manfred Steyer
• SOFTWAREarchitekt.at
• Trainer & Consultant
• Focus: Angular
Page  2

2. 30.06.2016
2
Contents
Overview
Offline with Service Workers
Immediate Value with AppShell
Background Sync
Push
Angular Mobile Toolkit
Overview

3. 30.06.2016
3
Web Apps
No
installation
Cross-
Plattform
Easy
Deployment
Easy to
update
Searchable
Links/
Bookmarks
Native Apps
Easy to
launch
Immetiate
Value
Offline
Slow
Connections
Push
Notifications
Device-
Access

4. 30.06.2016
4
Progressive Web Apps provide
the best of both worlds
Progressive Enhancements:
Offline, Caching, Home-Screen etc.

5. 30.06.2016
5
App must also be useful without
Browser-support for those
enhancements!
vs.

6. 30.06.2016
6
[http://alistapart.com/article/understandingprogressiveenhancement]
Content
Layout
Scripting with
Progressive Ext.

7. 30.06.2016
7
How to implement
progressive enhancements?
Case Study

8. 30.06.2016
8
Features
Offline
Background
Sync
Push
Home-
Screen
Immediate
Value
DEMO

9. 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 to
re-activate them self
• HTTPS only
• No XHR, but fetch

10. 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.js
importScripts('/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

11. 30.06.2016
11
Browser Support
Fallback for Safari & Co.
• AppCache
• Less features
• Not much choice for Caching Patterns
• Cache only
• Network only

12. 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!

13. 30.06.2016
13
Immediate Value
App Shell
• Shell is cached
(Service Worker)
• Uses cached data
(e. g. PouchDb)
• Can be displayed
immediately
• Updates cached view
with online-data when
loadad
App Shell
Content

14. 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">

15. 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

16. 30.06.2016
16
Request Background Sync in App
let 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')));
}
});

17. 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

18. 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'
})));
});

19. 30.06.2016
19
Angular Mobile Toolkit
Mobile Toolkit
• Scaffolding Angular 2 PWA with
Angular CLI
• Helps to get started
• Generates Web App Manifest
• Generates App Shell
• Angular Universal
• Service Worker for Caching
• AppCache as Fallback for Safari & Co.

20. 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
Push
Angular
Mobile Toolkit
M&M's solve
nearly all
problems ;-)

21. 30.06.2016
21
Contact
manfred.steyer@SOFTWAREarchitekt.at
SOFTWAREarchitekt.at
ManfredSteyer