Project contained the library used to integrate Pushape back end in a website.
In order to use it you need to get Pushape account: https://glue-labs.com/pushape-invio-notifiche-push-ios-android-api-sdk
Browser support: https://caniuse.com/#feat=push-api
Run npm i pushape-js.
Configure service worker
- create a file in the project root call:
firebase-messaging-sw.js - copy the code below
- replace the Firebase info placeholder with yours
// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here, other Firebase libraries
// are not available in the service worker.
importScripts('https://www.gstatic.com/firebasejs/6.0.4/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/6.0.4/firebase-messaging.js');
console.log('[PushapeJS - SW] Init');
firebase.initializeApp({
appId: '<appId>',
apiKey: '<apiKey>',
authDomain: '<authDomain>',
projectId: '<projectId>',
messagingSenderId: '<senderId>',
});
if (firebase.messaging.isSupported()) {
const messaging = firebase.messaging();
/**
* This will be triggered only if push payload will be missing notification property
*/
messaging.setBackgroundMessageHandler((ev) => {
console.log('[PushapeJS - SW] Handling background message', ev);
showMessage(ev);
});
} else {
console.warn('[PushapeJS - SW] Firebase messaging does not supported');
}
self.addEventListener('push', function (event) {
console.log('[PushapeJS - SW] Receive push event', event);
})
self.addEventListener('notificationclick', function (event) {
console.log('[PushapeJS - SW] Click on notification', event);
event.notification.close();
// This looks to see if the current is already open and focuses if it is
event.waitUntil(clients.matchAll({
type: 'window',
}).then(function (clientList) {
for (let i = 0; i < clientList.length; i++) {
const client = clientList[i];
if (client.url == '/' && 'focus' in client) {
return client.focus();
}
}
if (clients.openWindow) {
return clients.openWindow('/');
}
}));
});
/**
*
* @param {PushEvent} payload
*/
const showMessage = function (payload) {
console.log('[PushapeJS - SW] Handling message', payload);
const notificationTitle = payload.notification.title;
const notificationOptions = {
body: payload.notification.body,
icon: payload.notification.icon,
image: payload.notification.image,
click_action: payload.notification.click_action,
data: payload.notification.data,
need_interaction: true,
};
return self.registration.showNotification(notificationTitle, notificationOptions);
}Use lib
Use in Vanilla JS:
In index.html:
<html>
<body>
...
<!-- External dependencies -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uuid/8.2.0/uuidv4.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.16.0/firebase-app.js"></script>
<!-- Internal dependencies -->
<script src=./node_modules/pushape-js/pushape-js.js"></script>
<!-- Main -->
<script src="index.js"></script>
</body>
</body>
</html>In index.js:
NOTE: This is a fake example used to show how call functions from the library. Check the example app for a more correct flow.
const firebaseApp = PushapeJS.initializeFirebase({
appId: '<appId>',
apiKey: '<apiKey>',
authDomain: '<authDomain>',
projectId: '<firebaseProjectId>',
messagingSenderId: '<senderId>',
});
let registration;
let token;
let uuid = uuidv4();
PushapeJS.initializeFirebaseServiveWorker(firebaseApp)
.then((r) => {
registration = r;
return PushapeJS.askForPermissions(firebaseApp, '');
})
.then((t) => {
token = t;
PushapeJS.initializeSwListeners(registration);
PushapeJS.initSimplePushape(
{
id_app: '',
uuid,
internal_id: 'test',
},
token,
);
});We need to make a POST request to https://fcm.googleapis.com/fcm/send by sending a JSON in the request body.
Below is the structure of the JSON that will be sent:
{
"notification": {
"title": "Firebase",
"body": "Firebase is awesome",
"click_action": "http://localhost:3000/",
"icon": "http://url-to-an-icon/icon.png"
},
"to": "<User Token>"
}In the request header, we need to pass the server key of our project in Firebase and the content-type:
Content-Type: application/json
Authorization: key=SERVER_KEY
The server key is found in the project settings in the Firebase Console under the Cloud Messaging tab.
| Function | Context | Description | |
|---|---|---|---|
initializeFirebase |
Firebase utils | Initialize firebase app and return it. It requires Firebase's project credentials as show in examples | |
initializeFirebaseServiveWorker |
Firebase utils | Register service worker in the client and use it in Firebase if supported. Than it allow to listen push event | |
initializeSwListeners |
Firebase utils | ||
showNotification |
Firebase utils | ||
askForNotificationPermission |
Permission utils | Check for user permission about notification and return a token to use in registerApiPushape function |
|
hasNotificationPermission |
Permission utils | Check if user has permission enable for notification | |
registerApiPushape |
Pushape API | Subscribe to the Pushape notification center. This allow to receive notifications from Pushape back end | |
unregisterApiPushape |
Pushape API | Unsubscribe from Pushape notification center | |
initPushape |
Pushape utils | Wrapper for Firebase initialization process, permssions and Pushape registration. It call each method with in the right sequence | |
initSimplePushape |
Pushape utils | Wrapper for registerApiPushape that provide a platform if not set from the consumer |
Run npm run build:
It:
- clean old files (lib and example app)
- build library from source files
- move lib in the example app
The project use Gitflow as branching model.
The project use Angular commit convention:
- https://www.conventionalcommits.org/en/v1.0.0-beta.2/
- https://gist.github.com/stephenparish/9941e89d80e2bc58a153
This convention is enforce by some git pre-hook.
You could make a traditional commit following the syntax rules or use npm run commit that help you to construct the commit message in the right way.