Mixing
Mixing cacheFirst and networkOnly inside of a stream strategy never hits the network
I want to create a stream of HTML so that some of the stream sources are from the cache, but one is always pulled from the network. That one has a script tag in it that will always have the most up-to-date hash on it. So that way part of my page is cached by the sw but part is still following traditional cache busting patterns.
Code
const partialStrategy = workbox.strategies['cacheFirst']({
cacheName: 'empath-static',
});
const fragmentStrategy = workbox.strategies.networkOnly();
workbox.routing.registerRoute(
routeTemplate('/pages/:domain/:container/:app'),
workbox.streams.strategy([
() => partialStrategy.makeRequest({ request: 'partials/head.html' }),
() => partialStrategy.makeRequest({ request: 'header/header.html' }),
({ params }) => fragmentStrategy.makeRequest({
request: `${params.domain}/${params.container}/${params.app}/${params.app}.html`,
}),
() => partialStrategy.makeRequest({ request: 'partials/foot.html' }),
])
);
However that source always seems to come from the browser cache (or at least I'm assuming its the browser cache since its not in Workbox's cache at all).
I don't see Workbox making an individual request for that data in the network tab (like appears in the workbox demo here).
Is there something special you have to do to make the stream always go get the data from the server?
javascript workbox
edited Nov 20 '18 at 2:20
customcommander
1,276719
asked Nov 19 '18 at 21:44
BradlyFBradlyF
1
add a comment |
I want to create a stream of HTML so that some of the stream sources are from the cache, but one is always pulled from the network. That one has a script tag in it that will always have the most up-to-date hash on it. So that way part of my page is cached by the sw but part is still following traditional cache busting patterns.
Code
const partialStrategy = workbox.strategies['cacheFirst']({
cacheName: 'empath-static',
});
const fragmentStrategy = workbox.strategies.networkOnly();
workbox.routing.registerRoute(
routeTemplate('/pages/:domain/:container/:app'),
workbox.streams.strategy([
() => partialStrategy.makeRequest({ request: 'partials/head.html' }),
() => partialStrategy.makeRequest({ request: 'header/header.html' }),
({ params }) => fragmentStrategy.makeRequest({
request: `${params.domain}/${params.container}/${params.app}/${params.app}.html`,
}),
() => partialStrategy.makeRequest({ request: 'partials/foot.html' }),
])
);
However that source always seems to come from the browser cache (or at least I'm assuming its the browser cache since its not in Workbox's cache at all).
I don't see Workbox making an individual request for that data in the network tab (like appears in the workbox demo here).
Is there something special you have to do to make the stream always go get the data from the server?
javascript workbox
edited Nov 20 '18 at 2:20
customcommander
1,276719
asked Nov 19 '18 at 21:44
BradlyFBradlyF
1
add a comment |
I want to create a stream of HTML so that some of the stream sources are from the cache, but one is always pulled from the network. That one has a script tag in it that will always have the most up-to-date hash on it. So that way part of my page is cached by the sw but part is still following traditional cache busting patterns.
Code
const partialStrategy = workbox.strategies['cacheFirst']({
cacheName: 'empath-static',
});
const fragmentStrategy = workbox.strategies.networkOnly();
workbox.routing.registerRoute(
routeTemplate('/pages/:domain/:container/:app'),
workbox.streams.strategy([
() => partialStrategy.makeRequest({ request: 'partials/head.html' }),
() => partialStrategy.makeRequest({ request: 'header/header.html' }),
({ params }) => fragmentStrategy.makeRequest({
request: `${params.domain}/${params.container}/${params.app}/${params.app}.html`,
}),
() => partialStrategy.makeRequest({ request: 'partials/foot.html' }),
])
);
However that source always seems to come from the browser cache (or at least I'm assuming its the browser cache since its not in Workbox's cache at all).
I don't see Workbox making an individual request for that data in the network tab (like appears in the workbox demo here).
Is there something special you have to do to make the stream always go get the data from the server?
javascript workbox
edited Nov 20 '18 at 2:20
customcommander
1,276719
asked Nov 19 '18 at 21:44
BradlyFBradlyF
1
I want to create a stream of HTML so that some of the stream sources are from the cache, but one is always pulled from the network. That one has a script tag in it that will always have the most up-to-date hash on it. So that way part of my page is cached by the sw but part is still following traditional cache busting patterns.
Code
const partialStrategy = workbox.strategies['cacheFirst']({
cacheName: 'empath-static',
});
const fragmentStrategy = workbox.strategies.networkOnly();
workbox.routing.registerRoute(
routeTemplate('/pages/:domain/:container/:app'),
workbox.streams.strategy([
() => partialStrategy.makeRequest({ request: 'partials/head.html' }),
() => partialStrategy.makeRequest({ request: 'header/header.html' }),
({ params }) => fragmentStrategy.makeRequest({
request: `${params.domain}/${params.container}/${params.app}/${params.app}.html`,
}),
() => partialStrategy.makeRequest({ request: 'partials/foot.html' }),
])
);
However that source always seems to come from the browser cache (or at least I'm assuming its the browser cache since its not in Workbox's cache at all).
I don't see Workbox making an individual request for that data in the network tab (like appears in the workbox demo here).
Is there something special you have to do to make the stream always go get the data from the server?
javascript workbox
javascript workbox
edited Nov 20 '18 at 2:20
customcommander
1,276719
asked Nov 19 '18 at 21:44
BradlyFBradlyF
1
edited Nov 20 '18 at 2:20
customcommander
1,276719
asked Nov 19 '18 at 21:44
BradlyFBradlyF
1
edited Nov 20 '18 at 2:20
customcommander
1,276719
edited Nov 20 '18 at 2:20
customcommander
1,276719
edited Nov 20 '18 at 2:20
customcommander
1,276719
1,276719
asked Nov 19 '18 at 21:44
BradlyFBradlyF
1
asked Nov 19 '18 at 21:44
BradlyFBradlyF
1
asked Nov 19 '18 at 21:44
BradlyFBradlyF
1
1
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
I think your question boils down to taking this bit of code:
({ params }) => fragmentStrategy.makeRequest({
request: `${params.domain}/${params.container}/${params.app}/${params.app}.html`,
}),
and making sure that it always skips the browser's HTTP cache and actually goes against the network. Is that correct?
If so, the way to do that would be to pass in an actual Request object instead of a URL string for the named request parameter to makeRequest(). In that Request object, you can set the cache mode to 'no-store' to ensure that the HTTP cache is completely avoided.
That would look something like:
({ params }) => {
const noStoreRequest = new Request(
`${params.domain}/${params.container}/${params.app}/${params.app}.html`,
{cache: 'no-store'}
);
return fragmentStrategy.makeRequest({request: noStoreRequest});
},
answered Nov 20 '18 at 21:42
Jeff PosnickJeff Posnick
29.1k46092
add a comment |
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',
autoActivateHeartbeat: false,
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
});
}
});
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
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53383079%2fmixing-cachefirst-and-networkonly-inside-of-a-stream-strategy-never-hits-the-net%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I think your question boils down to taking this bit of code:
({ params }) => fragmentStrategy.makeRequest({
request: `${params.domain}/${params.container}/${params.app}/${params.app}.html`,
}),
and making sure that it always skips the browser's HTTP cache and actually goes against the network. Is that correct?
If so, the way to do that would be to pass in an actual Request object instead of a URL string for the named request parameter to makeRequest(). In that Request object, you can set the cache mode to 'no-store' to ensure that the HTTP cache is completely avoided.
That would look something like:
({ params }) => {
const noStoreRequest = new Request(
`${params.domain}/${params.container}/${params.app}/${params.app}.html`,
{cache: 'no-store'}
);
return fragmentStrategy.makeRequest({request: noStoreRequest});
},
answered Nov 20 '18 at 21:42
Jeff PosnickJeff Posnick
29.1k46092
add a comment |
I think your question boils down to taking this bit of code:
({ params }) => fragmentStrategy.makeRequest({
request: `${params.domain}/${params.container}/${params.app}/${params.app}.html`,
}),
and making sure that it always skips the browser's HTTP cache and actually goes against the network. Is that correct?
If so, the way to do that would be to pass in an actual Request object instead of a URL string for the named request parameter to makeRequest(). In that Request object, you can set the cache mode to 'no-store' to ensure that the HTTP cache is completely avoided.
That would look something like:
({ params }) => {
const noStoreRequest = new Request(
`${params.domain}/${params.container}/${params.app}/${params.app}.html`,
{cache: 'no-store'}
);
return fragmentStrategy.makeRequest({request: noStoreRequest});
},
answered Nov 20 '18 at 21:42
Jeff PosnickJeff Posnick
29.1k46092
add a comment |
I think your question boils down to taking this bit of code:
({ params }) => fragmentStrategy.makeRequest({
request: `${params.domain}/${params.container}/${params.app}/${params.app}.html`,
}),
and making sure that it always skips the browser's HTTP cache and actually goes against the network. Is that correct?
If so, the way to do that would be to pass in an actual Request object instead of a URL string for the named request parameter to makeRequest(). In that Request object, you can set the cache mode to 'no-store' to ensure that the HTTP cache is completely avoided.
That would look something like:
({ params }) => {
const noStoreRequest = new Request(
`${params.domain}/${params.container}/${params.app}/${params.app}.html`,
{cache: 'no-store'}
);
return fragmentStrategy.makeRequest({request: noStoreRequest});
},
answered Nov 20 '18 at 21:42
Jeff PosnickJeff Posnick
29.1k46092
I think your question boils down to taking this bit of code:
({ params }) => fragmentStrategy.makeRequest({
request: `${params.domain}/${params.container}/${params.app}/${params.app}.html`,
}),
and making sure that it always skips the browser's HTTP cache and actually goes against the network. Is that correct?
If so, the way to do that would be to pass in an actual Request object instead of a URL string for the named request parameter to makeRequest(). In that Request object, you can set the cache mode to 'no-store' to ensure that the HTTP cache is completely avoided.
That would look something like:
({ params }) => {
const noStoreRequest = new Request(
`${params.domain}/${params.container}/${params.app}/${params.app}.html`,
{cache: 'no-store'}
);
return fragmentStrategy.makeRequest({request: noStoreRequest});
},
answered Nov 20 '18 at 21:42
Jeff PosnickJeff Posnick
29.1k46092
answered Nov 20 '18 at 21:42
Jeff PosnickJeff Posnick
29.1k46092
answered Nov 20 '18 at 21:42
Jeff PosnickJeff Posnick
29.1k46092
answered Nov 20 '18 at 21:42
Jeff PosnickJeff Posnick
29.1k46092
29.1k46092
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53383079%2fmixing-cachefirst-and-networkonly-inside-of-a-stream-strategy-never-hits-the-net%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
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
Required, but never shown
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
Required, but never shown
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
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
