Uncaught (in promise) TypeError: Failed to fetch - Service Worker with workbox

Question

但是，我正在嘗試通過 Workbox Webpack 插件使用 Workbox 設置我的服務人員。 下面是我的 Workbox 配置

module.exports = {
    swDest: "./service-worker.js",
    swSrc: "./resources/js/service-worker.js",
    precacheManifestFilename: './js/wb-manifest.[manifestHash].js',
    importWorkboxFrom: 'disabled',
};

下面是生成的服務工作者

 importScripts("/js/wb-manifest.52d5032189ed9e06abfcddfea1d2c06f.js"); importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js"); if (workbox) { workbox.precaching.precacheAndRoute(self.__precacheManifest) // top-level routes we want to precache workbox.precaching.precacheAndRoute(['/']); // injected assets by Workbox CLI workbox.precaching.precacheAndRoute([]); // match routes for homepage, blog and any sub-pages of blog workbox.routing.registerRoute( /^\/(?:(home)?(\/.*)?)$/, new workbox.strategies.NetworkFirst({ cacheName: 'static-resources', }) ); // js/css files workbox.routing.registerRoute( /\.(?:js|css)$/, new workbox.strategies.StaleWhileRevalidate({ cacheName: 'static-resources', }) ); // images workbox.routing.registerRoute( // Cache image files. /\.(?:png|jpg|jpeg|svg|gif)$/, // Use the cache if it's available. new workbox.strategies.CacheFirst({ // Use a custom cache name. cacheName: 'image-cache', plugins: [ new workbox.expiration.Plugin({ // Cache upto 50 images. maxEntries: 50, // Cache for a maximum of a week. maxAgeSeconds: 7 * 24 * 60 * 60, }) ], }) ); }

這是/js/wb-manifest.52d5032189ed9e06abfcddfea1d2c06f.js文件內容

 self.__precacheManifest = (self.__precacheManifest || []).concat([ { "revision": "58db2a6d21fa1a19dd78", "url": "//js/app.css" }, { "revision": "58db2a6d21fa1a19dd78", "url": "//js/app.js" }, { "revision": "1ca2e7253612557def06", "url": "//js/manifest.js" }, { "revision": "c2e3808fc82a0df6550a", "url": "//js/vendor.js" }, { "url": "/fonts/vendor/slick-carousel/slick/slick.eot?ced611daf7709cc778da928fec876475" }, { "url": "/fonts/vendor/slick-carousel/slick/slick.svg?f97e3bbf73254b0112091d0192f17aec" }, { "url": "/fonts/vendor/slick-carousel/slick/slick.ttf?d41f55a78e6f49a5512878df1737e58a" }, { "url": "/fonts/vendor/slick-carousel/slick/slick.woff?b7c9e1e479de3b53f1e4e30ebac2403a" }, { "url": "/fonts/vendor/video.js/dist/VideoJS.eot?46ac6629168546c71dbf115992aa4be9" }, { "url": "/fonts/vendor/vue-goodshare/src/fontello.eot?a1386b4bdc2b24439baa8bdd5d89959c" }, { "url": "/fonts/vendor/vue-goodshare/src/fontello.svg?2382f1e627c684dc977d16df37313927" }, { "url": "/fonts/vendor/vue-goodshare/src/fontello.ttf?6eb82fdf9c4acf6f47221c82f77bacda" }, { "url": "/fonts/vendor/vue-goodshare/src/fontello.woff2?24fc0a90fb74e9ac5ef0ec2df3c5deff" }, { "url": "/fonts/vendor/vue-goodshare/src/fontello.woff?a51fe381a51e7d8672467515ea21c366" }, { "revision": "3b4287d70ff9b954bd4e61dc5d84859f", "url": "/images/Profile.png" }, { "revision": "81253a830a11114a1193273cf3abff66", "url": "/images/X-submit.png" }, { "revision": "6638168869f2fe8039a76f1bf0e8bb93", "url": "/images/campaign_categories/Thumbs.db" }, { "revision": "70f78829e74e0585890bc32a5d02a1a2", "url": "/images/campaign_categories/academic_award.jpg" }, { "revision": "a527ccce987d174048b41b3ee224f842", "url": "/images/campaign_categories/accelerator_program.jpg" }, { "revision": "ea6a415e0bfa0396299d5878b9bedc90", "url": "/images/campaign_categories/audience_management.jpg" }, { "revision": "498dcb007045a8e51f19098930b9627d", "url": "/images/campaign_categories/communiry_award.jpg" }, { "revision": "85546813c0409eda399a7992866168eb", "url": "/images/campaign_categories/educational_institution.jpg" }, { "revision": "14bf9f25b8c478f9a37eba77f57d1c7b", "url": "/images/campaign_categories/employee_onboarding.jpg" }, { "revision": "b9398f6d8856c369a7573225849e6f4c", "url": "/images/campaign_categories/employee_survey.jpg" }, { "revision": "e83d193c3e187d23439ef3d1eee4bd28", "url": "/images/campaign_categories/enterprise_asset_management.jpg" }, { "revision": "4f0b52794f3a7ecdfd817a828e225f80", "url": "/images/campaign_categories/enterprise_offices.jpg" }, { "revision": "4348ede5b2a4cd567dab3463661f888f", "url": "/images/campaign_categories/fellowship_application.jpg" }, { "revision": "26492ef3f153ce7de198019e706f3729", "url": "/images/campaign_categories/field_service.jpg" }, { "revision": "62c7daf76295d8b77e532f37ab216db8", "url": "/images/campaign_categories/film_casting.jpg" }, { "revision": "69771eec9bff771c5a8b5942fe5e1b58", "url": "/images/campaign_categories/fleet_management.jpg" }, { "revision": "6190d4d10b375c9f13a6466ea3108a33", "url": "/images/campaign_categories/giveaway.jpg" }, { "revision": "b8bb319e8733f9ca92f1fadb683fa002", "url": "/images/campaign_categories/graduate_program.jpg" }, { "revision": "d3e45b131750b28898bb09f2f6b59fa4", "url": "/images/campaign_categories/incubator_program.jpg" }, { "revision": "a42ffe7c6ecaac09d3a127af6a430c0c", "url": "/images/campaign_categories/industry_assessment.jpg" }, { "revision": "0a6950dfe04b1f93e858c2351fd51e37", "url": "/images/campaign_categories/internal_award.jpg" }, { "revision": "131fbfa7fe4c69cd4696ff3a581cf1fc", "url": "/images/campaign_categories/internship.jpg" }, { "revision": "e4be69cf3cea9bddecc8812907b5b8ec", "url": "/images/campaign_categories/interview_survey.jpg" }, { "revision": "4711648d28dd44ab7e07ca7ec277e3fa", "url": "/images/campaign_categories/job_application.jpg" }, { "revision": "8b3ed79c6d245d44bd12a1315d5861bb", "url": "/images/campaign_categories/marketing_competition.jpg" }, { "revision": "e51b9c71763fd9b15259fa9d2eb41f9e", "url": "/images/campaign_categories/non_profit.jpg" }, { "revision": "fde76d940c2f65c52e1b6d9c23e35994", "url": "/images/campaign_categories/online_judging.jpg" }, { "revision": "64a2c807e007ce227cfff8bdd592bb4e", "url": "/images/campaign_categories/online_voting.jpg" }, { "revision": "cfb7e1f57d969588ebda9ced13934a4a", "url": "/images/campaign_categories/performance_assessment.jpg" }, { "revision": "8c3a28272780452e77d179441a4e1137", "url": "/images/campaign_categories/professional_award.jpg" }, { "revision": "642f301006b2d0d929f54c960228009d", "url": "/images/campaign_categories/program_admission.jpg" }, { "revision": "4a4df433096b6524b067c8934cb15243", "url": "/images/campaign_categories/request_form.jpg" }, { "revision": "edb64d6ea40f38d81af1eb5db9779ff1", "url": "/images/campaign_categories/safety_management.jpg" }, { "revision": "674f5c9a0128f28088a5e84d1e344070", "url": "/images/campaign_categories/scholarship.jpg" }, { "revision": "218bea423d09f570d5cb1d8b0558d078", "url": "/images/campaign_categories/staff_recruitment.jpg" }, { "revision": "2eb163f910ce3937e67e0c0a5298b668", "url": "/images/campaign_categories/stage_casting.jpg" }, { "revision": "46eba3ea3605402c935ba607f0947966", "url": "/images/campaign_categories/state_local_Government.jpg" }, { "revision": "358284bec168fe38332e941b0af6ce65", "url": "/images/campaign_categories/student_grant.jpg" }, { "revision": "60dfc0cc3b9fb7346ada6de55c2ccc1a", "url": "/images/campaign_categories/student_portfolio_assessment.jpg" }, { "revision": "9124eabd633c811de6f5fb99d03157b0", "url": "/images/campaign_categories/student_societies_management.jpg" }, { "revision": "c7b9eabaa0059dc941c157e5a181b1af", "url": "/images/campaign_categories/sweepstakes_contest.jpg" }, { "revision": "f27300ce7f32fcccdc4eb1051bc66f76", "url": "/images/campaign_categories/tv_casting.jpg" }, { "revision": "e835944d6dfc35226c85fd0a012a3eb4", "url": "/images/campaign_type/academic_submission.jpg" }, { "revision": "1c40689c95f4c50bc2b6e70dc8429382", "url": "/images/campaign_type/awards_competition.jpg" }, { "revision": "f02d96942f8e430359c10b25a53afb0a", "url": "/images/campaign_type/field_operation.jpg" }, { "revision": "ae4ed74a388c958ce2c6f75973cafc3c", "url": "/images/campaign_type/grant_management.jpg" }, { "revision": "80e723058ef019e93fe0b9815e9abf2c", "url": "/images/campaign_type/human_resource.jpg" }, { "revision": "be43ad2a1752a4fbc1c47d35986510dd", "url": "/images/campaign_type/tv_creative.jpg" }, { "revision": "66d80bb66ecba51224238a2fa61255bf", "url": "/images/cover1.png" }, { "revision": "24ae6c3603ab12525f784c4695e4a16c", "url": "/images/default-campaign-background.jpg" }, { "revision": "d3e45b131750b28898bb09f2f6b59fa4", "url": "/images/demo.jpg" }, { "revision": "8672feca6084ae8308865a8d76315e82", "url": "/images/home/cta-bg.jpg" }, { "revision": "5bb108ad99b46930234e97aeba1d9c36", "url": "/images/icons/icon-128x128.png" }, { "revision": "bcac35bc022ff204a158d9f64571270c", "url": "/images/icons/icon-144x144.png" }, { "revision": "261c29dbca3b4c95be5b086d80e0342f", "url": "/images/icons/icon-152x152.png" }, { "revision": "acd7199353f0c533a370b8d1a26f65ad", "url": "/images/icons/icon-192x192.png" }, { "revision": "eb58a472c79a7b0b69f61fe7344225a9", "url": "/images/icons/icon-384x384.png" }, { "revision": "dec89a9ff463802f64fb73af44e4c8af", "url": "/images/icons/icon-512x512.png" }, { "revision": "8d42388484564d51d353e98081e8396d", "url": "/images/icons/icon-72x72.png" }, { "revision": "38c3663048c00896726df78ceb7b625a", "url": "/images/icons/icon-96x96.png" }, { "revision": "1e313bcd7806d462e191eb9e71c19c9f", "url": "/images/login-bg.jpg" }, { "revision": "f2bad45ccfcca1304bb999d54cd1bf6a", "url": "/images/unite-the-process.jpg" }, { "revision": "9c74e172f87984c48ddf5c8108cabe67", "url": "/images/vendor/semantic-ui-css/themes/default/flags.png" }, { "revision": "b98efd98a75fae94e66cfabbcf36805b", "url": "/images/vendor/slick-carousel/slick/ajax-loader.gif" }, { "url": "/images/vendor/slick-carousel/slick/ajax-loader.gif?c5cd7f5300576ab4c88202b42f6ded62" }, { "revision": "2b169e261fc22822832d", "url": "/js/modules/@tinymce/tinymce-vue.js" }, { "revision": "895bfdf4b4154838fa11", "url": "/js/modules/campaign.js" }, { "revision": "c86b9cd91933c568b99d", "url": "/js/modules/form.js" }, { "revision": "8bb3bf98b7f6a4f03797", "url": "/js/modules/form/builder.js" }, { "revision": "cd36d2f87ad49edd8589", "url": "/js/modules/form~js/modules/form/builder~js/modules/questionnaire/form/renderer.js" }, { "revision": "e0cbb01807951268e840", "url": "/js/modules/front/catalog.js" }, { "revision": "765d276342e109fe38a4", "url": "/js/modules/front/error.js" }, { "revision": "55da0251ad210b041e07", "url": "/js/modules/front/front.js" }, { "revision": "835e705dfd112a7dad37", "url": "/js/modules/front/front~js/modules/front/home.js" }, { "revision": "b7a3c5e7870c10b42904", "url": "/js/modules/front/home.js" }, { "revision": "2b89029a7ffef28bbb76", "url": "/js/modules/front/voting.js" }, { "revision": "2d1761ca7e1c85ba15f0", "url": "/js/modules/manage.js" }, { "revision": "b4ccb8c2aa4c67dd70f2", "url": "/js/modules/notification.js" }, { "revision": "5c557a2f5e0e7177d0ad", "url": "/js/modules/questionnaire/form/renderer.js" }, { "revision": "991cef8ce7809f331140", "url": "/js/modules/submissions.js" }, { "revision": "748f31e36ce18beabddd", "url": "/js/modules/video.js" }, { "revision": "25218ac3c90251593c8a", "url": "/js/modules/xlsx.js" }, { "revision": "1991ff4315fd7941818f", "url": "/vendors~js/modules/campaign.js" }, { "revision": "63a3dce539dec0c540fb", "url": "/vendors~js/modules/campaign~js/modules/front/voting~js/modules/manage.js" }, { "revision": "b687cafabd74f6c4f4a0", "url": "/vendors~js/modules/campaign~js/modules/front/voting~js/modules/questionnaire/form/renderer.js" }, { "revision": "1e657d82ab6a93806d98", "url": "/vendors~js/modules/dropzone.js" }, { "revision": "5e6a833bb6847d739758", "url": "/vendors~js/modules/form/builder~js/modules/questionnaire/form/renderer.js" }, { "revision": "b008f08ed09e95f00626", "url": "/vendors~js/modules/front/front.js" }, { "revision": "55727bf869f30b23442b", "url": "/vendors~js/modules/front/voting.js" }, { "revision": "8bf2f1f289dcf20cd599", "url": "/vendors~js/modules/gantt-elastic.js" }, { "revision": "2699b2cd12d6cbcd2234", "url": "/vendors~js/modules/video.js" }, { "revision": "f1a926bb27f045c343f6", "url": "/vendors~js/modules/xlsx.js" } ]);

但是，當我注冊服務人員並運行頁面時，我得到了錯誤

service-worker.js:1 Uncaught (in promise) TypeError: Failed to fetch

我已經嘗試了幾件事來查看可能導致它的原因，這似乎是服務工作者頂部的 importScripts 的問題。

我想知道我的服務人員是否有任何問題以及如何修復它。

Answer 1

我遇到了同樣的問題並通過簡單地禁用廣告攔截器瀏覽器擴展來解決它。 在某些情況下，這可能會有所幫助。

Answer 2

你已經解決了這個問題嗎？ 我在 laravel 混合中遇到了完全相同的問題。 請檢查您的預緩存文件。 它看起來像這樣嗎：

self.__precacheManifest = [
{
    "revision": "89c25ce71806a695a25e",
    "url": "//js/app.js"
  },
  {
    "revision": "89c25ce71806a695a25e",
    "url": "//css/app.css"
  }
];

如果是這樣，請查看此修復： Workbox 的預緩存清單文件在 Laravel 混合設置中包含無效的 URL 字符串

將 publicPath 選項添加到您的 webpack 配置中

const { GenerateSW } = require('workbox-webpack-plugin');

mix.webpackConfig({
  plugins: [new GenerateSW()],
  output: {
    publicPath: ''
  }
});

這為我解決了問題！ 希望對你也有幫助

Answer 3

我面臨同樣的問題，在閱讀此https://github.com/GoogleChrome/workbox/issues/689#issuecomment-316470843后解決了

就我而言，使用publicPath:''會導致一些路由器重定向問題。 我使用modifyURLPrefix

modifyURLPrefix: {
    '//': '/'
},