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

【问题标题】：Firebase Service worker not found while using GWT (404 Error)使用 GWT 时找不到 Firebase Service Worker（404 错误）
【发布时间】：2017-04-02 01:54:19
【问题描述】：

我想在我的 GWT Web 应用程序中使用 firebase 云消息服务，但遇到了一些问题。应用程序应该能够注册 firebase 服务工作者并使用其特定令牌连接到服务。在我的 GWT Java 代码中应该可以访问此令牌、接收到的消息以及令牌更改时的事件。

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

获取脚本时收到错误的 HTTP 响应代码 (404)。加载资源失败：net::ERR_INVALID_RESPONSE browserErrorMessage：“无法注册 ServiceWorker：获取脚本时收到错误的 HTTP 响应代码 (404)。” 代码：“消息/失败的服务工作者注册” 消息：“消息：我们无法注册默认服务工作者。无法注册服务工作者：获取脚本时收到错误的 HTTP 响应代码 (404)。（消息/失败的服务工作者注册）。” 堆栈：“FirebaseError：消息：我们无法注册默认服务工作者。无法注册服务工作者：获取脚本时收到错误的 HTTP 响应代码（404）。（消息/失败的服务工作者注册）。↵ 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 代码：

公共类 FireBase { 私有 JavaScriptObject _messagingHandle; 私有字符串_token；公共火力基地（） { _messagingHandle = createMessagingHandle(); requestPermission(_messagingHandle, this); } 私有原生 JavaScriptObject createMessagingHandle() /*-{ 返回 $wnd.firebase.messaging(); }-*/; private native void listenTokenRefresh（最终 JavaScriptObject 句柄） /*-{ 处理.onTokenRefresh(函数() { instance.@x.client.miscellaneous.FireBase::onTokenRefresh()(); }); }-*/; 私人无效 onTokenRefresh() { getToken(_messagingHandle, 这个); } private native void requestPermission（最终的 JavaScriptObject 句柄，最终的 Object 实例） /*-{ handle.requestPermission().then(function() { $wnd.console.log('通知权限已授予'); instance.@x.client.miscellaneous.FireBase::onPermission(Z)(true); }) }-*/; 私有无效 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('没有可用的实例 ID 令牌。请求生成一个。'); instance.@x.client.miscellaneous.FireBase::onTokenReceived(Ljava/lang/String;)(null); } }) }-*/; 私人无效onTokenReceived（最终字符串令牌） { 如果（令牌！= null） { GWT.log("收到的令牌：" + 令牌); 如果（！token.equals（_token）） { // 发送/更新令牌到服务器 } } } }

【问题讨论】：

标签： javascript java gwt firebase firebase-cloud-messaging

【解决方案1】：

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

【讨论】：

我不知道这个错误或其他问题，但它对我有用。

【解决方案2】：

Firebase SDK 尝试在特定位置注册 Service Worker。

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

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

2.) 使用useServiceworker(<service worker registration>) 方法传入一个自定义服务工作者。这仍然需要您拥有一个有效的 Service Worker URL。

【讨论】：

感谢您的信息。不知道必须自己实现service worker js。
@Gaunt Face，你能看看这个线程吗：stackoverflow.com/questions/42626375/… 我已经尝试按照你的指示解决它，但我真的不明白为什么它应该工作，因为“firebase- messing-sw.js" 是一个空壳。
它仍然需要 firebase-messaging-sw.js 文件来注册推送的使用，但如果没有向该文件添加任何内容，则用户将收到来自 Chrome 的通知，提示“此应用已更新背景”。

【解决方案3】：

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

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

“资产”：[ “资产”， “应用程序/主/内容/组件/角度材料”， "favicon.ico", “firebase-messaging-sw.js”， “清单.json” ],

【讨论】：

【解决方案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]

【讨论】：