vue.js - 部署到生产 Netlify 的 Vue CLI 3 PWA 提供 Workbox 错误 : bad-precaching-response . .._redirects?__WB_REVISION__...404

Question

此问题仅发生在 Netlify 的生产环境中。它不会出现在开发环境中。
通常，我潜伏并搜索以找到答案，或者从相关答案中汇总一些东西，但是这个让我很难过......

我有一个在 Netlify 上运行的 Vue CLI 项目，设置了一个过去部署的 PWA。
服务 worker 应该正在运行，并且可以安装应用程序以供离线使用。

现在它在控制台中给了我这个错误:

Uncaught (in promise) bad-precaching-response: bad-precaching-response :: [{"url":"https://<domain>/_redirects?__WB_REVISION__=d38a2b58df330c85e0029eecf71d7c26","status":404}]
    at l.o (https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-precaching.prod.js:1:1749)
    at async Promise.all (index 0)
    at async l.install (https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-precaching.prod.js:1:1221)

因此，当工作箱执行此操作时，它似乎以 404 将我的“_redirects”文件踢出。

我尝试将 _redirects 更改为 netlify.toml 文件，并在 .toml 文件中使用正确格式的重定向内容，但它仍然失败，这是相同的错误消息，只是用 'netlify.toml' 替换了错误中的 '_redirects' .

我还尝试将相同的代码库部署到新的 Netlify 构建(认为这可能是他们的资源的缓存问题)，但问题仍然存在。

我猜这可能是 Workbox 无法编译 Assets 或为与重定向相关的文件提供错误名称的问题。但这也没有意义，因为当我在本地和 Netlify 生产环境中运行构建命令时，它们都应该由托管在 cdn 上的相同代码处理。

这是从工作箱发送错误的代码块:

    const isValidResponse = cacheWillUpdateCallback ?
      // Use a callback if provided. It returns a truthy value if valid.
      cacheWillUpdateCallback({event, request, response}) :
      // Otherwise, default to considering any response status under 400 valid.
      // This includes, by default, considering opaque responses valid.
      response.status < 400;

    // Consider this a failure, leading to the `install` handler failing, if
    // we get back an invalid response.
    if (!isValidResponse) {
      throw new WorkboxError('bad-precaching-response', {
        url,
        status: response.status,
      });
    }

这是我的 package.json:

