Comparison of data transfer methods between browser tabs in SPA context

Intro

Overview of data transmission methods and definition of criteria for their comparison

The gif shows two tabs with an opened sample application that contains two buttons — “change state” and “unsubscribe”. When you click “change state” in any of the tabs, both tabs will change the background color, while when you click “unsubscribe”, the tab will stop receiving status updates from the other tabs.

Method 1 — Service worker

Method 2 — Localstorage

Method 3 — Broadcast channel

Conclusions

High-level software engineers for powerful web solutions https://intspirit.com/