you don’t need a mobile app! responsive web apps using aws
TRANSCRIPT
© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Adrian HallSr. Developer Advocate, AWS Mobile
Progressive Web Apps In the Real World
© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
50%
34%
9% 7%
Mobile App Desktop Mobile Web Tablet App
Digital MediaTime Spent on devices
comScore Media Metrix Multi-Platform & Mobile Metrix, U.S., Total Audience, June 2017
© 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
© 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
© 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
© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Core Components
Application Shell Service Worker Storage & Cache
© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
App Shel l
v Bundled HTML, CSS & JavaScript
v Separates UI from Data
v Downloaded Once; Immediately Cached
v Loads from Cache
© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Nat ive Integrat ion - 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
© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Native Integration – HTML Meta
© 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
© 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 IndexedDBhttps://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Serv ice Worker - Life Cycle
Installing
Activated
Error
Idle
Terminated
Fetch
© 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
© 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)
© 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
© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Toolchain & Production Scalev 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.
© 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
© 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.