title: How can I use the BroadcastChannel API or something similar in Safari 10+?
body: <p><strong>Problem:</strong></p>
  
  <p>I need a client-side Javascript solution (jQuery is fine) where an event in one browser window/tab can be broadcast to other windows/tabs on the same domain.  For example, if a cart is updated in tab A, tabs B and C get notified so we can update some info on the page, or notify the user that page is stale, or something like that.</p>
  
  <p><strong>What I've tried:</strong></p>
  
  <p>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API" rel="noreferrer">BroadcastChannel API</a> fits my needs perfectly, but does not work in IE 11 or Safari.</p>
  
  <p>So I tried <a href="https://medium.com/@alex89x/communication-among-iframes-and-tabs-a-working-polyfill-for-broadcast-channel-api-f44d07dcf527" rel="noreferrer">this polyfill</a> so I could use the BroadcastChannel API everywhere.  It worked in IE, but not in Safari (I believe BroadcastChannel remained undefined).</p>
  
  <p>I then tried <a href="https://github.com/jcubic/sysend.js" rel="noreferrer">sysend.js</a> , which uses BroadCastChannel if it's available, otherwise fakes it using <code>localStorage</code>.  Their demo page works fine in Safari, but on my site, I found it worked in Safari 9, but not 10-12 (tested using BrowserStack and one real Mac running Safari 12).  Debugging their script, it seems the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event" rel="noreferrer">storage event</a> that's supposed to fire when <code>localStorage</code> in a different tab is changed simply doesn't fire.  But this is actually only a problem <strong>when you have <code>document.domain</code> set</strong>, which I do.</p>
  
  <p>I believe this is the same as <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=136356&amp;q=label%3AOWP-Standards-Compatibility&amp;colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified" rel="noreferrer">this old Chrome bug</a>.  But whereas Chrome had that issue from 2012-2017, Safari apparently introduced it around 2017?</p>
  
  <p>I haven't found anyone else discussing this bug in Safari, but I can prove this pretty easily.  Open two tabs that use the same <code>document.domain</code> value and run these scripts:</p>
  
  <p>Tab A:</p>
  
  <pre><code>$(window).on("storage", function (e) {
      alert('storage was modified');
  });
  </code></pre>
  
  <p>Tab B:</p>
  
  <pre><code>localStorage.setItem("test", "123");
  </code></pre>
  
  <p>In Safari 9, Tab A will pop the alert.  In Safari 10+, it won't.</p>
  
  <p>If I remove the <code>document.domain</code>, it works.  Note that we are using <code>document.domain</code> on these pages, but they are actually on the same domain in this case.  However <code>document.domain</code> is needed for other scenarios across the site, so I can't remove it.</p>
  
  <p>I also tried looking at <a href="https://github.com/marcuswestin/store.js" rel="noreferrer">store.js</a>.  It has an event system, but it only seemed to work within the same tab (in any browser).  Unless I'm missing something.</p>
  
  <p><strong>So, is there any BroadcastChannel polyfill or similar library that actually works in Safari 10+ when you have a <code>document.domain</code> set?</strong>  Or any other way to do this?</p>
  
  <p>Notes:</p>
  
  <ul>
  <li>I'm aware that BroadcastChannel and the "storage" event for <code>localStorage</code> only fire for tabs <em>other</em> than the current one.  That is not my issue, and is actually desirable to me.</li>
  <li>I've also seen posts that make me believe an alternate solution relying on <code>localStorage</code> likely will not work in Private Browsing mode in Safari. <em>EDIT: It appears this was <a href="https://stackoverflow.com/a/51616249/11991371">fixed in Safari 11</a> so it does work, but in my tests it didn't share localStorage with any other tabs, even other Private tabs in the same window. So that's not much help.</em>  Ideally, a solution would account for this as well, but at this point I'd be happy with anything that worked in Safari 10+ for me.  I did see an example in the <em>store.js</em> project where they said they <a href="https://github.com/marcuswestin/store.js/issues/156" rel="noreferrer">made it so it would fallback to cookies</a> in that case, so it sounds possible at least.</li>
  <li>I tried to think about other ways to do this with a <code>setInterval</code> that checks the <code>localStorage</code> for updates every few seconds or something.  Even in theory that seems really hacky and unreliable (how would you know when all pages have "received" the update so you can clear it out?).  And how would you know when to do it this hacky way instead of one of the preferred methods using <code>localStorage</code>?  Safari 10+ is going to report that it supports <code>localStorage</code> so you can't really feature detect it, right?  It "supports" it, it just doesn't work correctly.</li>
  </ul>