Firebase Cloud 消息传递 - Django - 我如何为工作人员提供服务？-Java 学习之路

Update from a place of mild understanding:

我已经阅读了很多关于服务工作者的信息并推进了我正在研究的项目，这些项目远远超过了我写这篇文章的时间 .

我在这里探讨的主要问题（从域的根目录获得 firebase-messaging-sw.js ）由下面的 ServiceWorkerView 解决 .

有趣的事实：事实证明，从域的根提供 firebase-messaging-sw.js 的原因是服务工作者控件的范围由URL定义 . 所以，同时：

http://whatever.com/firebase-messaging-sw.js 控制了一切，

http://whatever.com/static/firebase-messaging-sw.js 只能控制 /static/ 下的所有内容（在这种情况下，只有Django提供的静态资源） . 即使JS文件是静态的，它也需要控制该路径之外的页面 .

A good starting point for learning about Service Workers

Original Question:

如何让FCM服务工作者（ firebase-messaging-sw.js ）在Django中工作？

我正在使用 django 和 fcm-django .

如何在根目录下提供 firebase-messaging-sw.js ？

Django默认在“/ static /”路径下提供静态资产 . 将STATIC_URL更改为“/”会使 firebase-messaging-sw.js 可用，但没有其他内容 .

我尝试了一个建议，将以下内容放入我的urls.py中：

url(r'^(?!/static/.*)(?P<path>.*\..*)$', RedirectView.as_view(url='/static/%(path)s'))

虽然显然是对正则表达式魔术的光荣使用，但事实证明服务工作者不能落后于重定向 . （我想这也与有趣的事实有关）

我在urlconf中写了一个显式URL指向的视图 . 这样可行 .

class ServiceWorkerView(View):
    def get(self, request, *args, **kwargs):
        return render(request, 'fcmtest/firebase-messaging-sw.js')

urls.py：

path('firebase-messaging-sw.js', views.ServiceWorkerView.as_view(), name='service_worker')

现在url http://localhost:8000/firebase-messaging-sw.js 提供了javascript;但是，Firebase抱怨内容类型是 text/plain

所以我将视图更改为：

class ServiceWorkerView(View):
    def get(self, request, *args, **kwargs):
        return render(request, 'fcmtest/firebase-messaging-sw.js', content_type="application/x-javascript")

而我得到的错误是：

未捕获（承诺）TypeError：无法注册ServiceWorker：获取脚本时收到错误的HTTP响应代码（404） .

我的 firebase-messaging-sw.js （注意没有打开console.log语句）：

importScripts("https://www.gstatic.com/firebasejs/5.2.0/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/5.2.0/firebase-messaging.js");
importScripts("https://www.gstatic.com/firebasejs/5.2.0/init.js");

// Initialize Firebase
var config = {
    apiKey: "AIzaSyBOb5gh1Lry84116M1uvAS_xnKtcWUoNlA",
    authDomain: "pyfcm-5f794.firebaseapp.com",
    databaseURL: "https://pyfcm-5f794.firebaseio.com",
    projectId: "pyfcm-5f794",
    storageBucket: "pyfcm-5f794.appspot.com",
    messagingSenderId: "813943398064"
};
console.log('in service worker - before initializeApp')
firebase.initializeApp(config);
console.log('in service worker - after initializeApp')

const messaging = firebase.messaging();
console.log('in service worker - after firebase.messaging')

// if the app is in the background (user not on page)
messaging.setBackgroundMessageHandler(function(payload) {
    console.log('in service worker - in setBackgroundMessageHandler')
    const title = "Hello World";
    const options = {
        body: payload.data.status
    }
    return self.registration.showNotification(title, options);
});

最后，我的设备注册页面（我'm not sure how to run the javascript and then submit. form.submit() didn'工作，但可能是因为其他的东西不起作用..？（ fcm/fcmtest/templates/fcmtest/device_registration.html ）：

<head>
    {% load static %}
    <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>FCM Device Registration</title>

    <!-- update the version number as needed -->
    <script src="https://www.gstatic.com/firebasejs/5.2.0/firebase.js"></script>
    <script>
    // Initialize Firebase
    var config = {
    apiKey: "AIzaSyBOb5gh1Lry84116M1uvAS_xnKtcWUoNlA",
    authDomain: "pyfcm-5f794.firebaseapp.com",
    databaseURL: "https://pyfcm-5f794.firebaseio.com",
    projectId: "pyfcm-5f794",
    storageBucket: "pyfcm-5f794.appspot.com",
    messagingSenderId: "813943398064"
    };

    firebase.initializeApp(config);
    </script>

    <script defer src="https://www.gstatic.com/firebasejs/5.2.0/firebase-app.js"></script>
    <!-- include only the Firebase features as you need -->
    <script defer src="https://www.gstatic.com/firebasejs/5.2.0/firebase-auth.js"></script>
    <!--<script defer src="https://www.gstatic.com/firebasejs/5.2.0/firebase-database.js"></script>-->
    <script defer src="https://www.gstatic.com/firebasejs/5.2.0/firebase-messaging.js"></script>
    <!--<script defer src="https://www.gstatic.com/firebasejs/5.2.0/firebase-storage.js"></script>-->
    <!-- initialize the SDK after all desired features are loaded -->
    <!--<script defer src="https://www.gstatic.com/firebasejs/5.2.0/init.js"></script>-->

</head>

<body>

<script>

