Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Beyond The Tab: Executing JavaScript Across Bro...

Andrew Dunkman
November 20, 2016

Beyond The Tab: Executing JavaScript Across Browser Contexts @ Nodevember

Keeping JavaScript from interfering across tabs is great, but what about when a web application wants to share state without a server? You'll leave this talk with enough knowledge to get started with SharedWorkers, ServiceWorkers, and other techniques - and enough wisdom to know when to use them.

Andrew Dunkman

November 20, 2016
Tweet

More Decks by Andrew Dunkman

Other Decks in Technology

Transcript

  1. In Out document.cookie = cookieName + "=" + encodeURIComponent(json); var

    regex = new RegExp( "(?:(?:^|.*;)\\s*" + n + "\\s*\\=\\s*([^;]*).*$)|^.*$");
  2. In Out Detect document.cookie = cookieName + "=" + encodeURIComponent(json);

    var regex = new RegExp( "(?:(?:^|.*;)\\s*" + n + "\\s*\\=\\s*([^;]*).*$)|^.*$"); setInterval(checkForChanges, pollingInterval);
  3. var tabId = Math.random(); video.addEventListener("play", function () { localStorage.setItem("playing_tab", tabId);

    }); window.addEventListener("storage", function (event) { var isThisKey = event.key === "playing_tab"; var notThisTab = event.newValue !== tabId; if (isThisKey && notThisTab) { video.pause(); } });
  4. var tabId = Math.random(); video.addEventListener("play", function () { localStorage.setItem("playing_tab", tabId);

    }); window.addEventListener("storage", function (event) { if (event.key === "playing_tab" && event.newValue !== tabId) { video.pause(); } });
  5. var tabId = Math.random(); video.addEventListener("play", function () { localStorage.setItem("playing_tab", tabId);

    }); window.addEventListener("storage", function (event) { if (event.key === "playing_tab" && event.newValue !== tabId) { video.pause(); } }); 9
  6. %

  7. @adunkman Service workers essentially act as proxy servers that sit

    between web applications, and the browser and network (when available). … They will also allow access to push notifications and background sync APIs. –MDN
  8. @adunkman Service workers essentially act as proxy servers that sit

    between web applications, and the browser and network (when available). … They will also allow access to push notifications and background sync APIs. –MDN
  9. @adunkman Service workers are a new browser feature that provide

    event-driven scripts that run independently of web pages. –W3C
  10. @adunkman Service workers are a new browser feature that provide

    event-driven scripts that run independently of web pages. –W3C
  11. @adunkman A service worker is a process which is tied

    to domain events rather than to a browsing context. –me
  12. Page navigator.serviceWorker.register("sw.js") .then(function (reg) { console.log("success", reg); }).catch(function (err) {

    console.log("fail", err); }); Tab 1 worker.js 1 Tab 2 (old) worker.js 1 (new version)
  13. Page navigator.serviceWorker.register("sw.js") .then(function (reg) { console.log("success", reg); }).catch(function (err) {

    console.log("fail", err); }); Worker self.addEventListener("install", function (event) { self.skipWaiting(); });
  14. Worker Page navigator.serviceWorker.register("sw.js") .then(function (reg) { console.log("success", reg); }).catch(function (err)

    { console.log("fail", err); }); self.addEventListener("push", function (event) { console.log("message", event); }); self.addEventListener("install", function (event) { self.skipWaiting(); });
  15. Worker self.addEventListener("fetch", function (event) { console.log(event.request.url); event.respondWith( caches.match(event.request) .then(function (response)

    { if (response) { return response; } return fetch(event.request) .then(function (response) { return response; }).catch(function (error) { throw error; }); }) ); });
  16. Worker self.addEventListener("fetch", function (event) { console.log(event.request.url); event.respondWith( caches.match(event.request) .then(function (response)

    { if (response) { return response; } return fetch(event.request) .then(function (response) { return response; }).catch(function (error) { throw error; }); }) ); });
  17. Worker self.addEventListener("fetch", function (event) { console.log(event.request.url); event.respondWith( caches.match(event.request) .then(function (response)

    { if (response) { return response; } return fetch(event.request) .then(function (response) { return response; }).catch(function (error) { throw error; }); }) ); });
  18. Worker self.addEventListener("fetch", function (event) { console.log(event.request.url); event.respondWith( caches.match(event.request) .then(function (response)

    { if (response) { return response; } return fetch(event.request) .then(function (response) { return response; }).catch(function (error) { throw error; }); }) ); });
  19. Worker self.addEventListener("fetch", function (event) { console.log(event.request.url); event.respondWith( caches.match(event.request) .then(function (response)

    { if (response) { return response; } return fetch(event.request) .then(function (response) { return response; }).catch(function (error) { throw error; }); }) ); });
  20. Worker self.addEventListener("fetch", function (event) { console.log(event.request.url); event.respondWith( caches.match(event.request) .then(function (response)

    { if (response) { return response; } return fetch(event.request) .then(function (response) { return response; }).catch(function (error) { throw error; }); }) ); });