Beyond The Tab: Executing JavaScript Across Browser Contexts @ Abstractions

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.

2e055eb589fb86174fd268748b0fcd30?s=128

Andrew Dunkman

August 19, 2016
Tweet

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

  5. None
  6. Same-Origin Policy

  7. Cross-Origin Resource Sharing Cross-Document Messaging

  8. Sandbox

  9. Tab Sandbox

  10. Domain Sandbox

  11. None
  12. Why?

  13. Broadcast Events

  14. Broadcast Events Share Resources

  15. Broadcast Events Share Resources Synchronize

  16. None
  17. Cross-Tab Communication

  18. None
  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);

  24. None
  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)); } } );
  29. None
  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); } ); };
  36. None
  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.
  38. None
  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); } ); } ); };
  45. None
  46. ServiceWorker

  47. Domain-Specific Resource

  48. Lifecycle

  49. Communication

  50. Communication Subscribe to Domain Events

  51. fetch

  52. fetch push

  53. None
  54. Where to now?

  55. None
  56. Broadcast Events Share Resources Synchronize

  57. document.cookie localStorage, sessionStorage

  58. SharedWorker ServiceWorker

  59. None
  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

  65. None
  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
  73. None
  74. getharvest.com/careers

  75. dunkman.me/talks/crosstab Andrew @adunkman