disrupting the application eco system with progressive web applications
TRANSCRIPT
![Page 1: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/1.jpg)
Disrupting the Application Eco-System with Progressive
Web Applications
LOVE2DEV.COM
![Page 2: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/2.jpg)
My BioMicrosoft MVPASP Insider Edge User AgentWeb Developer 25 yearsAuthor & Speaker
@ChrisLoveLove2Dev.com
![Page 3: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/3.jpg)
Slide Decks & Source Code
Source Codehttp://
GitHub.com/docluv
Slide Deck http://slideshare.net/docluv/presentations
LOVE2DEV.COM
![Page 4: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/4.jpg)
LOVE2DEV.COM
The Web Has an Image Problem
![Page 5: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/5.jpg)
LOVE2DEV.COM
Mark Zuckerberg
2012 http://tcrn.ch/2hwN6HF
“Not only was this a big mistake with mobile, but Zuckerberg says that its biggest mistake period was the focus on HTML5.”
![Page 6: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/6.jpg)
LOVE2DEV.COM
![Page 7: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/7.jpg)
LOVE2DEV.COM
![Page 8: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/8.jpg)
LOVE2DEV.COM
![Page 9: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/9.jpg)
LOVE2DEV.COM
![Page 10: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/10.jpg)
LOVE2DEV.COM
![Page 11: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/11.jpg)
LOVE2DEV.COM
What is a Progressive Web Application?Defining the Front-End
![Page 12: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/12.jpg)
“Progressive Web Applications: A New Level of Thinking About the Quality of Your User Experience”
https://www.youtube.com/watch?v=EErueQdEXMA Chris Wilson, Google
![Page 13: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/13.jpg)
“Native Apps are a bridging technology (like Flash)”
http://bit.ly/2e5Cgry
Bruce Lawson, Opera (former)
![Page 14: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/14.jpg)
“These apps aren’t packaged & deployed through stores, they’re just websites that took the right vitamins.
They progressively become apps…”
Alex RussellGoogle
![Page 15: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/15.jpg)
Work In Customers
Context
Modern Web Apps
![Page 16: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/16.jpg)
Modern Web AppsA Single Code Base, Friendly to All Platforms
![Page 17: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/17.jpg)
Modern Web Apps
Operate FastEngage CustomersBuilt Very Different From the Past
![Page 18: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/18.jpg)
LOVE2DEV.COM
![Page 19: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/19.jpg)
PWA Features•Reliable - Load instantly and never show the downasaur, even in uncertain network conditions. •Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling. •Engaging - Feel like a natural app on the device, with an immersive user experience.
LOVE2DEV.COM
![Page 20: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/20.jpg)
PWA Features•“install” to the home screen•have their own icon (defined by the web developer)•can launch full-screen, portrait or landscape•but “live” on the Web
LOVE2DEV.COM
![Page 21: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/21.jpg)
PWA Features• live on the server so no update distribution lag•require no app store or gatekeeper•can work offline•are a normal website on browsers such as Opera Mini, Safari, Windows phones•searchable, indexable, linkable
LOVE2DEV.COM
![Page 22: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/22.jpg)
PWA Features•“Feels” like a normal app•Push Notifications (optional)•Background Sync (optional)•More Coming (soon)
LOVE2DEV.COM
![Page 23: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/23.jpg)
Why Build A PWA?•Worthy of Being on the Home screen•Work Reliably, No Matter the Network Conditions• Increased Engagement• Improved Conversions
LOVE2DEV.COM
![Page 24: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/24.jpg)
PWA Updates•AppCache -> Service Worker• localStorage -> IndexDB•Touch Icons -> Manifest•Save to Homescreen -> Install Banner
LOVE2DEV.COM
![Page 25: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/25.jpg)
LOVE2DEV.COM
PWA Requirements•HTTPS•Manifest• Service Worker
{ name: “your application”, …}
![Page 26: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/26.jpg)
Application Loading Process
The 1st Time a User Visits They ‘Install’ the Application
![Page 27: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/27.jpg)
•The Initial Request•Contains Critical Path Assets•Master Layout HTML + CSS Inline• Initial Possible Views• Initial View’s CSS• Core Application JavaScript + Initial View’s Controllers
Application Loading Process
![Page 28: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/28.jpg)
•Deferred Request(s)•Contains Additional View HTML, CSS and JavaScript
Application Loading Process
![Page 29: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/29.jpg)
LOVE2DEV.COM
PWA Application Shell
Basic CSSBasic JavaScript
Core HTML
![Page 30: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/30.jpg)
LOVE2DEV.COM
Application Shell•The app "shell" is the minimal HTML, CSS and JavaScript required to power the user interface and when cached offline can ensure instant, reliably good performance to users on repeat visits
![Page 31: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/31.jpg)
LOVE2DEV.COM
Application Shell•The Approach For Single Page Applications•Aggressively Cache Content via Service Worker•Get Initial HTML on the Screen without a Network•Content Rendered via Using JavaScript
![Page 32: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/32.jpg)
LOVE2DEV.COM
Benefits•Reliable performance that is consistently fast•Native-like interactions•Economical use of data
![Page 33: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/33.jpg)
LOVE2DEV.COM
Manifest File• Creating a manifest and linking it to your page are straightforward processes.• Control what the user sees when launching from the home screen.• This includes things like a splash screen, theme colors, and even the URL that's opened.
![Page 34: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/34.jpg)
LOVE2DEV.COM
Manifest File<head>…
<link rel="manifest" href="/manifest.json">
</head>
![Page 35: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/35.jpg)
LOVE2DEV.COM
Manifest File{ "name": "Fast Furniture", "short_name": "Fast Furniture", "icons": [ { "src": "Fast-Furniture-64x64.gif", "sizes": "64x64", "type": "image/gif" }, ... ], "start_url": "/", "display": "standalone", "background_color": "#F99D36", "theme_color": "#55B4F6"}
![Page 36: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/36.jpg)
LOVE2DEV.COM
Include•A short_name for use as the text on the users home screen.•A name for use in the Web App Install banner.
![Page 37: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/37.jpg)
LOVE2DEV.COM
start_url•Allows you to control what page is loaded when application is launched•Without start_url the current page (route) is assumed to be the start page
![Page 38: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/38.jpg)
LOVE2DEV.COM
display•Control display type and page orientation• standalone | browser• portrait | landscape
![Page 39: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/39.jpg)
LOVE2DEV.COM
Manage Manifest in F12
![Page 40: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/40.jpg)
LOVE2DEV.COM
Manifest File Tools• Manifest Generator http://brucelawson.github.io/manifest/•Manifest validator manifest-validator.appspot.com
![Page 41: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/41.jpg)
LOVE2DEV.COM
Manifest File Tools• Manifestation Node Module•https://github.com/patrickkettner/manifestation
![Page 42: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/42.jpg)
LOVE2DEV.COM
HTTPS•Because PWAs Require a Service Worker They Must Be Secure•HTTPS Protects Against Man in the Middle Atacks
![Page 43: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/43.jpg)
LOVE2DEV.COM
HTTPS•Certificates Are Cheap Today•LetsEncrypt.org• Free, but very technical process
•AWS Certificate Manager (free!!!)
![Page 44: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/44.jpg)
LOVE2DEV.COM
Service Workers•Allow Offline Capabilities•Native Resource Caching•Allow Push Notifications•Data Synch*
* Near Future
![Page 45: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/45.jpg)
LOVE2DEV.COM
FetchThe New AJAX
![Page 46: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/46.jpg)
LOVE2DEV.COM
Fetch• Replaces XMLHttpRequest•Uses Promises• Polyfil Available for Legacy Browsers• Full Support for Modern Browsers• IE 11 & Old Android Need Polyfil
•Headers, Request, Response Objects
![Page 47: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/47.jpg)
LOVE2DEV.COM
The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network.
![Page 48: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/48.jpg)
LOVE2DEV.COM
if (typeof fetch === "undefined" || fetch.toString().indexOf("[native code]")
=== -1) {
scripts.unshift("js/libs/fetch.js");
}
![Page 49: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/49.jpg)
LOVE2DEV.COM
var myImage = document.querySelector('img');
fetch('flowers.jpg').then(function(response) { return response.blob();}).then(function(myBlob) { var objectURL = URL.createObjectURL(myBlob); myImage.src = objectURL;});
![Page 50: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/50.jpg)
LOVE2DEV.COM
Supply Request Options• method• headers• body• mode• credentials• cache• redirect• referrer• referrerPolicy• integrity
![Page 51: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/51.jpg)
LOVE2DEV.COM
var myHeaders = new Headers();
var myInit = { method: 'GET', headers: myHeaders, mode: 'cors', cache: 'default' };
fetch('flowers.jpg',myInit).then(function(response) { return response.blob();}).then(function(myBlob) { var objectURL = URL.createObjectURL(myBlob); myImage.src = objectURL;});
![Page 52: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/52.jpg)
LOVE2DEV.COM
Verify Succesful Response•Will Reject With a TypeError For Network Error• 404 is Not an Error• Check Response.OK
![Page 53: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/53.jpg)
LOVE2DEV.COM
fetch('flowers.jpg').then(function(response) { if(response.ok) { response.blob().then(function(myBlob) { var objectURL = URL.createObjectURL(myBlob); myImage.src = objectURL; }); } else { console.log('Network response was not ok.'); }}).catch(function(error) { console.log('There has been a problem with your fetch operation: ' + error.message);});
![Page 54: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/54.jpg)
LOVE2DEV.COM
Create Custom Request Object
![Page 55: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/55.jpg)
LOVE2DEV.COM
var myHeaders = new Headers();
var myInit = { method: 'GET', headers: myHeaders, mode: 'cors', cache: 'default' };
var myRequest = new Request('flowers.jpg', myInit);
fetch(myRequest).then(function(response) { return response.blob();}).then(function(myBlob) { var objectURL = URL.createObjectURL(myBlob); myImage.src = objectURL;});
![Page 56: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/56.jpg)
LOVE2DEV.COM
Body Object• ArrayBuffer• ArrayBufferView (Uint8Array and friends)• Blob/File• string•URLSearchParams• FormData
![Page 57: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/57.jpg)
LOVE2DEV.COM
Body Object Extraction Methods• arrayBuffer()• blob()• json()• text()• formData()
![Page 58: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/58.jpg)
LOVE2DEV.COM
var form = new FormData(document.getElementById('login-form'));fetch("/login", { method: "POST", body: form});
![Page 59: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/59.jpg)
LOVE2DEV.COM
RespondWith()• Resolves• Respond• Network Error
![Page 60: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/60.jpg)
LOVE2DEV.COM
self.addEventListener('fetch', function(event) { console.log('Handling fetch event for', event.request.url);
event.respondWith( caches.match(event.request).then(function(response) { if (response) { console.log('Found response in cache:', response);
return response; } console.log('No response found in cache. About to fetch from network...');
return fetch(event.request).then(function(response) { console.log('Response from network is:', response);
return response; }).catch(function(error) { console.error('Fetching failed:', error);
throw error; }); }) );});
![Page 61: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/61.jpg)
LOVE2DEV.COM
Service WorkersMore Than an AppCache Replacement
![Page 62: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/62.jpg)
LOVE2DEV.COM
Service Workers• allows developers to cache assets when connected, and intercept failed calls to network when offline, so user experience can be maintained
![Page 63: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/63.jpg)
LOVE2DEV.COM
Service Workers• Faster loading of assets, even when online• Fastest HTTP Request is the One Never Made
![Page 64: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/64.jpg)
LOVE2DEV.COM
Service Workers•Push Notifications
Even When Browser Is Closed
![Page 65: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/65.jpg)
LOVE2DEV.COM
if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js')
.then(function(registration) { // Registration was successful })
.catch(function(err) { // registration failed :( }); }
![Page 66: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/66.jpg)
LOVE2DEV.COM
self.addEventListener('install', function (e) {
//do something
});
![Page 67: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/67.jpg)
LOVE2DEV.COM
self.addEventListener('activate', function (event) { console.log('Service Worker activating.');});
![Page 68: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/68.jpg)
LOVE2DEV.COM
Web Server
Web Page
![Page 69: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/69.jpg)
LOVE2DEV.COM
Web ServerWeb
Page
Service Worker
![Page 70: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/70.jpg)
LOVE2DEV.COM
Web ServerWeb
Page
Service Worker
![Page 71: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/71.jpg)
LOVE2DEV.COM
Web ServerWeb
Page
Service Worker
Cache
![Page 72: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/72.jpg)
LOVE2DEV.COM
Service Worker Cache• Persist Files with Response Headers• Limited by Device Resources• Available Online & Offline
![Page 73: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/73.jpg)
LOVE2DEV.COM
self.addEventListener('install', function (e) {
e.waitUntil( caches.open(cacheName).then(function (cache) {
return cache.addAll(filesToCache).catch(function (error) { console.log(error);
}); }) );});
![Page 74: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/74.jpg)
LOVE2DEV.COM
self.addEventListener('fetch', function (event) {
//intercept fetch request (any request from the UI thread for a file or API) and return from cache or get from server & cache it event.respondWith(
caches.match(event.request).then(function (resp) {
return resp || fetchAsset(event);
})
);
});
![Page 75: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/75.jpg)
LOVE2DEV.COM
Service Worker Cache• Persist Files with Response Headers• Limited by Device Resources• Available Online & Offline
![Page 76: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/76.jpg)
LOVE2DEV.COM
Web ServerWeb
Page
Service Worker
CacheIndexDB
![Page 77: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/77.jpg)
LOVE2DEV.COM
5 Bars!
![Page 78: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/78.jpg)
LOVE2DEV.COM
No Bars
![Page 79: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/79.jpg)
LOVE2DEV.COM
1 Bar
![Page 80: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/80.jpg)
LOVE2DEV.COM
Lie-Fi :/
![Page 81: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/81.jpg)
LOVE2DEV.COM
Handling Offline
![Page 82: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/82.jpg)
LOVE2DEV.COM
Web Page
Service Worker
![Page 83: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/83.jpg)
LOVE2DEV.COM
Web Page
Service Worker
Cache
![Page 84: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/84.jpg)
LOVE2DEV.COM
Offline API if (!navigator.onLine) {
console.log("you are offline");}
window.addEventListener('online', function () {console.log("you have gone offline");
});
window.addEventListener('offline', function () {console.log("you are back online");
});
![Page 85: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/85.jpg)
LOVE2DEV.COM
Debugging Service Workers•Use Developer Tools• Sources• Application
• Manifest• Service Workers
![Page 86: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/86.jpg)
LOVE2DEV.COM
Web Server
Web Page
Service Worker
Cache
2
1
![Page 87: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/87.jpg)
LOVE2DEV.COM
Web Server
Web Page
Service Worker
Cache
2
![Page 88: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/88.jpg)
LOVE2DEV.COM
self.addEventListener('install', function (e) {
e.waitUntil(…
}) );
self.skipWaiting();
});
![Page 89: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/89.jpg)
LOVE2DEV.COM
Service Worker Tools• sw_precache• A node module to generate service worker code that will
precache specific resources so they work offline.• https://github.com/googlechrome/sw-precache
• sw_toolbox• A collection of service worker tools for offlining runtime
requests • https://github.com/GoogleChrome/sw-toolbox
![Page 90: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/90.jpg)
LOVE2DEV.COM
Service Worker Resources• Is Service Worker Ready?• https://jakearchibald.github.io/isserviceworkerready/
• Service Worker Cookbook• https://serviceworke.rs/
![Page 91: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/91.jpg)
LOVE2DEV.COM
Immersion
![Page 92: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/92.jpg)
LOVE2DEV.COM
Add Application to Home Screen•Has a web app manifest file with:• a short_name (used on the home screen)• a name (used in the banner)
• a 144x144 png icon• a start_url that loads•Has a service worker registered on your site.• Is served over HTTPS (.• Is visited at least twice, with at least five minutes between visits.
![Page 93: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/93.jpg)
LOVE2DEV.COM
![Page 94: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/94.jpg)
LOVE2DEV.COM
![Page 95: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/95.jpg)
LOVE2DEV.COM
Push Notifications• Require Service Worker so they operate in the background•Work even when the browser is closed
![Page 96: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/96.jpg)
LOVE2DEV.COM
• 72% increase in time spent for users visiting via a push notification• 26% increase in average spend per visit by members arriving via a push notification•+50% repeat visits within 3 month
![Page 97: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/97.jpg)
LOVE2DEV.COM
Two Technologies•push is invoked when a server supplies information to a service worker; • a notification is the action of a showing information to a user
![Page 98: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/98.jpg)
LOVE2DEV.COM
serviceWorkerRegistration.showNotification(title, options);
![Page 99: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/99.jpg)
LOVE2DEV.COM
{ "body": "Did you make a $1,000,000 purchase at Dr. Evil...", "icon": "images/ccard.png", "vibrate": [200, 100, 200, 100, 200, 100, 400], "tag": "request", "actions": [ { "action": "yes", "title": "Yes", "icon": "images/yes.png" }, { "action": "no", "title": "No", "icon": "images/no.png" } ]}
![Page 100: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/100.jpg)
LOVE2DEV.COM
Request User Permissionfunction initialiseState() { if (Notification.permission !== 'granted') { console.log('The user has not granted the notification permission.'); return; } else if (Notification.permission === “blocked”) { /* the user has previously denied push. Can't reprompt. */ } else { /* show a prompt to the user */ }
![Page 101: Disrupting the application eco system with progressive web applications](https://reader037.vdocuments.site/reader037/viewer/2022103010/586fd3be1a28ab18428b45df/html5/thumbnails/101.jpg)
LOVE2DEV.COM
Request User Permission // Use serviceWorker.ready so this is only invoked // when the service worker is available. navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) { serviceWorkerRegistration.pushManager.getSubscription() .then(function(subscription) { if (!subscription) { // Set appropriate app states. return; } }) .catch(function(err) { console.log('Error during getSubscription()', err); }); });}