From 62bd02220fb63b9ce15a9a587929ede3d8a5e542 Mon Sep 17 00:00:00 2001 From: Michael Bleigh Date: Tue, 27 Sep 2016 19:39:15 -0700 Subject: [PATCH 1/7] First pass. Work to do. --- demo/firebase-messaging.html | 26 +++++++ demo/manifest.json | 4 ++ firebase-app.html | 17 ++++- firebase-messaging-sw.js | 22 ++++++ firebase-messaging.html | 127 +++++++++++++++++++++++++++++++++++ firebase.html | 2 +- polymerfire.html | 1 + 7 files changed, 195 insertions(+), 4 deletions(-) create mode 100644 demo/firebase-messaging.html create mode 100644 demo/manifest.json create mode 100644 firebase-messaging-sw.js create mode 100644 firebase-messaging.html diff --git a/demo/firebase-messaging.html b/demo/firebase-messaging.html new file mode 100644 index 0000000..7407081 --- /dev/null +++ b/demo/firebase-messaging.html @@ -0,0 +1,26 @@ + + + + + firebase-messaging demo + + + + + + + + + diff --git a/demo/manifest.json b/demo/manifest.json new file mode 100644 index 0000000..9176239 --- /dev/null +++ b/demo/manifest.json @@ -0,0 +1,4 @@ +{ + "//": "Note: this is NOT the Sender ID for your project. Use as is.", + "gcm_sender_id": "153517668099" +} diff --git a/firebase-app.html b/firebase-app.html index 2364843..8ba2783 100644 --- a/firebase-app.html +++ b/firebase-app.html @@ -80,6 +80,15 @@ value: null }, + /** + * The Firebase Cloud Messaging Sender ID for your project. You can find + * this in the Firebase Console under "Web Setup". + */ + messagingSenderId: { + type: String, + value: null + }, + /** * The Firebase app object constructed from the other fields of * this element. @@ -87,17 +96,19 @@ app: { type: Object, notify: true, - computed: '__computeApp(name, apiKey, authDomain, databaseUrl, storageBucket)' + computed: '__computeApp(name, apiKey, authDomain, databaseUrl, storageBucket, messagingSenderId)' } }, - __computeApp: function(name, apiKey, authDomain, databaseUrl, storageBucket) { + __computeApp: function(name, apiKey, authDomain, databaseUrl, storageBucket, messagingSenderId) { + console.log(arguments); if (apiKey && authDomain && databaseUrl) { var init = [{ apiKey: apiKey, authDomain: authDomain, databaseURL: databaseUrl, - storageBucket: storageBucket + storageBucket: storageBucket, + messagingSenderId: messagingSenderId }]; if (name) { diff --git a/firebase-messaging-sw.js b/firebase-messaging-sw.js new file mode 100644 index 0000000..1a859ab --- /dev/null +++ b/firebase-messaging-sw.js @@ -0,0 +1,22 @@ +// temporary measure, will not be necessary with release version. +const window = self; + +importScripts('https://www.gstatic.com/firebasejs/staging/3.5.0-rc.2/firebase.js'); + +firebase.initializeApp({ + messagingSenderId: '630461474709' +}); + +const messaging = firebase.messaging(); +messaging.setBackgroundMessageHandler(data => { + console.log("received background message " + data); + // Show notification here + const notificationTitle = 'Background Message Title'; + const notificationOptions = { + body: 'Background Message body.', + icon: 'https://dummyimage.com/600x600/000/fff.jpg&text=PlaceHolder', + }; + + return self.registration.showNotification(notificationTitle, + notificationOptions); +}); diff --git a/firebase-messaging.html b/firebase-messaging.html new file mode 100644 index 0000000..791dbbb --- /dev/null +++ b/firebase-messaging.html @@ -0,0 +1,127 @@ + + + + + + diff --git a/firebase.html b/firebase.html index 6e7d54c..ce5c977 100644 --- a/firebase.html +++ b/firebase.html @@ -6,4 +6,4 @@ https://github.com/firebase/polymerfire/blob/master/LICENSE --> - + diff --git a/polymerfire.html b/polymerfire.html index ba6004f..559d819 100644 --- a/polymerfire.html +++ b/polymerfire.html @@ -9,3 +9,4 @@ + From 347fe935ed742d81a29440e85971f3b6b95d21e3 Mon Sep 17 00:00:00 2001 From: Michael Bleigh Date: Wed, 28 Sep 2016 10:56:22 -0700 Subject: [PATCH 2/7] Add some more to demo. --- demo/firebase-messaging.html | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/demo/firebase-messaging.html b/demo/firebase-messaging.html index 7407081..2f58353 100644 --- a/demo/firebase-messaging.html +++ b/demo/firebase-messaging.html @@ -15,11 +15,30 @@ database-url="https://polymerfire-test.firebaseio.com" storage-bucket="polymerfire-test.appspot.com" messaging-sender-id="630461474709"> - + + + +
+ + + + +
Token[[token]]
Last Message:
[[json(lastMessage)]]
+
From 3a91ed605dde91e622032714858b308edde5879f Mon Sep 17 00:00:00 2001 From: Matthew Gaunt Date: Wed, 28 Sep 2016 13:17:21 -0700 Subject: [PATCH 3/7] Minor tweaks (#23) --- demo/firebase-messaging.html | 2 +- demo/manifest.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/demo/firebase-messaging.html b/demo/firebase-messaging.html index 2f58353..74c9da3 100644 --- a/demo/firebase-messaging.html +++ b/demo/firebase-messaging.html @@ -14,7 +14,7 @@ auth-domain="polymerfire-test.firebaseapp.com", database-url="https://polymerfire-test.firebaseio.com" storage-bucket="polymerfire-test.appspot.com" - messaging-sender-id="630461474709"> + messaging-sender-id="153517668099"> Date: Wed, 5 Oct 2016 19:02:04 -0700 Subject: [PATCH 4/7] updates --- demo/firebase-messaging-sw.js | 22 +++++++ demo/firebase-messaging.html | 88 ++++++++++++++++++++----- firebase-messaging-sw.js | 22 ------- firebase-messaging.html | 121 ++++++++++++++++++++++++++++++---- 4 files changed, 203 insertions(+), 50 deletions(-) create mode 100644 demo/firebase-messaging-sw.js delete mode 100644 firebase-messaging-sw.js diff --git a/demo/firebase-messaging-sw.js b/demo/firebase-messaging-sw.js new file mode 100644 index 0000000..50859d5 --- /dev/null +++ b/demo/firebase-messaging-sw.js @@ -0,0 +1,22 @@ +// temporary measure, will not be necessary with release version. +const window = self; + +importScripts('https://www.gstatic.com/firebasejs/staging/3.5.0-rc.2/firebase.js'); + +firebase.initializeApp({ + messagingSenderId: '153517668099' +}); + +const messaging = firebase.messaging(); +// messaging.setBackgroundMessageHandler(data => { +// console.log("received background message " + data); +// // Show notification here +// const notificationTitle = 'Background Message Title'; +// const notificationOptions = { +// body: 'Background Message body.', +// icon: 'https://dummyimage.com/600x600/000/fff.jpg&text=PlaceHolder', +// }; + +// return self.registration.showNotification(notificationTitle, +// notificationOptions); +// }); diff --git a/demo/firebase-messaging.html b/demo/firebase-messaging.html index 74c9da3..7103e19 100644 --- a/demo/firebase-messaging.html +++ b/demo/firebase-messaging.html @@ -1,34 +1,89 @@ + firebase-messaging demo - + + + +

firebase-messaging demo

diff --git a/firebase-messaging-sw.js b/firebase-messaging-sw.js deleted file mode 100644 index 1a859ab..0000000 --- a/firebase-messaging-sw.js +++ /dev/null @@ -1,22 +0,0 @@ -// temporary measure, will not be necessary with release version. -const window = self; - -importScripts('https://www.gstatic.com/firebasejs/staging/3.5.0-rc.2/firebase.js'); - -firebase.initializeApp({ - messagingSenderId: '630461474709' -}); - -const messaging = firebase.messaging(); -messaging.setBackgroundMessageHandler(data => { - console.log("received background message " + data); - // Show notification here - const notificationTitle = 'Background Message Title'; - const notificationOptions = { - body: 'Background Message body.', - icon: 'https://dummyimage.com/600x600/000/fff.jpg&text=PlaceHolder', - }; - - return self.registration.showNotification(notificationTitle, - notificationOptions); -}); diff --git a/firebase-messaging.html b/firebase-messaging.html index 791dbbb..f66f1dd 100644 --- a/firebase-messaging.html +++ b/firebase-messaging.html @@ -1,6 +1,47 @@ + + + + + From c07f215b1f8ea7cf9150b9d01fbc1e88b7800c79 Mon Sep 17 00:00:00 2001 From: Michael Bleigh Date: Tue, 18 Oct 2016 14:32:14 +0100 Subject: [PATCH 7/7] Improve docs, add note to demo, pass custom sw to activate --- demo/firebase-messaging-sw.js | 21 ++++++--------------- demo/firebase-messaging.html | 11 +++++++++-- firebase-messaging.html | 16 +++++++++++++++- 3 files changed, 30 insertions(+), 18 deletions(-) diff --git a/demo/firebase-messaging-sw.js b/demo/firebase-messaging-sw.js index 50859d5..6ec971d 100644 --- a/demo/firebase-messaging-sw.js +++ b/demo/firebase-messaging-sw.js @@ -1,22 +1,13 @@ // temporary measure, will not be necessary with release version. -const window = self; +var window = self; -importScripts('https://www.gstatic.com/firebasejs/staging/3.5.0-rc.2/firebase.js'); +importScripts( + 'https://www.gstatic.com/firebasejs/staging/3.5.0/firebase-app.js', + 'https://www.gstatic.com/firebasejs/staging/3.5.0/firebase-messaging.js' +); firebase.initializeApp({ messagingSenderId: '153517668099' }); -const messaging = firebase.messaging(); -// messaging.setBackgroundMessageHandler(data => { -// console.log("received background message " + data); -// // Show notification here -// const notificationTitle = 'Background Message Title'; -// const notificationOptions = { -// body: 'Background Message body.', -// icon: 'https://dummyimage.com/600x600/000/fff.jpg&text=PlaceHolder', -// }; - -// return self.registration.showNotification(notificationTitle, -// notificationOptions); -// }); +var messaging = firebase.messaging(); \ No newline at end of file diff --git a/demo/firebase-messaging.html b/demo/firebase-messaging.html index 7103e19..4788bc0 100644 --- a/demo/firebase-messaging.html +++ b/demo/firebase-messaging.html @@ -45,6 +45,10 @@ main { padding: 32px; } + + p { + margin: 32px 32px 0; + } @@ -56,13 +60,16 @@ window.addEventListener('WebComponentsReady', function() { if (navigator.serviceWorker) { navigator.serviceWorker.register('firebase-messaging-sw.js').then(function(sw) { - firebase.messaging().useServiceWorker(sw); - app.$.messaging.activate(); + app.$.messaging.activate(sw); }); } });

firebase-messaging demo

+

This demo will allow you to request notification permissions and obtain an instance token. + To actually test receipt of push messages, you will need to clone the demo and modify the + messagingSenderId in this file and in firebase-messaging-sw.js + in this directory.