PWA的sw.js文件中缓存名称发生变更时会产生哪些影响？

你当前使用的缓存名称定义代码为：

var cacheName = 'my-super-sweet-pwa-app8wfjawa89ja0';

缓存名称前缀变更属于缓存标识的整体变更，和常见的后缀哈希变更逻辑完全一致，具体产生的影响如下：

• 会触发新版本Service Worker（SW）安装
  修改cacheName会直接改变sw.js文件的内容，浏览器下次访问PWA时会识别到sw.js的差异，将其判定为新版本SW，触发install安装事件，用新的cacheName创建独立的新缓存存储空间，你配置的预缓存资源会全量存入新缓存，此时旧缓存不会被删除，仍保留在用户本地存储中。
• 旧缓存的清理逻辑取决于你的SW配置
  常规SW开发都会在activate事件中编写旧缓存清理逻辑：遍历所有本地缓存，删除名称与当前最新cacheName不一致的缓存。如果你已经配置了该逻辑，新SW激活后旧缓存会被自动清理，不会残留占用存储空间；如果没有配置该逻辑，旧缓存会永久存储在用户本地，只有用户手动清除站点数据时才会被删除。
• 用户侧的感知情况
  新版本SW安装完成后，不会立即接管用户已经打开的PWA页面，已打开的旧页面仍会使用旧SW和旧缓存资源，直到用户关闭所有该PWA的标签页后重新打开，新SW才会正式接管，后续所有资源请求都会从新cacheName对应的缓存中读取。如果缓存名称变更的同时你也更新了站点资源，这次变更刚好会触发用户侧的资源全量更新；如果资源本身没有变化，用户不会感知到任何异常。
• 潜在问题规避
  只要你的SW内部所有缓存读写操作都统一使用cacheName变量，没有硬编码旧缓存名称的情况，就不会出现资源找不到、新旧资源混加载的异常。如果你使用Workbox等PWA开发工具，工具默认已经处理了缓存名变更的适配逻辑，无需额外修改代码。

小提示：缓存名变更本身就是PWA版本迭代时触发用户侧资源更新的标准手段，只要SW逻辑符合规范，前缀变更不会带来额外故障。

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