Last active
April 23, 2021 01:53
-
-
Save stabacco/d2645137733088624e7e6ce8e988bf5b to your computer and use it in GitHub Desktop.
firebase example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
importScripts('https://www.gstatic.com/firebasejs/8.3.2/firebase-app.js'); | |
importScripts('https://www.gstatic.com/firebasejs/8.3.2/firebase-messaging.js'); | |
var firebaseConfig = { | |
apiKey: "whatever", | |
authDomain: "notifications-test-stefano.1.com", | |
projectId: "notifications-test-1", | |
storageBucket: "notifications-test-1.appspot.com", | |
messagingSenderId: "maybe", | |
appId: "whoknows", | |
measurementId: "ID" | |
}; | |
firebase.initializeApp(firebaseConfig); | |
const messaging = firebase.messaging(); | |
messaging.setBackgroupMessageHandler((payload) => { | |
const title = 'Hello world'; | |
const options = { | |
body: payload.data.status | |
} | |
return self.registration.showNotification(title, options) | |
}); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>Simply Notify</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<link rel="stylesheet" href="/app/static/css/reset.css"> | |
<link rel="stylesheet" href="/app/static/css/style.css"> | |
</head> | |
<body> | |
<div class="wrapper"> | |
<main> | |
<header> | |
<h1>Notifications tests</h1> | |
<p><em>A simple application to send notifications to everyone subscribed. It's simple. It's useless. It's simply notify.</em></p> | |
</header> | |
<button id="sign-in">Sign In</button> | |
<button id="sign-out" hidden>Sign Out</button> | |
<button id="subscribe" hidden> | |
Subscribe | |
<img src="/img/bell.png" alt="Notifications"> | |
</button> | |
<button id="unsubscribe" hidden> | |
Unsubscribe | |
<img src="/img/bell.png" alt="Notifications"> | |
</button> | |
<form id="send-notification-form" hidden> | |
<label class="sr-only" for="notification-message">Notification Message</label> | |
<div> | |
<textarea id="notification-message" maxlength="40" placeholder="What would you like to say?"></textarea> | |
<button type="submit" id="send-notification" aria-label="Send"> | |
<img src="/app/static/img/send.png" alt=""> | |
</button> | |
</div> | |
</form> | |
</main> | |
</div> | |
<!-- Firebase SDK --> | |
<!-- The core Firebase JS SDK is always required and must be listed first --> | |
<script src="https://www.gstatic.com/firebasejs/8.3.2/firebase-app.js"></script> | |
<script src="https://www.gstatic.com/firebasejs/8.3.2/firebase-messaging.js"></script> | |
<!-- TODO: Add SDKs for Firebase products that you want to use | |
https://firebase.google.com/docs/web/setup#available-libraries --> | |
<script src="https://www.gstatic.com/firebasejs/8.3.2/firebase-analytics.js"></script> | |
<script> | |
// Your web app's Firebase configuration | |
// For Firebase JS SDK v7.20.0 and later, measurementId is optional | |
var firebaseConfig = { | |
apiKey: "whatever", | |
authDomain: "notifications-test-1.firebaseapp.com", | |
projectId: "notifications-test-1", | |
storageBucket: "notifications-test-1.appspot.com", | |
messagingSenderId: "maybe", | |
appId: "whoknows", | |
measurementId: "ID" | |
}; | |
// Initialize Firebase | |
firebase.initializeApp(firebaseConfig); | |
// firebase.analytics(); | |
function handleTokenRefresh() { | |
return messaging.getToken().then( | |
(token) => { | |
console.log("Got a token ", token); | |
}); | |
} | |
const messaging= firebase.messaging(); | |
const permission = messaging.requestPermission() | |
.then( | |
() => handleTokenRefresh() | |
).catch( | |
console.log("No permissions allowed.") | |
) | |
messaging.onMessage((payload) => { | |
{ | |
console.log("on Message received:", payload) | |
} | |
} | |
); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment