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

Question

I am trying to setup my service worker using Workbox through the Workbox Webpack plugin, however. Below is my Workbox config

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

Below is the service worker that gets generated

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,
                })
            ],
        })
    );
}

and this is the /js/wb-manifest.52d5032189ed9e06abfcddfea1d2c06f.js file content

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"
  }
]);

However when I register the service worker and run the page I get the error

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

I have tried a couple of things to see what might be causing it, and it seems to be an issue with the importScripts at the top of the service worker.

I'd like to know if there is anything wrong with my service worker and how to get it fixed.

Answer 1

I got the same problem and fixed it by simply disabling the ad blocker browser extension. In some cases this may be helpful.

Answer 2

Have you already fixed the problem? I was experiencing the exact same issue in laravel mix. Please check out your precaching file. Does it look like this:

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

If so, please check out this fix: Workbox's precache manifest file contains invalid URL strings in Laravel Mix setting

Add the publicPath option to your webpack config

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

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

That fixed the issue for me! Hope it helpes you too