How to add background-sync-plugin to workbox-build











up vote
0
down vote

favorite












I've got question regarding workbox and create-react-app v2.
I'm using workbox-build to generate custom service worker, and there is a problem with injecting



const backgroundSync = new workbox.backgroundSync.Plugin('ticketsQueue', {
maxRetentionTime: 24 * 60 // Retry for max of 24 Hours
});


const buildSW = () =>
workboxBuild.generateSW({
globDirectory: 'build',
// importWorkboxFrom: 'local',
globPatterns: ['**/*.{json,ico,html,js,css,woff2,woff,png,svg}'],
globIgnores: ['asset-manifest.json'],
skipWaiting: true,
clientsClaim: true,
swDest: 'build/sw.js',
navigateFallback: 'index.html',
directoryIndex: 'index.html',
runtimeCaching: [
{
urlPattern: new RegExp(`^${apiUrl}/tickets/create`),
handler: 'networkOnly',
options: {
plugins: [
backgroundSync
]
},
method: 'POST'
},
]
});

buildSW();


When I try too execute buildSW() with nodejs it gives a reference error.
ReferenceError: workbox is not defined
How to include it? Or is there any other way?
Thanks










share|improve this question


























    up vote
    0
    down vote

    favorite












    I've got question regarding workbox and create-react-app v2.
    I'm using workbox-build to generate custom service worker, and there is a problem with injecting



    const backgroundSync = new workbox.backgroundSync.Plugin('ticketsQueue', {
    maxRetentionTime: 24 * 60 // Retry for max of 24 Hours
    });


    const buildSW = () =>
    workboxBuild.generateSW({
    globDirectory: 'build',
    // importWorkboxFrom: 'local',
    globPatterns: ['**/*.{json,ico,html,js,css,woff2,woff,png,svg}'],
    globIgnores: ['asset-manifest.json'],
    skipWaiting: true,
    clientsClaim: true,
    swDest: 'build/sw.js',
    navigateFallback: 'index.html',
    directoryIndex: 'index.html',
    runtimeCaching: [
    {
    urlPattern: new RegExp(`^${apiUrl}/tickets/create`),
    handler: 'networkOnly',
    options: {
    plugins: [
    backgroundSync
    ]
    },
    method: 'POST'
    },
    ]
    });

    buildSW();


    When I try too execute buildSW() with nodejs it gives a reference error.
    ReferenceError: workbox is not defined
    How to include it? Or is there any other way?
    Thanks










    share|improve this question
























      up vote
      0
      down vote

      favorite









      up vote
      0
      down vote

      favorite











      I've got question regarding workbox and create-react-app v2.
      I'm using workbox-build to generate custom service worker, and there is a problem with injecting



      const backgroundSync = new workbox.backgroundSync.Plugin('ticketsQueue', {
      maxRetentionTime: 24 * 60 // Retry for max of 24 Hours
      });


      const buildSW = () =>
      workboxBuild.generateSW({
      globDirectory: 'build',
      // importWorkboxFrom: 'local',
      globPatterns: ['**/*.{json,ico,html,js,css,woff2,woff,png,svg}'],
      globIgnores: ['asset-manifest.json'],
      skipWaiting: true,
      clientsClaim: true,
      swDest: 'build/sw.js',
      navigateFallback: 'index.html',
      directoryIndex: 'index.html',
      runtimeCaching: [
      {
      urlPattern: new RegExp(`^${apiUrl}/tickets/create`),
      handler: 'networkOnly',
      options: {
      plugins: [
      backgroundSync
      ]
      },
      method: 'POST'
      },
      ]
      });

      buildSW();


      When I try too execute buildSW() with nodejs it gives a reference error.
      ReferenceError: workbox is not defined
      How to include it? Or is there any other way?
      Thanks










      share|improve this question













      I've got question regarding workbox and create-react-app v2.
      I'm using workbox-build to generate custom service worker, and there is a problem with injecting



      const backgroundSync = new workbox.backgroundSync.Plugin('ticketsQueue', {
      maxRetentionTime: 24 * 60 // Retry for max of 24 Hours
      });


      const buildSW = () =>
      workboxBuild.generateSW({
      globDirectory: 'build',
      // importWorkboxFrom: 'local',
      globPatterns: ['**/*.{json,ico,html,js,css,woff2,woff,png,svg}'],
      globIgnores: ['asset-manifest.json'],
      skipWaiting: true,
      clientsClaim: true,
      swDest: 'build/sw.js',
      navigateFallback: 'index.html',
      directoryIndex: 'index.html',
      runtimeCaching: [
      {
      urlPattern: new RegExp(`^${apiUrl}/tickets/create`),
      handler: 'networkOnly',
      options: {
      plugins: [
      backgroundSync
      ]
      },
      method: 'POST'
      },
      ]
      });

      buildSW();


      When I try too execute buildSW() with nodejs it gives a reference error.
      ReferenceError: workbox is not defined
      How to include it? Or is there any other way?
      Thanks







      node.js service-worker create-react-app progressive-web-apps workbox






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 8 at 9:56









      Daniel Dróżdzel

      153




      153
























          1 Answer
          1






          active

          oldest

          votes

















          up vote
          2
          down vote



          accepted










          There are a couple of options.



          First, you can switch to using injectManifest mode, and have complete control over your service worker, relying on the build tool to just inject the array of files to precache.



          Second, there is a shortcut options property that simplifies adding in the background sync plugin. The config looks something like:



          runtimeCaching: [{
          // Match any same-origin request that contains 'api'.
          urlPattern: /api/,
          handler: 'networkOnly',
          options: {
          backgroundSync: {
          name: 'my-queue-name',
          options: {
          maxRetentionTime: 60 * 60,
          },
          },
          },
          }]





          share|improve this answer





















          • Thanks for anwser. Last week I didn't saw this option in documentation :) However after trying this out I noticed that generated Service Worker don't pass callbacks functions for queueDidReplay if you put it in options
            – Daniel Dróżdzel
            19 hours ago













          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














           

          draft saved


          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53205288%2fhow-to-add-background-sync-plugin-to-workbox-build%23new-answer', 'question_page');
          }
          );

          Post as a guest
































          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes








          up vote
          2
          down vote



          accepted










          There are a couple of options.



          First, you can switch to using injectManifest mode, and have complete control over your service worker, relying on the build tool to just inject the array of files to precache.



          Second, there is a shortcut options property that simplifies adding in the background sync plugin. The config looks something like:



          runtimeCaching: [{
          // Match any same-origin request that contains 'api'.
          urlPattern: /api/,
          handler: 'networkOnly',
          options: {
          backgroundSync: {
          name: 'my-queue-name',
          options: {
          maxRetentionTime: 60 * 60,
          },
          },
          },
          }]





          share|improve this answer





















          • Thanks for anwser. Last week I didn't saw this option in documentation :) However after trying this out I noticed that generated Service Worker don't pass callbacks functions for queueDidReplay if you put it in options
            – Daniel Dróżdzel
            19 hours ago

















          up vote
          2
          down vote



          accepted










          There are a couple of options.



          First, you can switch to using injectManifest mode, and have complete control over your service worker, relying on the build tool to just inject the array of files to precache.



          Second, there is a shortcut options property that simplifies adding in the background sync plugin. The config looks something like:



          runtimeCaching: [{
          // Match any same-origin request that contains 'api'.
          urlPattern: /api/,
          handler: 'networkOnly',
          options: {
          backgroundSync: {
          name: 'my-queue-name',
          options: {
          maxRetentionTime: 60 * 60,
          },
          },
          },
          }]





          share|improve this answer





















          • Thanks for anwser. Last week I didn't saw this option in documentation :) However after trying this out I noticed that generated Service Worker don't pass callbacks functions for queueDidReplay if you put it in options
            – Daniel Dróżdzel
            19 hours ago















          up vote
          2
          down vote



          accepted







          up vote
          2
          down vote



          accepted






          There are a couple of options.



          First, you can switch to using injectManifest mode, and have complete control over your service worker, relying on the build tool to just inject the array of files to precache.



          Second, there is a shortcut options property that simplifies adding in the background sync plugin. The config looks something like:



          runtimeCaching: [{
          // Match any same-origin request that contains 'api'.
          urlPattern: /api/,
          handler: 'networkOnly',
          options: {
          backgroundSync: {
          name: 'my-queue-name',
          options: {
          maxRetentionTime: 60 * 60,
          },
          },
          },
          }]





          share|improve this answer












          There are a couple of options.



          First, you can switch to using injectManifest mode, and have complete control over your service worker, relying on the build tool to just inject the array of files to precache.



          Second, there is a shortcut options property that simplifies adding in the background sync plugin. The config looks something like:



          runtimeCaching: [{
          // Match any same-origin request that contains 'api'.
          urlPattern: /api/,
          handler: 'networkOnly',
          options: {
          backgroundSync: {
          name: 'my-queue-name',
          options: {
          maxRetentionTime: 60 * 60,
          },
          },
          },
          }]






          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 8 at 17:29









          Jeff Posnick

          28k46091




          28k46091












          • Thanks for anwser. Last week I didn't saw this option in documentation :) However after trying this out I noticed that generated Service Worker don't pass callbacks functions for queueDidReplay if you put it in options
            – Daniel Dróżdzel
            19 hours ago




















          • Thanks for anwser. Last week I didn't saw this option in documentation :) However after trying this out I noticed that generated Service Worker don't pass callbacks functions for queueDidReplay if you put it in options
            – Daniel Dróżdzel
            19 hours ago


















          Thanks for anwser. Last week I didn't saw this option in documentation :) However after trying this out I noticed that generated Service Worker don't pass callbacks functions for queueDidReplay if you put it in options
          – Daniel Dróżdzel
          19 hours ago






          Thanks for anwser. Last week I didn't saw this option in documentation :) However after trying this out I noticed that generated Service Worker don't pass callbacks functions for queueDidReplay if you put it in options
          – Daniel Dróżdzel
          19 hours ago




















           

          draft saved


          draft discarded



















































           


          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53205288%2fhow-to-add-background-sync-plugin-to-workbox-build%23new-answer', 'question_page');
          }
          );

          Post as a guest




















































































          Popular posts from this blog

          Schultheiß

          Verwaltungsgliederung Dänemarks

          Liste der Kulturdenkmale in Wilsdruff