Service Worker is not getting registered as I'm getting the error "a bad http response code 404 was received when fetching the script". What might be the step that I'm missing? I have registered service worker using:
<script>
if('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/ServiceWorker.js')
.then(function() { console.log("Service Worker Registered"); });
}
</script>
Also, can we cache an .aspx page in a service worker?
This script inside the page is just unable to locate /ServiceWorker.js and could be due to 1 thing out of 2. Either the file /ServiceWorker.js does not exist in your root website folder or you mistyped the name. There's no missing step at all and the snippet looks ok.
The other question is yes, you can not only cache static files like fonts, CSS and JS, but also anything dynamic network response.
Inside /ServiceWorker.js add:
self.addEventListener('fetch', function(event) {
console.log(event.request);
});
That will log in your browser console the URLs you are trying to request and you servers, images, text, etc.. and you can clone any response object and put it in your cache to be served from there on next visit.
Goog example / tutorials: https://developers.google.com/web/ilt/pwa/caching-files-with-service-worker#serving_files_from_the_cache
Check path of your ServiceWorker.js is accessible in your file to register serviceWorker. Other hand Which file you trying to fetch, that should be inside the scope of service worker.
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/resources/ServiceWorker.js').then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
});
}
As above snippet can fetch:
/resources/js/***.js //200 Ok
/resources/css/***.css //200 Ok
/static/***.js //404 Not found, because not in scope
Two things are possible:
Either the path/name to serviceWorker file is not correct.
ServiceWorker file is not present on the root of your folder structure.
It should be present on the root.
Using nrwl (Nx.js) you need to run nx build your_app.
It will create a public folder dist with the mockServiceWorker.js
then run : npm run msw dist
It will initialize to this folder to download stuff while service your app.
Related
I can not register a service worker. The file is located along with the index.js and app.js. I get next errors
A bad HTTP response code (404) was received when fetching the script.
Failed to load resource: net::ERR_INVALID_RESPONSE
Registration failed TypeError: Failed to register a ServiceWorker: A
bad HTTP response code (404) was received when fetching the script.
******
if ('serviceWorker' in navigator) {
window.addEventListener('`load`', () => {
navigator.serviceWorker.register('serviceWorker.js', { scope:'./' })
.then((registration) => {
console.log('Registration completed successfully',registration);
})
.catch((error) => {
console.log('Registration failed', error);
})
})}
It not only have to be along side index.js and app.js, it has to be in the root of your application. so if it happens your index.js or app.js are in a folder say js, it wont work. just put serviceWorker.js in the same directory as index.html and please run it in a server
Why is this?
I am not an expert at this, but I know service workers are used to serve all your files on an offline scenerio. If you put it as a relative path, it's going to be tricky to map to all other files outside.
This is not a rule though, you can somehow find a way to put your serviceWorker in some subfolder, but I personally don't consider this a best practice
Service Workers are used to cache assets and other files so that in case of slow network or the user being offline results could be rendered on the screen. This results in better user experience.
For details you might want to visit:-
https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
This is done at the index.js and if you are using latest CRA version you just need to modify the last line from serviceWorker.unregister(); to serviceWorker.register();
I am having service worker js in subdirectory (/data/system/) but I want it's scope to be from root directory. Following code:
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/data/system/firebase-messaging-sw.js', { scope: '/' })
.then(function(reg) {
// registration worked
console.log('Registration succeeded.');
}).catch(function(error) {
// registration failed
console.log('Registration failed with ' + error);
});
}
prints the error:
The path of the provided scope ('/') is not under the max scope allowed ('/data/system/'). Adjust the scope, move the Service Worker script, or use the Service-Worker-Allowed HTTP header to allow the scope.
How do I extend the scope so it will work? How do I set set Service-Worker-Allowed HTTP header? I am having basic PHP application, no Angular, no React, nothing special. All the threads I searched were for those systems.
So, the answer is rather complex.
First, I noticed, that the code I provided earlier was registering service worker 2 times - first it was searching for root service worker, and second for the directory I specified. Problem lies in firebase itself, because it strictly search for root service worker. So I had to download firebase.js and re-work it so it search for my directory only. (for anyone curious in build 3.6.1-rc.3, line 525 in "navigator.serviceWorker.register" just change URL to yours desired) And use local copy of firebase instead of official one.
Second, I had to add .htaccess to the directory service worker is in with the following lines:
<Files "firebase-messaging-sw.js">
Header set Service-Worker-allowed "/"
</Files>
Just leaving this here for anyone else searching the same thing.
I have made a React build, npm start build. When I have uploaded my build to my GitHub page: My React App Github Page
.Then I get this error:
"Error during service worker registration: DOMException: Only secure origins are allowed".
I have tried to make some changes to the index.html file, to try register the service worker like this:
<script type="text/javascript" src="/static/js/main.99691887.js">
if('serviceWorker' in navigator){
// Register service worker
navigator.serviceWorkerContainer.register('service-worker.js').then(function(reg){
console.log("SW registration succeeded. Scope is "+reg.scope);
}).catch(function(err){
console.error("SW registration failed with error "+err);
});
}
</script>
But I still get the error. Is there a way to make this work on my GitHub page?
Im tryin to get Firebase FCM working in my React project(using webpack )
When trying to getToken() using:
messaging.requestPermission()
.then(function() {
console.log('Notification permission granted.');
return messaging.getToken();
})
.then(function(token) {
console.log('token')
})
.catch(function(err) {
console.log('Unable to get permission to notify.', err);
});
the exception is thrown as follows:
browserErrorMessage: "Failed to register a ServiceWorker: The scrip
has an unsupported MIME type ('text/html')
I understand that this issue is related to the missing service worker file: firebase-messaging-sw.js, which I added to the root of the project but I'm still getting the same error.
Im not sure what im doing wrong here, i've set up vanilla java script project and it works fine ....
Any ideas about this issue ?
For those using create-react-app, you can create the firebase-messaging-sw.js inside public folder and, on index.js add:
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('../firebase-messaging-sw.js')
.then(function(registration) {
console.log('Registration successful, scope is:', registration.scope);
}).catch(function(err) {
console.log('Service worker registration failed, error:', err);
});
}
If you are using create-react-app. Add firebase-messaging-sw.js to your public folder and rebuild. firebase-messaging-sw.js can be an empty file
If you are using firebase, react and you scaffold with create react app things you need to do:
create (or move) a file in the public folder name it firebase-messaging-sw-.js
this issue is because the default route is your root folder, but since the scaffolder uses webpack you can't put the simple file in your root folder, it got to be placed in your public folder or do some config in your webpack dev server to be able to load that file from a different route
register your service worker and associate that file with firebase
you can do this in the index file (bootstrap)
Check that your service worker has been registered in your browser
for chrome you go to Devtools > Application > ServiceWorker and check yours is register
if you have any issue delete you service worker and register it again
(based on #Humble Student answer)
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('../firebase-messaging-sw.js')
.then(function(registration) {
firebase.messaging().useServiceWorker(registration);
}).catch(function(err) {
console.log('Service worker registration failed, error:', err);
});
}
Hope that helps!
In order to receive messages, you will need to create a file called firebase-messaging-sw.js. See the section Handle messages when your web app is in the foreground in the Firebase documentation:
In order to receive the onMessage event, your app must define the Firebase messaging service worker in firebase-messaging-sw.js.
The issue here was that my project setup didn't 'see' service worker file.
Since i'm using node with express, the firebase-messaging-sw.js had to be place where express is picking up static content. In my case line:
server.use(Express.static(path.join(__dirname, '../..', 'dist')));
means that I had to put firebase-messaging-sw.js into /dist folder.
I have the same exact problem as in the original question, and I have gone through all kinds of solutions without any luck over the past 3 days. I am using ReactJS and Webpack. I've tried to include file called firebase-messaging-sw.js in my root folder, but it does nothing.
Someone, please help, since the firebase notification is a much needed feature in the project I am developing...
EDIT.
I managed to solve the registration problem by installing a webpack plugin called sw-precache-webpack-plugin. This plugin autogenerates a service-worker file for you into your build directory.
I get this error when trying to register the service worker:
Failed to register a ServiceWorker: A bad HTTP response code (404) was gwreceived when fetching the script.
I'm working with ionic and this is what I have in the app.js:
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js').then(function(registration) {
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}).catch(function(err) {
//registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
}else {
console.log('No service-worker on this browser');
}
On the directory I have the service-worker.js file right next to the app.js on the same folder.
Using latest chrome version on ubuntu desktop.
You mention that you have service-worker.js in the same directory as app.js, but the URL passed to .register() is relative to the HTML document's path. You need to make sure your service-worker.js file is in the same directory as the .html file corresponding to the page you're on.
The HTML document which is trying to register a service worker and SW.js should be in the same directory.
These are great replies and it helped with my confusion. I just wanted to add another thing just in case others are running into this problem and are confused as I was.
If you are using a bundler like Webpack, the path needs to be relative to the compiled version.
If your sw.js is in the /src folder but the compiled version of your html goes to a ./dist folder and your path to register the sw.js is "./sw.js", service worker is going to be searching in the dist folder for the sw.js file.
My solution to the problem above for Webpack is to use copy-webpack-plugin and send the file over from the src folder to the dist folder.
You just need need to pass the right path to navigator.serviceWorker.register and it doesn't necessarily need to be the same of html file.
For instance, my service-worker.js is in the Scripts folder of my app, thus I needed to pass the path "/Scripts/service-worker.js" on navigator.serviceWorker.register, like:
navigator.serviceWorker.register('/Scripts/service-worker.js')
service workers and index.html file should be in a common directory.
This Problem is Caused By the sw.js file position in your directory
Possible Solution -
Move your sw.js file out of any sub folder/directory and put it at the common or public folder. And the error would go away and the Service Worker would get easily registered.
Try to set the source to look in the root directory using a ~
Like this:
navigator.serviceWorker.register('~service-worker.js')