记一次基于react、cra2、typescript的pwa项目由开发到部署（二）

摘要：在上一篇文章记一次基于的项目由开发到部署一中，我们了解到了给我们提供了哪些支持，也了解到了有哪些不足。项目回顾这是一个移动端的应用，使用，，，，基于开发。可以添加到主屏幕，可以断网条件下正常打开和访问数据。

在上一篇文章记一次基于react、cra2、typescript的pwa项目由开发到部署（一）中，我们了解到了create-react-app 给我们提供了哪些pwa支持，也了解到了有哪些不足。虽然create-react-app会帮我们自动生成一个service-worker.js 去缓存我们的app shell，但是并没有提供让开发者定制service worker的方法，除非我们eject项目，这篇文章继续往下讲，把在这个项目中学到的东西分享给大家。

这是一个移动端的pwa应用，使用react，typescript，react-redux，react-router，workbox 基于create-react-app 开发。可以添加到主屏幕，可以断网条件下正常打开和访问数据。项目地址：browseExpbyReact

typescript是JavaScript的超级，一方面在typescript中我们可以使用最新的特性，另一方面typescript给我们带来了类型系统，可以让我们写出健壮的代码，避免一些潜在的运行时错误。在create-react-app中使用typescript，官网推荐我们使用的是create-react-app的ts版本，他会帮你配置好typescript的相关配置，并使用react-script-ts代替react-script来驱动项目。但是这个版本的更新会稍稍滞后于原版，而且也不利于我们扩展脚手架的配置，所以这里不推荐使用。我们使用 react-app-rewired 来进行配置。

感谢读者提醒：October 29, 2018发布的 v2.1.0 利用bebal7 添加了对typescript的支持，现在我们只要运行 create-react-app my-app --typescript 就能够的到typescript的支持了，可以关注以下网址关注create-react-app 的更新变动create-react-app releases

在create-react-app中修改默认配置有两种常用的方法，

一种是 eject 项目，eject会把我们的脚手架中的配置暴露出来，然后我们就可以去修改了，但是这是一个不可逆的过程，而且讲配置暴露出来也是一个不优雅的做法，所以不推荐。

第二种就是利用 react-app-rewired 去修改我们的配置，他可以让我们在不eject项目的前提下修改我们的配置。比如配置typescript，我们可以找到对应的插件 react-app-rewire-typescript 进行配置。具体可参考本项目

这里到了本文的重点：如何在create-react-app中定制自己的service-worker.js。目前的cra引用了Workbox webpack plugin 代替了先前的 sw-precache-webpack-plugin。我们可以借助 react-app-rewired
去改写默认的Workbox webpack plugin 配置。主要步骤：

在 react-app-rewired 的配置文件 config.overrides.js 中修改 Workbox webpack plugin的配置

在public文件目录下建立自己的service-worker配置文件

首先在 config.overrides.js 中配置，替换默认的workbox-webpack-plugin配置：

/* config-overrides.js */
// typescript的配置插件
const rewireTypescript = require("react-app-rewire-typescript");
const workboxPlugin = require("workbox-webpack-plugin")
const path = require("path")

module.exports = {
  webpack: function (config, env) {
     // typescript的配置插件
    config = rewireTypescript(config, env);
    if (env === "production") {
      // 在 ‘production’ 模式下加入自己的配置
      const workboxConfigProd = {
        swSrc: path.join(__dirname, "public", "cus-service-worker.js"),
        swDest: "cus-service-worker.js",
        importWorkboxFrom: "disabled"
      }
      // 删除默认的WorkboxWebpackPlugin配置
      config = removePreWorkboxWebpackPluginConfig(config)
     // 加入我们的配置
      config.plugins.push(new workboxPlugin.InjectManifest(workboxConfigProd))
    }
    return config
  }
}
// 此函数用来找出 默认配置中的 WorkboxWebpackPlugin， 并把它删除
function removePreWorkboxWebpackPluginConfig (config) {
  const preWorkboxPluginIndex = config.plugins.findIndex((element) => {
    return Object.getPrototypeOf(element).constructor.name === "GenerateSW"
  })
  if (preWorkboxPluginIndex !== -1) {
    config.plugins.splice(preWorkboxPluginIndex, 1)
  }
  return config
}

这部分的配置大概意思就是，当环境为生成环境时，找出webpack中关于workbox-webpack-plugin的配置，把它删掉，然后用自己的配置替代它。

这里解释一下 removePreWorkboxWebpackPluginConfig 这个函数。我们可以自己用create-react-app新建一个无用的项目，然后eject它，那么我们可以在暴露出来的config文件夹下的 webpack.config.prod.js 中看到关于 workbox-webpack-plugin 的配置

new WorkboxWebpackPlugin.GenerateSW({
      clientsClaim: true,
      exclude: [/.map$/, /asset-manifest.json$/],
      importWorkboxFrom: "cdn",
      navigateFallback: publicUrl + "/index.html",
      navigateFallbackBlacklist: [
        // Exclude URLs starting with /_, as they"re likely an API call
        new RegExp("^/_"),
        // Exclude URLs containing a dot, as they"re likely a resource in
        // public/ and not a SPA route
        new RegExp("/[^/]+.[^/]+$"),
      ],
    }),

所以我们可以通过下面这段代码找到这段配置的位置：

// 对plugins数组调用findIndex方法，找到构造函数的name属性为‘GenerateSW’的成员
const preWorkboxPluginIndex = config.plugins.findIndex((element) => {
    return Object.getPrototypeOf(element).constructor.name === "GenerateSW"
  })
// 删除这个成员
  if (preWorkboxPluginIndex !== -1) {
    config.plugins.splice(preWorkboxPluginIndex, 1)
  }

替换掉workbox-webpack-plugin的配置后，根据自己的配置在public目录下新建cus-service-worker.js文件，这个文件会代替默认生成的service-worker.js文件，我们就可以通过配置cus-service-worker.js来定制自己的pwa配置了，而且cus-service-worker.js 里的内容也是有讲究的，以本项目为例：

// 引入workbox全局变量
importScripts("https://storage.googleapis.com/workbox-cdn/releases/3.4.1/workbox-sw.js");

if (workbox) {
  console.log(`Yay! Workbox is loaded