Progressive What Apps?

1. Progressive Web Apps @PatrickKettner

2. Progressive What Apps? @PatrickKettner

13. calm a baby

18. 2G Ruined My Day45M Ruined My Day

21. When you don’t have a better idea, buy a novelty domain

22. https://HushLittleBa.by Baby soothing goodness in <6k

23. ServiceWorker

24. let CURRENT_CACHE = { prefetch: 'prefetch-cache-v1' }; self.addEventListener('install', event => { let prefetch = ['/T0t411y-R4D-Sans'] event.waitUntil(caches.open(CURRENT_CACHE['prefetch']) .then(cache => cache.addAll(prefetch.map((url) => new Request(url, { 'mode': 'no-cors' }) )) ) ) })

30. self.addEventListener('fetch', event => { event.respondWith(caches.match(event.request) .then((response) => { if (response) { return response; } return fetch(event.request) .then(response => response); })); });

36. :(

37. AppCache

38. @JaffaTheCake

39. ServiceWorker > AppCache

41. ...but it covers our use case

43. if('serviceWorker' in navigator) { navigator.serviceWorker.register('/serviceworker.js') } else if ('applicationCache' in window) { // add AppCache }

44. <html lang="en" manifest="/offline.appcache"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> ...

45. <html lang="en" manifest="/offline.appcache"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> ...

46. if('serviceWorker' in navigator) { navigator.serviceWorker.register('/serviceworker.js') } else if ('applicationCache' in window) { // add AppCache }

47. let iframe = document.createElement('iframe') iframe.style.display = 'none' iframe.src = '/load-appcache.html' document.body.appendChild(iframe)

51. <html manifest="/offline.appcache"> <head> <title>loading douchebags</title> </head> <body></body> </html>

52. CACHE MANIFEST / /download /css/main.css /img/logo.svg /js/build.js NETWORK: *

56. 20.7 seconds

57. 190 milliseconds

58. @JaffaTheCake

62. radical new way to create web sites

63. radical new way to update web sites

64. WebWorkers

65. commit 90b52e847359ae902d3f7ce7bc511cadfbc29ea8 Author: Alexey Proskuryakov <ap@webkit.org> Date: Thu Nov 6 07:04:47 +0000 Implement Worker global object

66. 2008!

71. WebWorkers?

72. single threaded by default

73. everything is fighting for CPU time

74. lots of number crunchin’ === hardcore jank

75. Offload tasks to background thread

76. super expensive fns become pretty cheap

83. @PatrickKettner

84. @PatrickKettner

86. @PatrickKettner

87. https://github.com/nolan lawson/pokedex.org

88. Web App Manifest

90. { "lang": "en", "dir": "ltr", "name": "Super Racer 2000", "description": "The ultimate futuristic racing game from the future!", "short_name": "Racer2K", "icons": [{ "src": "icon/lowres.webp", "sizes": "64x64", "type": "image/webp" },{ "src": "icon/lowres.png", "sizes": "64x64" }, { "src": "icon/hd_hi", "sizes": "128x128" }], "scope": "/racer/", "start_url": "/racer/start.html", "display": "fullscreen", "orientation": "landscape", "theme_color": "aliceblue", "background_color": "red" }

99. "related_applications": [{ ”platform": ”play", ”url": "https://play.google.com/store/apps/details?id=com.example.app1", ”id": "com.example.app1" },{ "platform": ”itunes", ”url": "https://itunes.apple.com/app/example-app1/id123456789" }, { ”platform": ”windows", ”url": "ms-windows-store://pdp?PFN=Example.App_pfhei292v8qza" }], "prefer_related_applications": false,

100. "related_applications": [{ ”platform": ”play", ”url": "https://play.google.com/store/apps/details?id=com.example.app1", ”id": "com.example.app1" },{ "platform": ”itunes", ”url": "https://itunes.apple.com/app/example-app1/id123456789" }, { ”platform": ”windows", ”url": "ms-windows-store://pdp?PFN=Example.App_pfhei292v8qza" }], "prefer_related_applications": false,

101. <html lang=en dir=ltr> <head> <title>Racer2K</title> <meta name=application-name content="Super Racer 2000”> <meta name=description content="The ultimate futuristic game"/> <meta name=apple-mobile-web-app-capable content=yes> <link rel=manifest href="manifest.webmanifest"> <meta name=screen-orientation content=landscape> <meta name=theme-color content=aliceblue> <link rel=favicon href="icon/lowres.png"> <meta name="msApplication-PackageFamilyName" content="Example… <link rel=alternate href="ios-app://id123456789/racer/begin"> <link rel=apple-touch-icon sizes=64x64 href="icon/lowres.png"> <link rel=apple-touch-icon sizes=128x128 href="icon/hd_hi.png"> <link rel=start href="/racer/start.html">

102. <html lang=en dir=ltr> <head> <title>Racer2K</title> <meta name=application-name content="Super Racer 2000”> <meta name=description content="The ultimate futuristic game”> <meta name=apple-mobile-web-app-capable content=yes> <link rel=manifest href="manifest.webmanifest"> <meta name=screen-orientation content=landscape> <meta name=theme-color content=aliceblue> <link rel=favicon href="icon/lowres.png"> <meta name="msApplication-PackageFamilyName" content="Example… <link rel=alternate href="ios-app://id123456789/racer/begin"> <link rel=apple-touch-icon sizes=64x64 href="icon/lowres.png"> <link rel=apple-touch-icon sizes=128x128 href="icon/hd_hi.png"> <link rel=start href="/racer/start.html">

107. let cheerio = require(’cheerio') let cld = require('cld') let getLang = (html, callback) => { let $ = cheerio.load(html) let lang = $('html[lang]').attr(‘lang') if (!lang) { lang = $('html[xml:lang]').attr(‘xml:lang’) } if (!lang) { lang = $(’meta[name:”dc.language”]').attr(‘content’) } ...

113. cld.detect(html,{isHTML: true},(err, result) => { if (!err && result.reliable) { lang = result.language.code } callback(err, lang) }

114. let url = require(’url') let async = require(’async’) let icojs = require(’icojs') let cheerio = require(’cheerio') let request= require(’request') let imgsize = require(’image-size') let imgtype = require(’image-type') let mime = require(’./mime-types’).lookup let FilteType = require(’file-type') let flatten = require(’lodash/flattenDeep') let filter = require(’lodash/filter') let icons = (obj, callback) => { let $ = cheerio.load(html) let favicon = $(’rel[“shortcut icon”]').attr(‘href')

115. <link rel=favicon href="icon.ico"> <link rel=apple-touch-icon sizes=64x64 href="icon/lowres.png"> <link rel=apple-touch-icon sizes=128x128 href="icon/hd_hi.png”><meta name="msApplication-TileImage" content=”icon/tile.png”> <meta name="msApplication-config" content=”tileConfig.xml”>

116. <link rel=favicon href="icon.ico"> <link rel=apple-touch-icon sizes=64x64 href="icon/lowres.png"> <link rel=apple-touch-icon sizes=128x128 href="icon/hd_hi.png"> <meta name="msApplication-TileImage" content=”icon/tile.png”> <meta name="msApplication-config" content=”tileConfig.xml”>

119. https://WebManife.st

123. https://WebManife.st/validator https://WebManife.st/spec

133. let methodData = [{ supportedMethods: [’basic-card'], data: { supportedNetworks: [’visa', ’mastercard', ’amex'], supportedTypes: [’credit'] } }]; let details = { total: { label: ’Total Due', amount: { currency: ’USD', value : ’109.00' } }}; var options = { requestShipping: true };

136. if (’PaymentRequest’ in window) { let payment = new PaymentRequest(methodData, details, options) }

137. if (’PaymentRequest’ in window) { let payment = new PaymentRequest(methodData, details, options) } else { window.location.href = ‘/old-checkout’ }

140. if (’Windows’ in window) { ... }

141. bluetooth Windows.Devices.Bluetooth

142. media keys Windows.Media.DialProtocol

143. ocr Windows.Media.Ocr

144. cortana Windows.ApplicationModel.VoiceCommands

145. IndexedDB

146. commit 4334db65c2718d304d4792fbeb46f96e9d798b76 Author: Ben Turner <bent@mozilla.com> Date: Wed Jun 23 19:46:00 2010 +0000 Implement Asynchronous parts of the Indexed Database API

147. localStorage.setItem(’foo', ’bar'); localStorage.getItem(’foo’) //bar

148. window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction; window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange; if (!window.indexedDB) { alert("Sorry!Your browser doesn't support IndexedDB"); } var database; var request = window.indexedDB.open("foobar",1); request.onerror = function(event) { console.log(event.target.errorCode); }; request.onsuccess = function(event) { database=request.result; }; request.onupgradeneeded = function(event) { var db = event.target.result; var objectStore = db.createObjectStore("notes", { keyPath: "id",autoIncrement:true}); }; var note={title:"foo", body:"bar", date:”06/21/2016”}; var transaction = database.transaction(["hello"], "readwrite"); var objectStore = transaction.objectStore("world"); var request=objectStore.put(note); request.onsuccess = function(event) { //do something here }; var objectStore = database.transaction("hello").objectStore("world"); objectStore.openCursor().onsuccess = function(event) { var cursor = event.target.result; if (cursor) { alert("Note id: "+cursor.key+", Title: "+cursor.value.title); cursor.continue(); } };

149. window.name document.cookie Flash Cache IndexedDB localStorage AppCache Cache API WebSQL

154. var db = new Dexie('MyDatabase'); db.friends .where(‘age’) .above(75) .each((friend) => { console.log(friend.name); });

156. localForage.setItem(’foo', ’bar'); localForage.getItem(’foo’, (err, val) => { console.log(val) } ))

158. with a G

160. demo.agektmr.com/storage

162. don’t wait for a rearch

163. use the new shiny.

164. make awesome stuff.

165. github.com/PatrickKettner twitter.com/PatrickKettner facebook.com/PatrickKettner PatKet@microsoft.com

166. Thanks!

Progressive What Apps?

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Progressive What Apps?

Ähnlich wie Progressive What Apps? (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Progressive What Apps?

Hinweis der Redaktion