如何指定PWA存储URL？解决GitHub Pages多PWA缓存隔离问题

核心结论 #

浏览器的LocalStorage、CacheStorage是基于根域名做同源隔离的，无法强制让它们指向子路径级的应用URL，这是浏览器同源策略的原生限制。

缓存与存储隔离方案 #

• 给存储键/缓存名称加唯一命名空间
  每个PWA的代码里，给所有存储键和缓存名称加上专属前缀：

  • Service Worker缓存：把缓存名设为pwa01-v1、pwa02-v1这类带应用标识的名称，更新时只操作自己的缓存组，不会干扰其他应用。
  • LocalStorage：存储数据时用pwa01_xxx、pwa02_xxx作为键名，避免同名键互相覆盖。

• 用IndexedDB做隔离存储
  如果需要更复杂的存储逻辑，IndexedDB支持自定义数据库名称，每个PWA使用独立的数据库名（比如pwa01_db、pwa02_db），不同数据库之间完全隔离，不会出现数据交叉的问题。

• 独立自定义域名（彻底隔离）
  若条件允许，给每个PWA配置独立的自定义子域名，这样两个应用属于不同的同源，浏览器会自动隔离它们的所有存储、缓存及Service Worker，从根源解决冲突问题。

内容的提问来源于stack exchange，提问作者user764397