Эта проблема возникает только в рабочей среде Netlify. Он не присутствует в среде разработки. Обычно я прячусь и ищу ответ, или складываю что-то из связанных ответов, но этот меня так озадачил ...
У меня есть проект Vue CLI, который я запускал на Netlify, настроенный с помощью PWA, который был запущен в прошлом. Сервисный работник должен быть запущен, и приложение можно установить для использования в автономном режиме.
Теперь это выдает мне эту ошибку в консоли:
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)
Так что, похоже, мой файл '_redirects' с ошибкой 404, когда workbox делает это.
Я попытался изменить _redirects на файл netlify.toml с содержимым перенаправления в правильном формате в файле .toml, но он по-прежнему не работает, это то же сообщение об ошибке, только с netlify.toml, заменяющим _redirects в ошибке .
Я также попытался развернуть ту же базу кода в новой сборке Netlify (полагая, что это могла быть проблема с кешем их ресурсов), но проблема не устранена.
Я предполагаю, что, возможно, проблема в том, что Workbox либо не может скомпилировать активы, либо дает неправильное имя файлам, связанным с перенаправлениями. Но это также не имеет смысла, потому что они оба должны обрабатываться одним и тем же кодом, размещенным на cdn, когда я запускаю команду сборки локально и в производственной среде Netlify.
вот фрагмент кода, который отправляет ошибку из рабочего окна:
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>
Честно говоря, я не думаю, что это проблема с моей кодовой базой. Я думаю, это будет проблема с настройкой рабочего окна, которое генерирует динамические URL-адреса при развертывании в netlfiy. Как уже упоминалось, сценарий npm run build не имеет проблем со сборкой на моем локальном компьютере. Я хотел бы знать, сталкивался ли кто-нибудь в последнее время с такой ошибкой с netlify или workbox.
Буду очень благодарен за любую помощь.
