前言
在日常的网页浏览中，我们往往会打开多个网页标签页，每个标签页相当于一个独立的浏览器会话。而对于 Progressive Web App（PWA）来说，一旦被添加到主屏幕上，它的标签页就相当于应用程序的窗口，我们也希望在多个标签页之间共享应用程序的状态。但是，PWA 的标签页之间本身是被隔离的，如果我们需要共享会话，就需要一些额外的工作，本文就来介绍如何在 PWA 中实现多标签页之间的会话共享。
SessionStorage vs LocalStorage
在实现会话共享的过程中，我们可能会使用 SessionStorage 或者 LocalStorage 这两个 Web Storage API。它们都是浏览器提供的本地存储机制，其中 SessionStorage 可以存储一些临时的会话数据，而 LocalStorage 则可以长期存储一些持久化数据。在多标签页之间实现会话共享的情况下，我们通常会选择使用 LocalStorage。
会话共享的实现
在实现会话共享之前，我们需要先了解一下浏览器标签页之间的通信机制，包括 BroadcastChannel，SharedWorker 和 Service Worker。
1. BroadcastChannel
BroadcastChannel 是一个 HTML5 定义的 API，它允许不同的页面和 iframe 之间进行通信，通过它我们可以跨标签页广播消息。使用 BroadcastChannel 实现多标签页之间的会话共享是非常方便的，但是它只允许同源的页面之间通信，因此需要在同一个域名下才能使用。
-- -------------------- ---- -------
-- ---------- ----------------
----- ------- - --- -----------------------------------
-- ------ ------------ -
-------------------------------------- ---------------- --------- ------- ----
-- ----
-------------------------- --------------------
-- ------------
----- ------- - --- -----------------------------------
----------------------------------- --------------- -
------------------ --- ------------------ -
----- ----------- - ---------------------------------------------------
---------------------------------- -- -- -------
-
---2. SharedWorker
SharedWorker 可以一直在后台运行，提供了一个共享运行环境，多个页面可以通过它来访问一个共享的 JavaScript 上下文环境。SharedWorker 提供了一种比 BroadcastChannel 更强的通信机制，但是需要更多的工作来实现会话共享，它也只能在同一个域名下使用。
-- -------------------- ---- -------
-- ---------
----- ------- - --- ------
--------- - --------------- -
-- ------------- --- -
----- ---- - ---------------
------------------
-- ----------
---------------------------------------------------------
-- ----------
-------------------------------- ----------- -
----- ---- - -------
------------ --- ---------------- -
-- ------------------ ------------ -
-------------------------------------- ------------------------------
-- ------
------------------------ -- -
------------------------- ------------------ -------- ------------ ---
---
-
---
--
-- ------ ------------
----- ------ - --- --------------------------
--------------------------------------- ----------- -
----- ----------- - -------------------
---------------------------------- -- -- -------
---
--------------------3. Service Worker
Service Worker 是一种独立于当前网页的进程，它可以拦截网络请求并对其进行处理。Service Worker 可以在浏览器标签页之间共享，而且可以跨域。通过将会话数据存储在 IndexedDB 中，并在不同的标签页间共享，我们就可以实现多标签页之间的会话共享。
-- -------------------- ---- -------
-- -----
----- --------- - ----------------------------- -- --------- -- -
-----------------------------------------------
---
------------------------------ -- -- -
----------------------------------------- --- --- -
-------------------------------------------
-
---
-------- ----------------------- -
----- ------------ - ----------------------------------
------ ----------------------------------------------- -- -
----- ------- - --- ----------
------------------------------ --------------------
------ --- --------------------------------- - ------- ---
---
-
-- ------ ------- ------
--------------------------- -
----------------------------------------- - ------ --- ----------- -- -
-- ------ --------- -
----- ----------- - - --------- ------- --
----- -- - ---------------------------------------- -------------
-------------------------------------------------- ------------------
-- ----- ------- ------ ----
----- --- - -
----- ----------------
-------- -----------
--
----------------------------
-- - --------- -----
----- --- - ---------------------------------------- ------------
--------------------------------------------------------------------- -- -
------------------------------ -- -- -------
---
---
-总结
在本文中，我们介绍了三种不同的技术选项，BroadcastChannel，SharedWorker 和 Service Worker，用于在 PWA 中实现多标签页之间的会话共享。根据实际需求可以选择不同的技术方案来实现。这些技术选项不仅可以为 PWA 提供更好的用户体验，而且也有一定的指导意义，可以帮助开发者更好地了解浏览器的一些工作原理和实现机制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64802d5948841e9894fab84f