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

Question

我想在我的 GWT 网络应用程序中使用 firebase 云消息服务，但我遇到了一些问题。应用程序应该能够注册 firebase service worker 并使用它的特定令牌连接到服务。这个令牌、收到的消息和令牌更改时的事件应该可以在我的 GWT Java 代码中访问。

当我尝试使用 handle.getToken() 创建令牌时发生错误。我收到此错误消息：

获取脚本时收到错误的 HTTP 响应代码 (404)。
无法加载资源：net::ERR_INVALID_RESPONSE

浏览器错误消息："Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script."
代码："messaging/failed-serviceworker-registration"
消息："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)."
堆栈："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__：错误

它尝试访问以注册 service worker 的 URL 是： http://127.0.0.1:11111/firebase-messaging-sw.js

所以很明显，问题是它试图从我的本地主机地址而不是其他 firebase JS 文件所在的位置访问 javascript。所以我的问题是如何更改它以便从正确的源加载文件？

这些脚本包含在我的 HTML 文件中：

<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>

这是我的 Java 代码：

public class 火力基地
{

    私有 JavaScriptObject _messagingHandle；
    私有字符串_token；

    public 火力基地（）
    {
        _messagingHandle = createMessagingHandle();
        requestPermission(_messagingHandle, 这个);
    }

    私有原生 JavaScriptObject createMessagingHandle()
    /*-{
        return$wnd.firebase.messaging();
    }-*/;

    private native void listenTokenRefresh(final JavaScriptObject handle)
    /*-{
        handle.onTokenRefresh(函数()
        {
            instance.@x.client.miscellaneous.FireBase::onTokenRefresh()();
        });
    }-*/;

    私有无效 onTokenRefresh()
    {
        getToken(_messagingHandle, 这个);
    }

    private native void requestPermission(final JavaScriptObject handle, final Object instance)
    /*-{
        handle.requestPermission().然后(函数()
        {
            $wnd.console.log('Notification permission granted.');
            instance.@x.client.miscellaneous.FireBase::onPermission(Z)(true);
        })
    }-*/;

    private void onPermission（最终布尔值授予）
    {
        如果（授予）
        {
            getToken(_messagingHandle, 这个);
        }
    }

    private native void getToken(final JavaScriptObject handle, final Object instance)
    /*-{
        handle.getToken().then(函数(currentToken)
        {
            如果（当前令牌）
            {
                instance.@x.client.miscellaneous.FireBase::onTokenReceived(Ljava/lang/String;)(currentToken);
            }
            别的
            {
                // 显示权限请求。
                $wnd.console.log('No Instance ID token available. Request permission to generate one.');
                instance.@x.client.miscellaneous.FireBase::onTokenReceived(Ljava/lang/String;)(null);
            }
        })

    }-*/;

    私人无效 onTokenReceived（最终字符串令牌）
    {
        如果（令牌！= null）
        {
            GWT.log("Received Token: " + 代币);
            如果 (!token.equals(_token))
            {
                // Send/Update 令牌到服务器
            }
        }
    }
}

Answer 1

Firebase SDK 尝试在特定位置注册服务工作者。

位置是+/firebase-messaging-sw.js。有两个选项：

1.) 使 + /firebase-messaging-sw.js 在浏览器中工作（即确保它 returns 是一个有效的响应）然后再次尝试使用 SDK（如果浏览器可以访问该文件）。

2.) 使用useServiceworker(<service worker registration>)方法传入一个自定义service worker。这仍然需要你有一个有效的 service worker URL.

Answer 2

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

Answer 3

检查您的 angular cli 文件... 添加

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

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

Answer 4

不仅是一个空文件，最好添加如下内容：

    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]

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

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

javascript

java

gwt

firebase

firebase-cloud-messaging