Firebase Service worker not found while using GWT (404 Error)

Question

I'd like to use the firebase cloud messaging service in my GWT webapplication, but I'm stuck with some problems. The application should be able to register the firebase service worker and connect to the service with it's specific token. This token, the received messages and the event when a token changes should be accessable in my GWT Java code.

The error occurs when I try to create the token by using handle.getToken(). I get this error message:

A bad HTTP response code (404) was received when fetching the script.
Failed to load resource: net::ERR_INVALID_RESPONSE

browserErrorMessage: "Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script." 
code: "messaging/failed-serviceworker-registration"
message: "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)."
stack: "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).↵    at https://www.gstatic.com/firebasejs/3.5.2/firebase-messaging.js:41:225"__proto__: Error

The URL it tries to access to register the service worker is: http://127.0.0.1:11111/firebase-messaging-sw.js

So it's obvious the problem is it tries to access the javascript from my local host address instead of the location where the other firebase JS files are. So my question is how can I change that so it loads the file from the correct source?

These scripts are included in my HTML file:

<script src="https://www.gstatic.com/firebasejs/3.6.1/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.5.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.5.2/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.5.2/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.5.2/firebase-messaging.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyBxdZNXHiLR1IC8Wrw3Y6q_5DFoN8hn_UY",
    authDomain: "fir-test-848de.firebaseapp.com",
    databaseURL: "https://fir-test-848de.firebaseio.com",
    storageBucket: "fir-test-848de.appspot.com",
    messagingSenderId: "974661154941"
  };
  firebase.initializeApp(config);
</script>

This is my Java code:

public class FireBase
{

    private JavaScriptObject _messagingHandle;
    private String _token;

    public FireBase()
    {
        _messagingHandle = createMessagingHandle();
        requestPermission(_messagingHandle, this);
    }

    private native JavaScriptObject createMessagingHandle()
    /*-{
        return $wnd.firebase.messaging();
    }-*/;

    private native void listenTokenRefresh(final JavaScriptObject handle)
    /*-{
        handle.onTokenRefresh(function()
        {
            [email protected]::onTokenRefresh()();
        });
    }-*/;

    private void onTokenRefresh()
    {
        getToken(_messagingHandle, this);
    }

    private native void requestPermission(final JavaScriptObject handle, final Object instance)
    /*-{
        handle.requestPermission().then(function()
        {
            $wnd.console.log('Notification permission granted.');
            [email protected]::onPermission(Z)(true);
        })
    }-*/;

    private void onPermission(final boolean granted)
    {
        if (granted)
        {
            getToken(_messagingHandle, this);
        }
    }

    private native void getToken(final JavaScriptObject handle, final Object instance)
    /*-{
        handle.getToken().then(function(currentToken)
        {
            if (currentToken)
            {
                [email protected]::onTokenReceived(Ljava/lang/String;)(currentToken);
            }
            else
            {
                // Show permission request.
                $wnd.console.log('No Instance ID token available. Request permission to generate one.');
                [email protected]::onTokenReceived(Ljava/lang/String;)(null);
            }
        })

    }-*/;

    private void onTokenReceived(final String token)
    {
        if (token != null)
        {
            GWT.log("Received Token: " + token);
            if (!token.equals(_token))
            {
                // Send/Update token to server
            }
        }
    }
}

Solution 1

The Firebase SDK attempts to register the service worker at a specific location.

The location is + /firebase-messaging-sw.js. There are two options:

1.) Make + /firebase-messaging-sw.js work in the browser (i.e. make sure it returns a valid response) and then try using the SDK again (it should work if the browser can access the file).

2.) Use the useServiceworker(<service worker registration>) method to pass in a custom service worker. This will still require you to have a valid service worker URL.

Solution 2

Just create an empty file in root folder firebase-messaging-sw.js

Solution 3

Check your angular cli file ... add

"firebase-messaging-sw.js", "manifest.json"

"assets": [ "assets", "app/main/content/components/angular-material", "favicon.ico", "firebase-messaging-sw.js", "manifest.json" ],

Comments

[Roman]

Thanks for the info. I didn't knew that I had to implement the service worker js by myself.

[nyluje]

@Gaunt Face, can you have a look at this thread: stackoverflow.com/questions/42626375/… I've tried to solve it by following your instructions but I don't really understand why it should work since "firebase-messaging-sw.js" is a hollow shell.

[Matt Gaunt]

It will still need the firebase-messaging-sw.js file to register the use for push, but if nothing is added to that file then users will receive a notification from Chrome saying "This app updated in the background".

[Jignesh Sanghani]

i don't know that this bug or something else but it's work for me.