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?
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 have been struggling to make push notifications work.
I am recieving the following error
; FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script. (messaging/failed-serviceworker-registration).
I have already tried to google and applied https://stackoverflow.com/a/42264578/5192105
But still it works locally but not on the server.
The js file firebase-messaging-sw.js exists in the path:https://mobile-app.golocall.com/api/src/public/firebase-messaging-sw.js
I have used slim-php as backend framework.
Please help me out in resolving the error.
It tries to find the service worker file on the root of the application; hence the application tries to load
https://mobile-app.golocall.com/firebase-messaging-sw.js
while the actual file is located at
https://mobile-app.golocall.com/api/src/public/firebase-messaging-sw.js
EDIT:
You may be able to import the service worker like this:
importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js');
If this doesn't work, you may need to declare your own service worker.
Here is a link to more information on the topic:
https://firebase.google.com/docs/cloud-messaging/js/receive
I'm trying to implement firebase to my vue.js project but I'm getting error on firebase.messaging.getToken(). Here is the screenshot of my problem
Error:
The script has an unsupported MIME type ('text/html').
Failed to load resource: net::ERR_INSECURE_RESPONSE
Unable to get permission to notify.
browserErrorMessage
:
"Failed to register a ServiceWorker: The script has an unsupported MIME type ('text/html')."
code
:
"messaging/failed-serviceworker-registration"
message
:
"Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker: The script has an unsupported MIME type ('text/html'). (messaging/failed-serviceworker-registration)."
stack
:
"FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker: The script has an unsupported MIME type ('text/html'). (messaging/failed-serviceworker-registration).↵ at eval (webpack-internal:///./node_modules/#firebase/messaging/dist/index.esm.js:1950:32)"
And here is my code.
firebase.messaging().requestPermission().then(function () {
console.log('Notification permission granted.')
return firebase.messaging().getToken()
.then(function (currentToken) {
console.log(currentToken)
})
}).catch(function (err) {
console.log('Unable to get permission to notify.', err)
})
Service Workers
Does anyone knows how to solve this problem? I tried in many ways but i could not figure it out. Can you please help me?
Thanks.
Try to put the file (or create a file) "firebase-messaging-sw.js" inside the /public folder
inside the firebase-messaging-sw.js copy and paste this (and change YOUR-SENDER-ID) :
// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here, other Firebase libraries
// are not available in the service worker.
importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js');
// Initialize the Firebase app in the service worker by passing in the
// messagingSenderId.
firebase.initializeApp({
'messagingSenderId': 'YOUR-SENDER-ID'
});
// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();
Worked for me ( using React )
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.
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.