function deviceRegistration() {
    console.log('in deviceRegistration()')
    firebase.initializeApp(config);
    const messaging = firebase.messaging();

    // public key generated in firebase console
    messaging.usePublicVapidKey("BMEoHrnzLq5WNeyahbSxJNTyS-44bXug2wetxAWVMLMSUIQE0dexhP4pJhcSA-ZlQlneHURmYQcnq9ofym_sStY");
    // console.log('{% static "firebase-messaging-sw.js" %}')
    console.log("/firebase-messaging-sw.js")
    // changed location passed to navigator.serviceWorker.register since I am no longer serving firebase-messaging.js from localhost/static/ (see that url hack)
    // navigator.serviceWorker.register('{% static "firebase-messaging-sw.js" %}')
    navigator.serviceWorker.register("/firebase-messaging-sw.js")
    .then((registration) => {
        console.log('before messaging.useServiceWorker')
        messaging.useServiceWorker(registration);
        console.log('after messaging.useServiceWorker')

        // Request permission and get token.....
        messaging.requestPermission()
        .then(function(){
            console.log("Have Permission");
        })
        .then(function(token) {
            form = document.getElementById("registration_form");

            registration_token = messaging.getToken();
            form.registration_id = registration_token;

            var isAndroid = navigator.userAgent.toLowerCase().indexOf("android") >= -1;
            if (isAndroid) {
                form.type = "android";
            } else {
                var isiOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
                if (isiOS) {
                    form.type = "ios";
                } else {
                    form.type = "web";
                }
            }

            //form.submit();
        })
        .catch(function(err){
            console.log("Permission denied");
        })
    });

    // request permission to send notifications
    messaging.requestPermission()
        .then(function(){
            console.log("Have Permission");
        })
        .then(function(token) {
            form = document.getElementById("registration_form");

            registration_token = messaging.getToken();
            form.registration_id = registration_token;

            var isAndroid = navigator.userAgent.toLowerCase().indexOf("android") >= -1;
            if (isAndroid) {
                form.type = "android";
            } else {
                var isiOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
                if (isiOS) {
                    form.type = "ios";
                } else {
                    form.type = "web";
                }
            }

            //form.submit();
        })
        .catch(function(err){
            console.log("Permission denied");
        })

    // if user is on the page then show message directly instead of a notification
    messaging.onMessage(function(payload) {
        console.log('payload: ', payload);
    });

}

</script>
{% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %}


<form id="registration_form" method="post">{% csrf_token %}
    <input id="name" type="text" />
    <input id="type" type="hidden" />
    <input id="user" type="hidden" value="{{ user.id }}" />
    <input id="registration_id" type="hidden" />
    <input id="btn_register" type="button" value="Register" onclick="deviceRegistration();" />
</form>

</body>

我按照https://firebase.google.com/docs/cloud-messaging/js/client上的说明尝试添加 manifest.json

它目前由我的静态文件提供，并在注册和发送页面中链接

我的控制台中的错误：

未捕获（承诺）TypeError：无法注册ServiceWorker：获取脚本时收到错误的HTTP响应代码（404） . 获取脚本时收到错误的HTTP响应代码（404） . 无法加载资源：net :: ERR_INVALID_RESPONSE firebase-messaging-sw.js：3未捕获（匿名）@ firebase-messaging-sw.js：3 index.esm.js：1945未捕获（在promise中）对象browserErrorMessage：“失败注册ServiceWorker：ServiceWorker脚本评估失败“代码：”messaging / failed-serviceworker-registration“message：”消息：我们无法注册默认服务工作者 . 无法注册ServiceWorker：ServiceWorker脚本评估失败（消息/失败 - serviceworker注册）“ . stack：“FirebaseError：Messaging：我们无法注册默认服务工作者 . 无法注册ServiceWorker：ServiceWorker脚本评估失败（消息/失败 - serviceworker-registration）.↵在https://www.gstatic.com/firebasejs /5.2.0/firebase-messaging.js:1:34104"

1 回答

0
无法提供 firebase-messaging-sw.js 的问题可以通过直接创建 ServiceWorkerView 到 GET 文件并对 URLconf 进行硬编码来解决 .

FCM / fcmtest / views.py：
```
class ServiceWorkerView(View):
    def get(self, request, *args, **kwargs):
        return render(request, 'fcmtest/firebase-messaging-sw.js', content_type="application/x-javascript")
```
FCM / fcmtest / urls.py
```
app_name = 'fcmtest'
urlpatterns = [
    ...
    path('firebase-messaging-sw.js', views.ServiceWorkerView.as_view(), name='service_worker')
]
```
从域的根目录服务 firebase-messaging-sw.js 的原因是服务工作者控件的范围由URL路径定义 . 服务工作者可以使用的一切都在其控制之下 .

404 可能是由于 device_registration.html 中的javascript错误引起的 . config 已引用但尚未分配给 .
```
function deviceRegistration() {
    firebase.initializeApp(config);
```
此外，使用Firebase Cloud 消息传递执行此操作不是必要的（甚至可能是有问题的）：
```
navigator.serviceWorker.register("/firebase-messaging-sw.js")
.then((registration) => {
    messaging.useServiceWorker(registration);
})
```
相反，使用 firebase.initializeApp(config);

在根目录上提供 manifest.json 可能是个好主意 .

form.submit() 的问题是，从promise中更改表单中元素的代码是不完整的 . 调试后它会很好用 .
回复于 2024-05-16T13:14:40+08:00

Firebase Cloud 消息传递 - Django - 我如何为工作人员提供服务？

1 回答

相关问题