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
node.js service-worker create-react-app progressive-web-apps workbox
add a comment |
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
node.js service-worker create-react-app progressive-web-apps workbox
add a comment |
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
node.js service-worker create-react-app progressive-web-apps workbox
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
node.js service-worker create-react-app progressive-web-apps workbox
asked Nov 8 at 9:56
Daniel Dróżdzel
153
153
add a comment |
add a comment |
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,
},
},
},
}]
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
add a comment |
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,
},
},
},
}]
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
add a comment |
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,
},
},
},
}]
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
add a comment |
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,
},
},
},
}]
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,
},
},
},
}]
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
add a comment |
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
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password