使用 GWT 时未找到 Firebase Service Worker（404 错误）

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()
        {
            instance.@x.client.miscellaneous.FireBase::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.');
            instance.@x.client.miscellaneous.FireBase::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)
            {
                instance.@x.client.miscellaneous.FireBase::onTokenReceived(Ljava/lang/String;)(currentToken);
            }
            else
            {
                // Show permission request.
                $wnd.console.log('No Instance ID token available. Request permission to generate one.');
                instance.@x.client.miscellaneous.FireBase::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
            }
        }
    }
}

Answer 1

只需在根文件夹 firebase-messaging-sw.js 中创建一个空文件

Answer 2

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 (ie 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.

Answer 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" ],

Answer 4

Not only a empty file, is a good idea to add the content like:

    importScripts('https://www.gstatic.com/firebasejs/7.14.2/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.14.2/firebase-messaging.js');
/*Update this config*/
var config = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: ""
  };
  firebase.initializeApp(config);

const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(function(payload) {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  // Customize notification here
  const notificationTitle = payload.data.title;
  const notificationOptions = {
    body: payload.data.body,
    icon: 'http://localhost/gcm-push/img/icon.png',
    image: 'http://localhost/gcm-push/img/d.png'
  };

  return self.registration.showNotification(notificationTitle,
      notificationOptions);
});
// [END background_handler]