PWA localhost network failure in Chromium
I'm currently working on integrating a Service-Worker in my application. But I have problems when I want to test it on my local machine.
The caching in the install-Event is failing. I searched for the error for two days but I don't have ideas anymore. When I deploy the site on e.g. netlify everything works fine.
That's what the network tab is giving me:
Developer console is printing:
Browser: Chromium Version 70.0.3538.77 (Official Build)
I activated #allow-insecure-localhost in the chrome flags. Webpack is serving over https://localhost:8081 (with a self-signed certificate). If I right click the failed network requests and click Open in new tab everything works fine.
The weird thing is that the failing files are changing every time.
Code in my index.jsx (entry point for webpack):
...
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker
.register('/serviceWorker.js', { scope: "/" })
.then(e => {
console.log('Service Worker Registered');
console.log(e);
})
.catch(e => {
console.log("Service Worker fail");
console.log(e);
})
});
}
...
Code in my serviceWorker.js
let cacheName = 'test';
let cachedURLs = [
"/",
"/bundle.js",
"/manifest.webmanifest",
"/favicon.ico",
"/favicon-256.png"
];
self.addEventListener('install', function(e) {
console.log('[ServiceWorker] Install');
e.waitUntil(
caches.open(cacheName).then(function(cache) {
console.log('[ServiceWorker] Caching app shell');
return cache.addAll(cachedURLs);
})
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});
Edit: As mentioned in the comments I added a catch-block to the cache.addAll:
return cache.addAll(cachedURLs).catch(err => console.log('error: ', err));
But unfortunately it isn't more verbose:
error: TypeError: Failed to fetch
For completeness this is what Chromium is reporting for a failed request (in this case it is the bundle.js)
javascript reactjs webpack service-worker progressive-web-apps
asked Nov 22 '18 at 8:20
DirkDirk
115
|
show 3 more comments
I'm currently working on integrating a Service-Worker in my application. But I have problems when I want to test it on my local machine.
The caching in the install-Event is failing. I searched for the error for two days but I don't have ideas anymore. When I deploy the site on e.g. netlify everything works fine.
That's what the network tab is giving me:
Developer console is printing:
Browser: Chromium Version 70.0.3538.77 (Official Build)
I activated #allow-insecure-localhost in the chrome flags. Webpack is serving over https://localhost:8081 (with a self-signed certificate). If I right click the failed network requests and click Open in new tab everything works fine.
The weird thing is that the failing files are changing every time.
Code in my index.jsx (entry point for webpack):
...
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker
.register('/serviceWorker.js', { scope: "/" })
.then(e => {
console.log('Service Worker Registered');
console.log(e);
})
.catch(e => {
console.log("Service Worker fail");
console.log(e);
})
});
}
...
Code in my serviceWorker.js
let cacheName = 'test';
let cachedURLs = [
"/",
"/bundle.js",
"/manifest.webmanifest",
"/favicon.ico",
"/favicon-256.png"
];
self.addEventListener('install', function(e) {
console.log('[ServiceWorker] Install');
e.waitUntil(
caches.open(cacheName).then(function(cache) {
console.log('[ServiceWorker] Caching app shell');
return cache.addAll(cachedURLs);
})
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});
Edit: As mentioned in the comments I added a catch-block to the cache.addAll:
return cache.addAll(cachedURLs).catch(err => console.log('error: ', err));
But unfortunately it isn't more verbose:
error: TypeError: Failed to fetch
For completeness this is what Chromium is reporting for a failed request (in this case it is the bundle.js)
javascript reactjs webpack service-worker progressive-web-apps
asked Nov 22 '18 at 8:20
DirkDirk
115
Hi, could you add acatchblock to your promise in thefetchevent-listener:.catch(err => console.log('error: ', err)));Maybe it'll be more expressive
– t3__rry
Nov 22 '18 at 8:26
I had similar setup, but not having the window.addEventListener('load', ... in index.jsx. Also take care all cachedURLs should exist.
– Niels Steenbeek
Nov 22 '18 at 8:27
@t3__rry Yep, but this doesn't change anything, because thefetch-listener is never fired when initial rendering the page. The error is thrown in theinstall-listener (when caching the files withcache.addAll). @Niels: Every file/URL exists, as I already pointed out in my post. I can load them if I open the failed requests.
– Dirk
Nov 22 '18 at 8:36
@Dirk ok, did you try adding acatchblock to theinstalllistener then?
– t3__rry
Nov 22 '18 at 8:52
@t3__rry Yep, I tried it, but it doesn't give more insights. I updated my post and added a screenshot of a failed requests. Does this help?
– Dirk
Nov 22 '18 at 9:50
|
show 3 more comments
I'm currently working on integrating a Service-Worker in my application. But I have problems when I want to test it on my local machine.
The caching in the install-Event is failing. I searched for the error for two days but I don't have ideas anymore. When I deploy the site on e.g. netlify everything works fine.
That's what the network tab is giving me:
Developer console is printing:
Browser: Chromium Version 70.0.3538.77 (Official Build)
I activated #allow-insecure-localhost in the chrome flags. Webpack is serving over https://localhost:8081 (with a self-signed certificate). If I right click the failed network requests and click Open in new tab everything works fine.
The weird thing is that the failing files are changing every time.
Code in my index.jsx (entry point for webpack):
...
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker
.register('/serviceWorker.js', { scope: "/" })
.then(e => {
console.log('Service Worker Registered');
console.log(e);
})
.catch(e => {
console.log("Service Worker fail");
console.log(e);
})
});
}
...
Code in my serviceWorker.js
let cacheName = 'test';
let cachedURLs = [
"/",
"/bundle.js",
"/manifest.webmanifest",
"/favicon.ico",
"/favicon-256.png"
];
self.addEventListener('install', function(e) {
console.log('[ServiceWorker] Install');
e.waitUntil(
caches.open(cacheName).then(function(cache) {
console.log('[ServiceWorker] Caching app shell');
return cache.addAll(cachedURLs);
})
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});
Edit: As mentioned in the comments I added a catch-block to the cache.addAll:
return cache.addAll(cachedURLs).catch(err => console.log('error: ', err));
But unfortunately it isn't more verbose:
error: TypeError: Failed to fetch
For completeness this is what Chromium is reporting for a failed request (in this case it is the bundle.js)
javascript reactjs webpack service-worker progressive-web-apps
asked Nov 22 '18 at 8:20
DirkDirk
115
I'm currently working on integrating a Service-Worker in my application. But I have problems when I want to test it on my local machine.
The caching in the install-Event is failing. I searched for the error for two days but I don't have ideas anymore. When I deploy the site on e.g. netlify everything works fine.
That's what the network tab is giving me:
Developer console is printing:
Browser: Chromium Version 70.0.3538.77 (Official Build)
I activated #allow-insecure-localhost in the chrome flags. Webpack is serving over https://localhost:8081 (with a self-signed certificate). If I right click the failed network requests and click Open in new tab everything works fine.
The weird thing is that the failing files are changing every time.
Code in my index.jsx (entry point for webpack):
...
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker
.register('/serviceWorker.js', { scope: "/" })
.then(e => {
console.log('Service Worker Registered');
console.log(e);
})
.catch(e => {
console.log("Service Worker fail");
console.log(e);
})
});
}
...
Code in my serviceWorker.js
let cacheName = 'test';
let cachedURLs = [
"/",
"/bundle.js",
"/manifest.webmanifest",
"/favicon.ico",
"/favicon-256.png"
];
self.addEventListener('install', function(e) {
console.log('[ServiceWorker] Install');
e.waitUntil(
caches.open(cacheName).then(function(cache) {
console.log('[ServiceWorker] Caching app shell');
return cache.addAll(cachedURLs);
})
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});
Edit: As mentioned in the comments I added a catch-block to the cache.addAll:
return cache.addAll(cachedURLs).catch(err => console.log('error: ', err));
But unfortunately it isn't more verbose:
error: TypeError: Failed to fetch
For completeness this is what Chromium is reporting for a failed request (in this case it is the bundle.js)
javascript reactjs webpack service-worker progressive-web-apps
javascript reactjs webpack service-worker progressive-web-apps
asked Nov 22 '18 at 8:20
DirkDirk
115
asked Nov 22 '18 at 8:20
DirkDirk
115
edited Nov 22 '18 at 9:49
Dirk
asked Nov 22 '18 at 8:20
DirkDirk
115
asked Nov 22 '18 at 8:20
DirkDirk
115
asked Nov 22 '18 at 8:20
DirkDirk
115
115
Hi, could you add acatchblock to your promise in thefetchevent-listener:.catch(err => console.log('error: ', err)));Maybe it'll be more expressive
– t3__rry
Nov 22 '18 at 8:26
I had similar setup, but not having the window.addEventListener('load', ... in index.jsx. Also take care all cachedURLs should exist.
– Niels Steenbeek
Nov 22 '18 at 8:27
@t3__rry Yep, but this doesn't change anything, because thefetch-listener is never fired when initial rendering the page. The error is thrown in theinstall-listener (when caching the files withcache.addAll). @Niels: Every file/URL exists, as I already pointed out in my post. I can load them if I open the failed requests.
– Dirk
Nov 22 '18 at 8:36
@Dirk ok, did you try adding acatchblock to theinstalllistener then?
– t3__rry
Nov 22 '18 at 8:52
@t3__rry Yep, I tried it, but it doesn't give more insights. I updated my post and added a screenshot of a failed requests. Does this help?
– Dirk
Nov 22 '18 at 9:50
|
show 3 more comments
Hi, could you add acatchblock to your promise in thefetchevent-listener:.catch(err => console.log('error: ', err)));Maybe it'll be more expressive
– t3__rry
Nov 22 '18 at 8:26
I had similar setup, but not having the window.addEventListener('load', ... in index.jsx. Also take care all cachedURLs should exist.
– Niels Steenbeek
Nov 22 '18 at 8:27
@t3__rry Yep, but this doesn't change anything, because thefetch-listener is never fired when initial rendering the page. The error is thrown in theinstall-listener (when caching the files withcache.addAll). @Niels: Every file/URL exists, as I already pointed out in my post. I can load them if I open the failed requests.
– Dirk
Nov 22 '18 at 8:36
@Dirk ok, did you try adding acatchblock to theinstalllistener then?
– t3__rry
Nov 22 '18 at 8:52
@t3__rry Yep, I tried it, but it doesn't give more insights. I updated my post and added a screenshot of a failed requests. Does this help?
– Dirk
Nov 22 '18 at 9:50
Hi, could you add a
catch block to your promise in the fetch event-listener: .catch(err => console.log('error: ', err))); Maybe it'll be more expressive– t3__rry
Nov 22 '18 at 8:26
Hi, could you add a
catch block to your promise in the fetch event-listener: .catch(err => console.log('error: ', err))); Maybe it'll be more expressive– t3__rry
Nov 22 '18 at 8:26
I had similar setup, but not having the window.addEventListener('load', ... in index.jsx. Also take care all cachedURLs should exist.
– Niels Steenbeek
Nov 22 '18 at 8:27
I had similar setup, but not having the window.addEventListener('load', ... in index.jsx. Also take care all cachedURLs should exist.
– Niels Steenbeek
Nov 22 '18 at 8:27
@t3__rry Yep, but this doesn't change anything, because the
fetch-listener is never fired when initial rendering the page. The error is thrown in the install-listener (when caching the files with cache.addAll). @Niels: Every file/URL exists, as I already pointed out in my post. I can load them if I open the failed requests.– Dirk
Nov 22 '18 at 8:36
@t3__rry Yep, but this doesn't change anything, because the
fetch-listener is never fired when initial rendering the page. The error is thrown in the install-listener (when caching the files with cache.addAll). @Niels: Every file/URL exists, as I already pointed out in my post. I can load them if I open the failed requests.– Dirk
Nov 22 '18 at 8:36
@Dirk ok, did you try adding a
catch block to the install listener then?– t3__rry
Nov 22 '18 at 8:52
@Dirk ok, did you try adding a
catch block to the install listener then?– t3__rry
Nov 22 '18 at 8:52
@t3__rry Yep, I tried it, but it doesn't give more insights. I updated my post and added a screenshot of a failed requests. Does this help?
– Dirk
Nov 22 '18 at 9:50
@t3__rry Yep, I tried it, but it doesn't give more insights. I updated my post and added a screenshot of a failed requests. Does this help?
– Dirk
Nov 22 '18 at 9:50
|
show 3 more comments
0
active
oldest
votes
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%2f53426570%2fpwa-localhost-network-failure-in-chromium%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f53426570%2fpwa-localhost-network-failure-in-chromium%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
Hi, could you add a
catchblock to your promise in thefetchevent-listener:.catch(err => console.log('error: ', err)));Maybe it'll be more expressive– t3__rry
Nov 22 '18 at 8:26
I had similar setup, but not having the window.addEventListener('load', ... in index.jsx. Also take care all cachedURLs should exist.
– Niels Steenbeek
Nov 22 '18 at 8:27
@t3__rry Yep, but this doesn't change anything, because the
fetch-listener is never fired when initial rendering the page. The error is thrown in theinstall-listener (when caching the files withcache.addAll). @Niels: Every file/URL exists, as I already pointed out in my post. I can load them if I open the failed requests.– Dirk
Nov 22 '18 at 8:36
@Dirk ok, did you try adding a
catchblock to theinstalllistener then?– t3__rry
Nov 22 '18 at 8:52
@t3__rry Yep, I tried it, but it doesn't give more insights. I updated my post and added a screenshot of a failed requests. Does this help?
– Dirk
Nov 22 '18 at 9:50