Gahing's blog Gahing's blog
首页
知识体系
  • 前端基础
  • 应用框架
  • 工程能力
  • 应用基础
  • 专业领域
  • 业务场景
  • 前端晋升 (opens new window)
  • Git
  • 网络基础
  • 算法
  • 数据结构
  • 编程范式
  • 编解码
  • Linux
  • AIGC
  • 其他领域

    • 客户端
    • 服务端
    • 产品设计
软素质
  • 面试经验
  • 人生总结
  • 个人简历
  • 知识卡片
  • 灵感记录
  • 实用技巧
  • 知识科普
  • 友情链接
  • 美食推荐 (opens new window)
  • 收藏夹

    • 优质前端信息源 (opens new window)
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Gahing / francecil

To be best
首页
知识体系
  • 前端基础
  • 应用框架
  • 工程能力
  • 应用基础
  • 专业领域
  • 业务场景
  • 前端晋升 (opens new window)
  • Git
  • 网络基础
  • 算法
  • 数据结构
  • 编程范式
  • 编解码
  • Linux
  • AIGC
  • 其他领域

    • 客户端
    • 服务端
    • 产品设计
软素质
  • 面试经验
  • 人生总结
  • 个人简历
  • 知识卡片
  • 灵感记录
  • 实用技巧
  • 知识科普
  • 友情链接
  • 美食推荐 (opens new window)
  • 收藏夹

    • 优质前端信息源 (opens new window)
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 前端基础

  • 应用框架

  • 工程能力

  • 应用基础

  • 专业领域

    • 服务端

    • 跨端技术

      • H5

      • Hybrid 基建需要做哪些?
      • PWA

        • PWA 笔记
          • 疑问
          • 安装失败终止流程
          • 开发
          • 更新时机
            • 主动更新的三种策略
          • 参考资料
        • 通读「PWA 应用实战」
      • 高性能动态化跨端方案设计
      • 端能力

    • Web IDE

    • 中后台

    • 动效渲染

    • 可视化

    • 埋点监控

    • 多媒体

    • 桌面技术

    • 游戏互动

    • 编辑器

    • 虚拟化与容器化

    • 设计系统

  • 业务场景

  • 大前端
  • 专业领域
  • 跨端技术
  • PWA
gahing
2021-09-21
目录

PWA 笔记草稿

# 疑问

检测更新的时机是?

# 安装失败终止流程

# 开发

webpack 通过 workbox-webpack-plugin (opens new window) 生成 sw

可以配置

update on reload

# 更新时机

被动更新和主动更新

  • 被动更新:超过时间,或者浏览器相关都关掉然后打开新页面,就会触发更新

受限于浏览器设计,只有一个 tab 的 reload 也不会触发更新

  • 主动更新:主动调用 skipWaiting 接管页面

# 主动更新的三种策略

  • 静默接管
  • 立即刷新
  • 提示刷新

url hash 变更 sw.js?v=111

sw 内容变更

skipWaiting 阶段

  • 手动点击 skipWaiting
  • 关闭所有终端
  • 代码里设置 self.skipWaiting()

https://lavas-project.github.io/pwa-book/chapter04/3-service-worker-dive.html

另外默认 24 小时触发更新

# 参考资料

  • 谨慎处理 Service Worker 的更新 (opens new window)
编辑 (opens new window)
上次更新: 2024/09/01, 23:56:56
Hybrid 基建需要做哪些?
通读「PWA 应用实战」

← Hybrid 基建需要做哪些? 通读「PWA 应用实战」→

最近更新
01
浅谈代码质量与量化指标
08-27
02
快速理解 JS 装饰器
08-26
03
Vue 项目中的 data-v-xxx 是怎么生成的
09-19
更多文章>
Theme by Vdoing | Copyright © 2016-2024 Gahing | 闽ICP备19024221号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式