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

Posted 2023-02-22

【中文标题】使用 GWT 时找不到 Firebase Service Worker（404 错误）

【英文标题】：Firebase Service worker not found while using GWT (404 Error)

【发布时间】：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(函数() [e-mail]::onTokenRefresh()(); ); -*/; 私人无效 onTokenRefresh() getToken(_messagingHandle, 这个); private native void requestPermission（最终的 JavaScriptObject 句柄，最终的 Object 实例） /*- handle.requestPermission().then(function() $wnd.console.log('通知权限已授予'); [e-mail]::onPermission(Z)(true); ) -*/; 私有无效 onPermission（最终布尔值授予） 如果（准许） getToken(_messagingHandle, 这个); private native void getToken(final JavaScriptObject handle, final Object instance) /*- handle.getToken().then(函数(currentToken) 如果（当前令牌） [e-mail]::onTokenReceived(Ljava/lang/String;)(currentToken); 别的 // 显示权限请求。 $wnd.console.log('没有可用的实例 ID 令牌。请求生成一个。'); [e-mail]::onTokenReceived(Ljava/lang/String;)(null); ) -*/; 私人无效onTokenReceived（最终字符串令牌） 如果（令牌！= null） GWT.log("收到的令牌：" + 令牌); 如果（！token.equals（_token）） // 发送/更新令牌到服务器

【参考方案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，你能看看这个线程吗：***.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]