Using backgroundFetch in pwa.



  • Hello i want to try backgroundFetch in my pwa app.
    The final idea is to have array of object with links and some additional data and store them in indexdb. I did that using axios.
    However i would like to try that with backgroundFetch.
    In config:

    workboxPluginMode: "InjectManifest",
    workboxOptions: {},
    

    Now my: custom-service-worker

    import { precacheAndRoute } from "workbox-precaching";
    import { register } from "register-service-worker";
    import { newContentAvailable } from "src/services/notification/notyfication";
    import { i18n } from "boot/i18n";
    
    precacheAndRoute(self.__WB_MANIFEST);
    console.log("custom sw11");
    
    register(process.env.SERVICE_WORKER_FILE, {
      updated(/* registration */) {
        console.log("New content is available; please refresh.bzzzz");
        newContentAvailable(i18n.t("newContentAvailable"));
      },
    });
    
    self.addEventListener("backgroundfetchsuccess", (event) => {
      console.log("[Service Worker]: Background Fetch Success", event.registration);
    });
    self.addEventListener("backgroundfetchfail", (event) => {
      console.log("backgroundfetchfail", event);
    });
    
    self.addEventListener("backgroundfetchabort", (event) => {
      console.log("backgroundfetchabort", event);
    });
    
    self.addEventListener("install", (event) => {
      console.log("install", event);
    });
    

    However when i build app and deploy i can see message from: register-service-worker.js

    Service worker is active.
    Service worker has been registered.
    

    When in dev tools i unregister it i get new messages from custom-service-worker . However when refresh again thaere is back that 2 messages above. Then when i start download file:

      navigator.serviceWorker.ready.then(async (swReg) => {
        console.log("swReg", swReg.backgroundFetch);
        const bgFetch = await swReg.backgroundFetch.fetch(
          "my-fetch",
          ["url"],
          {
            title: "index",
            // icons: [
            //   {
            //     sizes: "300x300",
            //     src: "/ep-5-icon.png",
            //     type: "image/png",
            //   },
            // ],
            downloadTotal: 512,
          }
        );
    


    It never finish and event only fire backgroundfetchabort

    Any one know maybe why ?


Log in to reply