Skocz do zawartości

Temat został przeniesiony do archiwum

Ten temat przebywa obecnie w archiwum. Dodawanie nowych odpowiedzi zostało zablokowane.

michussj07

[JavaScript] Pomoc przy tutorialu o powiadomienich push(JS i Firebase)

dodany przez michussj07, w Programowanie

Rekomendowane odpowiedzi

michussj07    0

michussj07
Napisano

Witajcie!!

Mam pewien problem i proszę was o pomoc. Chciałem nauczyć się implementować powiadomienia push w aplikacji internetowej. Korzystam z poradnika jakiegoś hindusa i jestem na tym odcinku:

Link do tutoriala

Przejrzałem cały ten odcinek i zrobiłem go dokładnie jak autor i kod wygląda tak(korzystam z biblioteki jquery 3.3.1 min):

 

 

<!--/**
* Created by PhpStorm.
* User: Michał
* Date: 2018-12-26
* Time: 14:41
*/-->
<!DOCTYPE html>
<html>
<head>
<title>Push notification</title>
   <script src="jquery-3.3.1.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.7.1/firebase.js"></script>
<script>
 // Initialize Firebase
 var config = {
   apiKey: "AIzaSyDZ56QKkFT33hC3Ee3KyhqwkM0Pmkysg20",
   authDomain: "push-v2-7a3d4.firebaseapp.com",
   databaseURL: "https://push-v2-7a3d4.firebaseio.com",
   projectId: "push-v2-7a3d4",
   storageBucket: "",
   messagingSenderId: "335978700030"
 };
 firebase.initializeApp(config);
 // Retrieve Firebase Messaging object.
 const messaging = firebase.messaging();
 messaging.requestPermission().then(function() {
     console.log('Notification permission granted.');
     // TODO(developer): Retrieve an Instance ID token for use with FCM.
     if(isTokenSentToServer()) {
   console.log('Token already saved')
     } else {
         getRegToken();
     }
     getRegToken();
     }).catch(function(err) {
     console.log('Unable to get permission to notify.', err);
 });
 function getRegToken (argument) {
// Get Instance ID token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
         messaging.getToken().then(function(currentToken) {
             if (currentToken) {
                 //sendTokenToServer(currentToken);
                 console.log(currentToken);
                 setTokenSentToServer(true);
             } else {
                 // Show permission request.
                 console.log('No Instance ID token available. Request permission to generate one.');
                 setTokenSentToServer(false);
             }
         }).catch(function(err) {
             console.log('An error occurred while retrieving token. ', err);
             showToken('Error retrieving Instance ID token. ', err);
             setTokenSentToServer(false);
         });
 }
 function setTokenSentToServer(sent) {
     window.localStorage.setItem('sentToServer', sent ? '1' : '0');
 }
 function isTokenSentToServer() {
     return window.localStorage.getItem('sentToServer') === '1';
 }
 </script>
 </head>
     <body>
     <h1>Push notification v3</h1>
     </body>
</html>

 

 

Wartość manifest.json wynosi:

"gcm_sender_id": "103953800507" tak jak w tutorialu.

Odpalam stronę na local hoście jak autor i mam taki błąd(oczywiście zezwalaj na wyświetlenie powiadomień push):

 

Obrazek

 

Nie mam pojęcia jak to rozwiązać i szukałem pomocy wszędzie. Zna ktoś może rozwiązanie?

P.S: Mam świadomość , że dwa razy wyświetla mi się funkcja getRegToken();, ale tak było w kursie i żadna z tych funkcji przez ten błąd nie chce wyświetlić mi tokena wymaganego w kolejnych zadaniach

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi
Udostępnij na innych stronach

januzi    24

januzi
Napisano

Usuń linijkę z showtoken

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi
Udostępnij na innych stronach

michussj07    0

michussj07
Napisano

 

Okej na ten moment wiem co było błędem. Jakimś sposobem plik firebase-messaging-sw.js:

importScripts('https://www.gstatic.com/firebase/5.7,1/firebase-app.js');
importScripts('https://www.gstatic.com/firebase/5.7.1/firebase-messaging.js');

 var config = {
   apiKey: "AIzaSyDZ56QKkFT33hC3Ee3KyhqwkM0Pmkysg20",
   authDomain: "push-v2-7a3d4.firebaseapp.com",
   databaseURL: "https://push-v2-7a3d4.firebaseio.com",
   projectId: "push-v2-7a3d4",
   storageBucket: "",
   messagingSenderId: "335978700030"
 };
 firebase.initializeApp(config);

var messaging = firebase.messaging();


messaging.setBackgroundMessageHandler(function(payload) {
 console.log('[firebase-messaging-sw.js] Received background message ', payload);
 // Customize notification here
 var notificationTitle = 'Background Message Title';
 var notificationOptions = {
   body: 'Background Message body.',
   icon: '/firebase-logo.png'
 };

 return self.registration.showNotification(notificationTitle,
   notificationOptions);
});
// [END background_handler]

 

Kolidował z funkcją "sendTokenToServer(currentToken);" i gdy za komentowałem cały plik i od komentowałem tą funkcję to uzyskałem tokena. Teraz gdy za komentowałem wcześniej wspomnianą funkcję i powtórnie wpisaną funkcję "getRegToken();" to Token jest zapisany i nie błędów(póki co). Dzięki za pomoc. Jeśli będę miał z tym kodem dalej jakiś problem to mogę podpiąć się pod ten temat?

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi
Udostępnij na innych stronach

michussj07    0

michussj07
Napisano

Ech ponownie się zaciąłem w tym przypadku na 3 części:

Jestem prawie na samym końcu, gdzie facetowi się wyświetlił ten wynik:

 

PexpKP3.png

 

Mi za to pojawiają się takie babole:

 

XMEpaaH.png

 

Jeśli chodzi o kod to wygląda tak:

Index.php

firebase-messaging-sw.js

action.php

DbConnect.php

 

Wcześniej też miałem problem z "Showtokenem" i nie wiem co tym razem robię źle. Do tego momentu nie było problemów i wyświetlał się komunikat "Token arleady saved" i jak doszły te funkcje to wszystko się posypało, mimo, że nie powinno.

Zaznaczam, że baza jest wykonana i nie ma tam żadnej literówki. Wydaje mi się, że to ma związek z funkcją getRegToken(); i skryptem firebase-messaging-sw.js.

 

Ma ktoś jakiś pomysł?

 

Edit. Jeśli trzeba, to proszę dodać do mojego tytułu tag 

, bo sam nie mam możliwości.

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi
Udostępnij na innych stronach

michussj07    0

michussj07
Napisano

Dałem taką funkcję:

function showToken(currentToken) {
     // Show token in console and UI.
     const tokenElement = document.querySelector('#token');
     tokenElement.textContent = currentToken;
 }

Do index.php z przykładu:

https://github.com/firebase/quickstart-js/blob/405fdde76b292f361e568e553de5d2b696c62b50/messaging/index.html#L198-L208

 

Wynik się zrobił taki:

s1fug49.png

 

Wie ktoś jak to naprawić?

 

P.S: Jest ktoś obeznany w tworzeniu aplikacji powiadomień push z użyciem strony Firebase? Jeśli tak, to byłbym strasznie wdzięczny jakby ktoś mi pomógł

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi
Udostępnij na innych stronach

januzi    24

januzi
Napisano

console.log( currentToken ) ; zamiast tej linijki z przypisaniem, i zobacz co się w konsoli pojawi

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi
Udostępnij na innych stronach

michussj07    0

michussj07
Napisano

console.log( currentToken ) ; zamiast tej linijki z przypisaniem, i zobacz co się w konsoli pojawi

 

showToken był o dziwo niepotrzebny.

 

Dotarłem do kolejnego

i znowu coś nie działa, chociaż nie mam żadnego błędu. Problem za to tkwi w programie Postman, który wykorzystywany jest do wysyłania tych powiadomień.

Gdyż w momencie, gdy wpisuje link , którym zawiera się plik send.php i klikam "send" to w tutorialu facetowi wyświetla się komunikat, a u mnie nic się nie dzieje. Mimo iż reszta działa.

 

Zaktualizowałem kody z poprzedniego postu i doszedł jeden dodatkowy:

send.php

Niżej jest obrazek programu z wynikiem czynności(jest prawidłowy):

