Beyond The Tab: Executing JavaScript Across Browser Contexts @ Abstractions

Keeping JavaScript from interfering across tabs is great and all, but what about when a web application wants to share state without involving a server? This talk will cover both older as well as emerging web standards to share JavaScript context — between tabs directly and through background threads that are natively supported by browsers (SharedWorker and ServiceWorker). You’ll leave with enough knowledge to get started and enough wisdom to know when to use these tools.

Transcript

1. Beyond The Tab @adunkman Executing JavaScript Across Browser Contexts Executing JavaScript Across Browser Contexts
2. Executing JavaScript Across Browser Contexts Executing JavaScript Across Browser Contexts
3. Executing JavaScript Across Browser Contexts
4. Executing JavaScript Across Browser Contexts
6. Same-Origin Policy
7. Cross-Origin Resource Sharing Cross-Document Messaging
8. Sandbox
9. Tab Sandbox
10. Domain Sandbox
12. Why?
13. Broadcast Events
14. Broadcast Events Share Resources
15. Broadcast Events Share Resources Synchronize
17. Cross-Tab Communication
19. Domain-Level Objects
20. document.cookie
21. document.cookie = cookieName + "=" + encodeURIComponent(json);
22. var cookieSearchRegex = new RegExp( "(?:(?:^|.*;)\\s*" + cookieName + "\\s*\\=\\s*([^;]*).*$)|^.*$"); return decodeURIComponent( document.cookie.replace( cookieSearchRegex, "$1"));
23. setInterval(checkForChanges, pollingInterval);
25. localStorage, sessionStorage
26. localStorage.setItem(keyName, json);
27. localStorage.getItem(keyName);
28. window.addEventListener("storage", function (event) { if (event.key === keyName) { syncedArrayChanged(JSON.parse( event.newValue)); } } );
30. SharedWorker
31. var worker = new SharedWorker( "sharedworker-worker.js"); worker.port.start();
32. worker.port.postMessage({ type: "newValue", value: value });
33. worker.port.addEventListener( "message", function (event) { syncedArrayChanged(event.data); } );
34. var clients = []; self.addEventListener("connect", function (event) { var port = event.ports[0]; clients.push(port); port.addEventListener("message", function (event) { broadcast(event.data); } ); port.start(); } );
35. var broadcast = function (message) { clients.forEach( function (client) { client.postMessage(message); } ); };
37. The implementation of Shared Web Workers was imposing undesirable constraints on the engine. The feature never gained any adoption and was eventually removed from the engine.
39. ServiceWorker
40. navigator.serviceWorker.register( "serviceworker-worker.js");
41. navigator.serviceWorker.controller .postMessage({ type: "newValue", value: value });
42. navigator.serviceWorker .addEventListener("message", function (event) { valueChanged(event.data); } );
43. self.addEventListener("message", function (event) { broadcast(event.data); } );
44. var broadcast = function (message) { self.clients.matchAll().then( function (clients) { clients.forEach( function (client) { client.postMessage(message); } ); } ); };
46. ServiceWorker
47. Domain-Specific Resource
48. Lifecycle
49. Communication
50. Communication Subscribe to Domain Events
51. fetch
52. fetch push
54. Where to now?
56. Broadcast Events Share Resources Synchronize
57. document.cookie localStorage, sessionStorage
58. SharedWorker ServiceWorker
60. Which, When?
61. Persistent State
62. Persistent State document.cookie
63. Persistent State document.cookie localStorage, sessionStorage
64. Persistent State document.cookie localStorage, sessionStorage
66. Broadcast Events
67. Broadcast Events SharedWorker, ServiceWorker
68. Broadcast Events SharedWorker, ServiceWorker ? ? ?
69. ServiceWorker
70. ServiceWorker Edge: In Development Safari: Under Consideration Chrome, Firefox, Opera, Android: Implemented
71. Push API
72. Push API Edge: In Development Safari, Opera, Android: ??? Chrome, Firefox: Implemented
74. getharvest.com/careers
75. dunkman.me/talks/crosstab Andrew @adunkman