摘要：在上一篇文章記一次基于的項目由開發到部署一中，我們了解到了給我們提供了哪些支持，也了解到了有哪些不足。項目回顧這是一個移動端的應用，使用，，，，基于開發。可以添加到主屏幕，可以斷網條件下正常打開和訪問數據。

在上一篇文章記一次基于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