M9fXyT2.png

Kolejny screen pokazuje jak to wygląda u autora, a u mnie się to nie pojawia mimo iż robię to samo:

FTvmA4H.png

 

Ktoś miał z styczność z tym programem? Może ja coś robię źle? Proszę o szybką odpowiedź.

P.S: Proszę wybaczyć o długi brak odpowiedzi na ostatni post, ale zacząłem oglądać inny tutorial, bo znalazłem i zaciąłem się dokładnie na tym samym etapie. Stąd moje domysły o winie programu lub przeglądarki nawet.

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi
Udostępnij na innych stronach

michussj07    0

michussj07
Napisano

Udało mi się rozwiązać problem. Jak miałem poprzednie błędy to aby sprawdzić w czym problem za komentowałem cały plik firebase-messaging-sw.js. Jak robiłem resztę tutoriala to zawartość tego pliku aż do tego momentu. (po prostu worker był zarejestrowany, ale nic nie robił) Z powrotem od komentowałem kod i to pomogło. Teraz inne pytanie, a bardziej prośba o pomoc od kogoś bardziej ode mnie zorientowanego w temacie. Jak zrobić w moich powiadomieniach aby był on klikalny i znikał po jakimś czasie? Znalazłem komendę od klikania "click_action", ale mimo dodania go do pliku index.php, send.php i firebase-messaging-sw.js, dalej się nie dało kliknąć w to powiadomienie.

 

Oto kod od send.php i firebase-messaging-sw.js:(pomijam <?php i ?> dla oszczędności miejsca)

define('SERVER_API_KEY', 'AIzaSyAVTw2lpMU2-efb6NehBJQHHmJGKxdTrGI');

require 'DbConnect.php';
$db = new DbConnect;
$conn = $db->connect();
$stmt = $conn->prepare('SELECT * FROM tokens');
$stmt->execute();
$tokens = $stmt->fetchAll(PDO::FETCH_ASSOC);
foreach ($tokens as $token) {
   $registrationIds[] = $token['token'];
}

$header= [
   'Authorization: Key= ' . SERVER_API_KEY,
   'Content-Type: Application/json'
];

$msg=[
   'title'=> 'Nowe powiadomienie',
   'body' => 'Zmiany nadchodzą',
   'icon'=> 'style/img/icon.png',
   'image' => 'style/img/d.png',
   'click_action' => 'www.google.com'
];

$payload=[
   'registration_ids' => $registrationIds,
   'data' => $msg,
];

$curl = curl_init();

curl_setopt_array($curl, array(
   CURLOPT_URL => "https://fcm.googleapis.com/fcm/send",
   CURLOPT_RETURNTRANSFER => true,
   CURLOPT_CUSTOMREQUEST => "POST",
   CURLOPT_POSTFIELDS => json_encode($payload),
   CURLOPT_HTTPHEADER => $header,
));

$response = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);

if ($err) {
   echo "cURL Error #:" . $err;
} else {
   echo $response;
}

 

importScripts('https://www.gstatic.com/firebasejs/4.9.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/4.9.1/firebase-messaging.js');
/*Update this config*/
var config = {
   apiKey: "AIzaSyDZ56QKkFT33hC3Ee3KyhqwkM0Pmkysg20",
   authDomain: "push-v2-7a3d4.firebaseapp.com",
   databaseURL: "https://push-v2-7a3d4.firebaseio.com",
   projectId: "push-v2-7a3d4",
   storageBucket: "",
   messagingSenderId: "335978700030"
 };
 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/strony/Test2/style/img/icon.png',
   image: 'http://localhost/strony/Test2/style/img/d.png',
click_action: 'www.google.com',

 };

 return self.registration.showNotification(notificationTitle,
     notificationOptions);
});

 

Jak widać jest już zaaplikowana ta funkcja, ale właśnie nie działa. Mama jeszcze jakas częśc kodu dopisać, czy coś innego zmienić?

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi
Udostępnij na innych stronach
Przejdź do listy tematów

  • Ostatnio przeglądający   0 użytkowników

    Brak zarejestrowanych użytkowników przeglądających tę stronę.

×
×
  • Dodaj nową pozycję...