Question

我有问题。如果有人帮助我，我会很高兴。我编写的用于发送PWA通知的代码可以正常工作。他们获取令牌并将通知发送到浏览器。但是当我在移动设备上运行同一页面时，我无法收到任何通知。

代码在此链接中起作用：https://www.varmı.com/app/test/test.php 我得到了令牌值，但是令牌值无法被手机接收。

谢谢。

test.php

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8">
<title>Firebase Messaging Demo</title>
<link rel="stylesheet" href="../assets/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="manifest" href="manifest.json">
<style>body{padding: 15px 0;</style>
<script src="../assets/js/jquery.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>
</head>
<body>
<div class="container">
    <h2>Firebase Send Notification</h2>
    <form action="" method="post">
        <div class="form-group">
            <label>Token</label>
            <input type="text" id="token" name="token" class="form-control">
        </div>
        <div class="form-group">
            <label>Message</label>
            <input type="text" id="msg" class="form-control">
        </div>
        <div class="form-group">
            <label>Notification Title</label>
            <input type="text" name="title" class="form-control">
        </div>
        <div class="form-group">
            <label>Notification Body</label>
            <input type="text" name="body" class="form-control">
        </div>
        <div class="form-group">
            <label>Error</label>
            <input type="text" id="err" class="form-control">
        </div>
        <div class="form-group">
            <button class="btn btn-success">Send</button>
        </div>
    </form>

<script>
    var config = {
        apiKey: "<apiKey>",
        authDomain: "<authDomain>",
        databaseURL: "<databaseURL>",
        projectId: "<projectId>",
        storageBucket: "<storageBucket>",
        messagingSenderId: "<messagingSenderId>",
        appId: "<appId>"
    };
    firebase.initializeApp(config);

    const messaging = firebase.messaging();
    messaging
        .requestPermission()
        .then(function () {
            $("#msg").val("Notification permission granted."); 
            console.log("Notification permission granted.");

            // get the token in the form of promise
            return messaging.getToken()
        })
        .then(function(token) {
            $("#token").val(token);
        })
        .catch(function (err) {
            $("#err").val(err);
            console.log("Unable to get permission to notify.", err);
        });

    messaging.onMessage(function(payload){
        console.log('onMessage',payload);
        notificationTitle = payload.data.title;
        notificationOptions = {
            body: payload.data.body,
            icon:payload.data.icon
        }
        var notification = new Notification(notificationTitle,notificationOptions);
    });
    if ("serviceWorker" in navigator) {
      if (navigator.serviceWorker.controller) {
        console.log("Active service worker found, no need to register");
      } else {
        // Register the service worker
        navigator.serviceWorker
          .register("/app/test/sw.js", {
            scope: "./app/test/"
          })
          .then(function (reg) {
            console.log("Service worker has been registered for scope: " + reg.scope);
          });
      }
    }
</script>
<?php
if(isset($_POST["token"])){
    $token= [strip_tags($_POST["token"])];
    $title= strip_tags($_POST["title"]);
    $body= strip_tags($_POST["body"]);

    // Server key from Firebase Console
    define( 'API_ACCESS_KEY', 'AAAAzSolWSY:APA91bGbweqKWzy...' );


    $headers = [
         'Authorization: key=' . API_ACCESS_KEY, 
         'Content-Type: application/json'
    ];   

    $msg =[
        "title"=>$title,
        "body"=>$body,
        "icon"=>"../files/images/192x192.png"
    ];

    $payload = [
        "registration_ids"=>$token,
        "data"=>$msg
    ];                                                                              

    $ch = curl_init();  

    curl_setopt( $ch,CURLOPT_URL, 'https://fcm.googleapis.com/fcm/send' );                                                                  
    curl_setopt( $ch,CURLOPT_POST, true );  
    curl_setopt( $ch,CURLOPT_HTTPHEADER, $headers );
    curl_setopt( $ch,CURLOPT_RETURNTRANSFER, true );
    curl_setopt( $ch,CURLOPT_POSTFIELDS, json_encode($payload));                                                                  

    $result = curl_exec($ch);

    curl_close ($ch);

    echo "The Result : ".$result;
}
?>
</div>  
</body>
</html>

sw.js

var CACHE_NAME = 'Varmi-test';
var urlsToCache = [
  //'/css/style.css',
  //'/js/hataman.js'
];

self.addEventListener('install', function(event) {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }
        return fetch(event.request);
      }
    )
  );
});

Answer 1

移动操作系统不支持“通知”。

您必须像这样使用服务工作者：swRegistration.showNotification（'Notification with ServiceWorker'）;

PWA通知在PC上可以正常运行，但不能将其发送到手机

1 个答案: