zoukankan      html  css  js  c++  java
  • 基于 react-creat-app 中 service worker 的研究

    背景:项目入口执行了 registerServiceWorker()。目的是为了实现 app 的离线缓存。

    service worker 是独立于主线程的 js 线程。

    可用于:(1)推送消息、(2)后台同步、(3)拦截和处理网络请求。本文只针对(3)。

    先决条件:只在 https 环境中运行,防止有人劫持链接。

    使用:参考文档

    (1)注册 SW:

     
     

    (2)安装:在安装成功后的回调中决定需要缓存哪些文件;再接收 fetch 请求时,返回在缓存中匹配中的资源。

    (3)更新 SW:a、更新 SW js 文件,下载完成后则视为新的 SW;b、新的 SW 将会启动,触发 install 事件;c、此时,旧的 SW 仍控制着页面,新的 SW 进入 waiting 状态;d、当前页面关闭时,旧的 SW 将会关闭,新的 SW 将会取得页面的控制权;e、新的 SW 取得页面控制权后,会触发 activate 事件。

    Attention:clients.claim() 可让 SW 控制页面;skipWaiting 尽快将新工作线程激活。两者同时配置来实现浏览器同步服务端更新。

    webpack  配置:通过  workbox-webpack-plugin 来初始化 SW 的 js 文件。



    作者:ahappyone
    链接:https://www.jianshu.com/p/bd2d6ac7a721
    来源:简书

  • 相关阅读:
    数学学习合集
    萌萌的网络流~~
    2014西安全国邀请赛
    好题、趣题、麻烦题
    单调栈与单调队列
    字符串习题
    计算几何
    summer 2014 校队训练 嗷嗷待补之题
    2014多校联合训练第一场(组队训练)
    summer 2014 Round 4 解题报告
  • 原文地址:https://www.cnblogs.com/yiyangl/p/13444623.html
Copyright © 2011-2022 走看看