![this.addEventListener('install', function(event) {
event.waitUntil(
caches.open('v1').then(function(cache) {
return cache.addAll([
'/sw-test/',
'/sw-test/index.html',
'/sw-test/style.css',
'/sw-test/app.js',
'/sw-test/image-list.js',
'/sw-test/star-wars-logo.jpg',
'/sw-test/gallery/bountyHunters.jpg',
'/sw-test/gallery/myLittleVader.jpg',
'/sw-test/gallery/snowTroopers.jpg'
]);
})
);
});
installation](https://image.slidesharecdn.com/apis-for-modern-web-apps-160303175202/85/APIs-for-modern-web-apps-29-320.jpg)
![var channel = new MessageChannel();
channel.port1.onmessage = function(e) {
alert(e.data);
}
mySW = reg.active;
mySW.postMessage('hello', [channel.port2]);
channel msg
var port;
self.onmessage = function(e) {
port = e.ports[0];
}
port.postMessage(obj);](https://image.slidesharecdn.com/apis-for-modern-web-apps-160303175202/85/APIs-for-modern-web-apps-38-320.jpg)
![#content {
padding-left: 12px:
margin-right: 20px;
}
html[dir="rtl"] #content {
padding-left: 0;
padding-right: 12px;
margin-right: 0;
margin-left: 20px;
}
CSS BIDI features
•BIDI websites are simpler to layout with CSS
BIDI features](https://image.slidesharecdn.com/apis-for-modern-web-apps-160303175202/85/APIs-for-modern-web-apps-56-320.jpg)
APIs for modern web apps
- 1. APIsfor modern web apps chris mills, mozillA
- 2. Get the slides! •Don’t worry about notes •You can get the slides from slideshare.net/ chrisdavidmills •Sit back and relax •Or fidget if you get bored… •Ask questions at @chrisdavidmills or cmills@mozilla.com
- 3. who am i? •I’m Chris •Mozilla, MDN writer •Twiddling around with JS/CSS/HTML •APIs •Educational material •Accessibility whiner •Heavy metal drummer
- 4. APIslike, what are we talking about?
- 5. •I really mean browser JavaScript APIs •Exposing complex functionality to JS •Making the Web more powerful and useful api, why oh why?
- 6. •For a time, we only really had a few APIs •We had DOM stuff, and XHR •(And a bunch of horrid non-standard stuff) •But the scene exploded •WHATWG, Web Apps WG, and others api, why oh why?
- 7. •Earlier APIs added interesting new features •E.g. Geolocation, Canvas •But this still wasn’t enough api, why oh why?
- 8. •We want to remain competitive with native •Get everything working together more cohesively •Deal with multimedia effectively in the browser •Improve performance, for games, etc. •Improve internationalization api, why oh why?
- 10. •Native platforms had better functionality •We want to catch up, and make it webby web versus native
- 11. •The Web is a good thing •Progressive enhancement •No app stores •You can’t cache seamlessly on native, or render text easily/fluidly we love web
- 12. •Installable/discoverable •Offline •Re-engageable •Linkable •Responsive •Safe •and of course, Progressive progressive apps
- 13. Installablei got you under my skin
- 14. installing apps
- 15. •The web can do this too! •Without app stores •Web App Manifest defines app features •Including icons, background, splash screen, theme colors… •App files cached on device too (see later) installing apps
- 16. Manifest example { "name": "My sample app", "short_name": "MY app", "start_url": "./? utm_source=web_app_manifest", "display": "standalone", "icons": [{ "src": "images/touch/homescreen48.png", "sizes": "48x48", "type": "image/png" }, { "src": "images/touch/homescreen72.png", "sizes": "72x72", "type": "image/png" }, { "src": "images/touch/homescreen96.png",
- 17. •Also helps with discoverability •The web largely does this anyway •Standardised metadata mechanism is nice •Better represent apps on search results, social media, (app stores?!) etc. discoverability
- 18. we already do it <meta property="og:description" content="Add-ons …"> <meta name="description" content="Add-ons add …"> <meta name="twitter:description" content="Add-ons add …”>
- 20. No connection = no experience
- 21. •Offline data storage •Offline asset storage •Reacting to network changes offline is hard
- 22. •Not so bad •We have storage mechanisms (e.g. IndexedDB, Web Storage, WebSQL) •Something available in most browsers •Plus polyfills (e.g. LocalForage) offline data
- 23. •More of a pain •We had AppCache… offline assets
- 25. •It’s actually fairly useless •Too much voodoo… •Assumed a specific set of behaviours but….
- 27. •Proxy servers that sit between app and network •Intercepting network requests and customising responses •Does similar things to AppCache (plus a lot more…much harder to use) •Granular control over actions sw are cool
- 28. if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw-test/sw.js', { scope: '/*' }).then(function(sw) { // registration worked console.log('Registration succeeded.'); }).catch(function() { // registration failed console.log('Registration failed.'); }); } registration
- 29. this.addEventListener('install', function(event) { event.waitUntil( caches.open('v1').then(function(cache) { return cache.addAll([ '/sw-test/', '/sw-test/index.html', '/sw-test/style.css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/bountyHunters.jpg', '/sw-test/gallery/myLittleVader.jpg', '/sw-test/gallery/snowTroopers.jpg' ]); }) ); }); installation
- 30. this.addEventListener('fetch', function(event) { var response; event.respondWith(caches.match(event.request) .catch(function() { return fetch(event.request); }).then(function(r) { response = r; caches.open('v1').then(function(cache) { cache.put(event.request, response); }); return response.clone(); }).catch(function() { return caches.match(‘/sw-test/gallery/ myLittleVader.jpg'); })); }); custom responses
- 31. •The app container should be lightweight HTML/CSS/JS •Load fast, be cached, load on repeat visits •The content should then update dynamically •See Instant Loading Web Apps with An Application Shell Architecture App shell
- 33. •You have new followers •Your friend posted a new photo •Your pokemon wants another fight •You have mail •The government wants to read your mail •etc. hello users
- 34. •Native was always good at reengagement •Now web can do it too, even when the app isn’t being used •Push API •Notifications API •Channel Messaging API •etc. People love it
- 35. •Needs an active SW controlling the app •Subscribe to push messages •Send special endpoint to your server (URL) •Send messages to this endpoint •Push server sends them to the SW needs a sw
- 36. navigator.serviceWorker.ready.then(function(reg) { reg.pushManager.getSubscription() .then(function(subscription) { // Enable any UI for subscribing to push messages. var endpoint = subscription.endpoint; updateStatus(endpoint,'init'); }).catch(function(err) { console.log('Error during getSubscription()', err); }); }); push
- 37. self.addEventListener('push', function(event) { var obj = event.data.json(); event.waitUntil( self.registration.showNotification(title, { body: obj.name + ‘ has subscribed.’, icon: icon, tag: tag }) ); }); notifications
- 38. var channel = new MessageChannel(); channel.port1.onmessage = function(e) { alert(e.data); } mySW = reg.active; mySW.postMessage('hello', [channel.port2]); channel msg var port; self.onmessage = function(e) { port = e.ports[0]; } port.postMessage(obj);
- 40. •Creating extra work, repetition, and confusion •E.g. CSS and SVG functionality overlap •Led to them forming the FXTF •More care taken these days •Extensible web manifesto — modular and explainable silos aren’t cool
- 41. •Fetch is a good example •Similar to what XHR does •Abstracts the whole request/response model as JS objects •So it can be used with other APIs like Service Workers fetch / sw
- 42. •Other specs also work well with/are based on SW: •Notifications API •Push API •Channel Messaging •They all contain partial additions for SW sw add-ons
- 44. •Media was broken for years on the Web •Audio/video delivery needed Flash for so long •The <video> tag took long enough fix media
- 45. •WebRTC/gUM for accessing streams •Should solve many use cases, from simple image capture, video streaming, up to multi- person video conferencing •What about recording? •Media Recorder API media capture
- 46. var constraints = { audio: true, video: true }; var p = navigator.mediaDevices.getUserMedia(constraints); p.then(function(stream) { // do something with the stream in here }); p.catch(function(err) { console.log(err.name); }); getusermedia
- 47. var mediaRecorder = new MediaRecorder(stream); record.onclick = function() { mediaRecorder.start(); } stop.onclick = function() { mediaRecorder.stop(); } mediaRecorder.ondataavailable = function(e) { var video = document.createElement('video'); video.setAttribute('controls', ''); var videoURL = window.URL.createObjectURL(e.data); video.src = videoURL; } media recorder
- 48. •Media Source Extensions •Encrypted Media Extensions •DRM on the Web?!? •A necessary evil, WRT services like Netflix..? •Netflix involved in both the above specs streaming/drm
- 49. •Web Audio API •Precise audio control •Add effects •Split and merge audio channels •Spatialization •Audio visualizations audio processing
- 51. •General performance much improved •Web Workers •Emscripten/asm.js (Web Assembly coming soon-ish) •WebGL •SIMD performance
- 54. •The Web is international •But adapting sites for an intl. audience is a pain •E.g. Dealing with time/date formats •And BIDI websites •But we are working on this too i18n
- 55. var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)); console.log(new Intl.DateTimeFormat().format(date)); console.log(new Intl.DateTimeFormat('en- US').format(date)); // DateTimeFormat without arguments returns the // correct value for the language/timezone. JavaScript i18n api •The JS Internationalization API provides features for formatting dates/times for different languages, etc.
- 56. #content { padding-left: 12px: margin-right: 20px; } html[dir="rtl"] #content { padding-left: 0; padding-right: 12px; margin-right: 0; margin-left: 20px; } CSS BIDI features •BIDI websites are simpler to layout with CSS BIDI features
- 57. #content { padding-inline-start: 12px: margin-inline-end: 20px; } CSS BIDI features
- 58. FinitoThanks for listening! @chrisdavidmills, cmills@mozilla.com slideshare.net/chrisdavidmills
- 59. •Main image: Bokeh Dandelion, by Nicolas Raymond credits