{
  "name": "<app-name>",
  "version": "0.2.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "capacitor-copy": "vue-cli-service capacitor-copy",
    "capacitor-init": "vue-cli-service capacitor-init",
    "capacitor-open": "vue-cli-service capacitor-open",
    "capacitor-update": "vue-cli-service capacitor-update",
    "css:build": "postcss src/css/styles.css -o public/styles.css"
  },
  "dependencies": {
    "@capacitor/cli": "^1.0.0-alpha.38",
    "@capacitor/core": "^1.0.0-alpha.38",
    "@fullhuman/postcss-purgecss": "^1.3.0",
    "axios": "^0.19.1",
    "core-js": "^3.4.4",
    "moment": "^2.24.0",
    "postcss": "^7.0.26",
    "postcss-cli": "^6.1.3",
    "register-service-worker": "^1.6.2",
    "tailwindcss": "^1.1.4",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3",
    "vue-uuid": "^1.1.1",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.2.2",
    "@vue/cli-plugin-eslint": "^4.2.2",
    "@vue/cli-plugin-pwa": "^4.2.0",
    "@vue/cli-plugin-router": "^4.2.2",
    "@vue/cli-plugin-vuex": "^4.2.2",
    "@vue/cli-service": "^4.1.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-cli-plugin-pwa": "^1.0.0-alpha.1",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

和我的 manifest.json 文件:

{
    "short_name": "<name>",
    "name": "<name>",
    "description": "I have no idea what I'm doing with these build tools.",
    "icons": [
        {
            "src": "./img/icons/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "./img/icons/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        },
        {
            "src": "./img/icons/apple-touch-icon-152x152.png",
            "sizes": "152x152",
            "type": "image/png"
        },
        {
            "src": "./img/icons/favicon-16x16.png",
            "sizes": "16x16",
            "type": "image/png"
        },
        {
            "src": "./img/icons/favicon-32x32.png",
            "sizes": "32x32",
            "type": "image/png"
        },
        {
            "src": "./img/icons/msapplication-icon-144x144.png",
            "sizes": "144x144",
            "type": "image/png"
        },
        {
            "src": "./img/icons/safari-pinned-tab.png",
            "sizes": "144x144",
            "type": "image/png"
        }
    ],
    "start_url": ".",
    "background_color": "#2d3748",
    "display": "standalone",
    "scope": "/",
    "theme_color": "#2d3748"
}

index.html 文件也可能有帮助:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="theme-color" content="#2d3748"/>
    <link rel="manifest" href="manifest.json">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link rel="stylesheet" href="<%= BASE_URL %>styles.css">
    <title>NAME</title>
  </head>
  <body>
    <noscript>
      <strong>This app doesn't work at all without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

老实说，我不认为这是我的代码库的问题。我认为在将其部署到 netlfiy 时配置生成动态 URL 的工作箱将是一个问题。
如前所述，“npm run build”脚本在我的本地机器上构建没有问题。
我很想知道最近是否有人在使用 netlify 或 workbox 时遇到过这种错误。

我将非常感谢任何帮助。

Answer 1

我发现了问题:
这是我在测试时的想法，也发布在其他地方:
我需要已发布的构建目录中的 _redirects 文件，但我想将它从生成的 list 中排除，服务 worker 使用该 list 来过滤到本地或 Internet Assets 的流量。
所以我将尝试为 _redirects 指定一个排除项
尝试:
从这里更改我的 vue.config.js(vue CLI 项目中 webpack.config 的代理):

module.exports = {
    devServer: {
        host: 'lite.bdfi.test'
    },
    pwa: {
        name: 'BDFI',
        themeColor: '#2d3748',
        msTileColor: '#2d3748',
        appleMobileWebAppCapable: 'no',
        appleMobileWebAppStatusBarStyle: 'default',
        manifestPath: 'manifest.json',
        workboxPluginMode: 'GenerateSW'
        
    }
}

对此:

module.exports = {
    devServer: {
        host: 'lite.bdfi.test'
    },
    pwa: {
        name: 'BDFI',
        themeColor: '#2d3748',
        msTileColor: '#2d3748',
        appleMobileWebAppCapable: 'no',
        appleMobileWebAppStatusBarStyle: 'default',
        manifestPath: 'manifest.json',
        workboxPluginMode: 'InjectManifest',
        workboxOptions: {
            // swSrc is required in InjectManifest mode.
            swSrc: 'service-worker.js',
            // ...other Workbox options...
            exclude: [/_redirects/],
        }
    }
}

这意味着我现在正在为 service worker 指定输入，所以我需要从某个地方获取 service worker。
这是我的服务 worker (它只是自动生成的一个精简版)

workbox.core.setCacheNameDetails({prefix: "lite-bdfi-app"});

self.addEventListener('message', (event) => {
    
  if (event.data && event.data.type === 'SKIP_WAITING') {
    self.skipWaiting();
  }
});

self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

构建后与注入(inject)的 list 和工作箱脚本相同:

importScripts("/precache-manifest.54b556dfe16cf1359c2f3257fa76ade9.js", "https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");

而且，本地“dist”目录确认“_redirects”文件被省略。
现在我在本地运行这个构建并在本地服务器中启动它，现在它抛出了不同的错误。在本地，这在以前从未发生过……

PrecacheController.mjs:194 Uncaught (in promise) bad-precaching-response: bad-precaching-response :: [{"url":"http://127.0.0.1:8887/css/app.159bf243.css.map?__WB_REVISION__=b04e3357da21d1241e39","status":404}]
    at l.o (https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-precaching.prod.js:1:1749)
    at async Promise.all (index 0)
    at async l.install (https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-precaching.prod.js:1:1221)
n @ WorkboxError.mjs:30
o @ PrecacheController.mjs:194

看起来很眼熟，现在有 5 个，都在寻找扩展名为 .map 的文件……
现在我将从 list 构建中删除 .map 文件，看看它做了什么:

workboxOptions: {
            // swSrc is required in InjectManifest mode.
            swSrc: 'service-worker.js',
            // ...other Workbox options...
            exclude: [/\.map$/, /_redirects/], //this fixed it.
        }

再次运行构建，检查 dist 文件夹 list ， list 中不包含 .map 文件。
然后检查清除缓存和本地存储的应用程序的本地版本。那里没有错误……似乎很有希望。
推送到 GitHub。 Netlify 构建触发器，不是自动发布的，所以访问暂存链接。
页面加载寻找 _redirects 文件时不再出现错误。
检查“/invalid-url”的重定向，它会按预期转移到 404 页面。
发布部署后，我现在可以将应用程序作为 PWA 安装在我的桌面上。
为我解决了问题。
我希望这可以帮助将来遇到同样问题的人。