The document discusses progressive web apps (PWAs) and their advantages over traditional web and native mobile apps. PWAs use new web platform features like service workers to deliver native-like experiences to users. Core components of PWAs include an app shell, service worker, and caching/storage. The document also covers how to integrate PWAs with native features and how AWS services can help develop and host PWAs.

1. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Adrian Hall
Sr. Developer Advocate, AWS Mobile
Progressive Web Apps
In the Real World

2. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
50%
34%
9%
7%
Mobile App Desktop Mobile Web Tablet App
Digital Media
Time Spent on devices
comScore Media Metrix Multi-Platform & Mobile Metrix, U.S., Total Audience, June 2017

3. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Developing Mobile Apps: Options
Native Apps Cross-Platform Native Apps
Hybrid Web Apps Hosted Web Apps

4. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Secure Installable Shareable
Discoverable Network Agnostic Always up-to-date
Why Progressive Web Apps

5. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Hosted Progressive Web Apps are good
ü Uses existing web frameworks
ü Puts an icon on the home screen
ü Available offline
ü Acts like a mobile app
𝘹 Cross-Platform support

6. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Core Components
Application Shell Service Worker Storage & Cache

7. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
App Shell
v Bundled HTML, CSS & JavaScript
v Separates UI from Data
v Downloaded Once; Immediately Cached
v Loads from Cache

8. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Native Integration - Manifest JSON
https://developer.mozilla.org/en-US/docs/Web/Manifest
v Chrome, Opera, Firefox, Samsung
v Simple JSON Document
v Control Native Appearance
v Defines Home Screen UI
v Defines Splash Screen, Theme, URL

9. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Native Integration – HTML Meta

10. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Native Integration – Device APIs
v Geolocation API
v Device Orientation
v Motion
v Fullscreen API (Android Only)
v Click to Call

11. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Service Worker
v A Programmable Network Proxy
v Cannot access the DOM
v Responds to messages
v Has Access to IndexedDB
https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API

12. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Service Worker - Life Cycle
Installing
Activated
Error
Idle
Terminated
Fetch

13. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
var cacheName = 'MyPWA-1';
var filesToCache = [
‘/’,
‘/index.html’,
‘/scripts/app.js’,
‘/styles/app.css’,
‘/images/logo.png’
];
self.addEventListener('install', function(e) {
self.skipWaiting();
e.waitUntil(
caches.open(cacheName).then(function(cache) {
return cache.addAll(filesToCache);
})
);
});
Service Worker - Event Listeners
Define caches
Listen for ‘install’ event
Skip waiting (auto reload)
Cache App Shell files

14. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
self.addEventListener('fetch', function(e) {
var dataUrl = 'https://my.apigateway.com/v1/items';
if (e.request.url.indexOf(dataUrl) > -1) {
e.respondWith(
caches.open(dataCacheName).then(function(cache) {
return fetch(e.request).then(function(response){
cache.put(e.request.url, response.clone());
return response;
});
})
);
} else {
e.respondWith(
caches.match(e.request).then(function(response) {
return response || fetch(e.request);
});
);
}
});
Service Worker - Fetch & Cache Data
• Check event request URL
• Cache and Return Response
• Return Cached Response
(App Shell UI)

15. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Storage & Cache
v Local Storage is blocking & synchronous
v IndexedDb is indexed & asynchronous
ü Transactional Database System
ü APIs are available in Service Workers
ü Can be Complex
v Local Forage:
https://github.com/localForage/localForage

16. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Toolchain & Production Scale
v Web Framework
§ React, Angular, Ember, etc.
v CLI / Build System
§ Webpack, Grunt, Gulp, Ionic, etc.
v Libraries / Utilities
§ Nativebase, LocalForge, etc.
v Cloud Services
§ Amazon Cognito, Pinpoint, DynamoDB, etc.

17. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
AWS Services for Mobile Apps
Amazon
Pinpoint
Amazon
Cognito
AWS Device
Farm
Amazon
DynamoDB
Amazon S3 AWS Lambda Amazon API
Gateway

18. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
AWS Mobile Hub makes it easy
• Manage multiple services as
a project.
• Configure common services
for best practices.
• Host your PWA easily.
• Download service
constants.

19. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Learn More
https://aws.amazon.com/mobile