Skip to content

Instantly share code, notes, and snippets.

View Spyna's full-sized avatar
💭
🚀

Lorenzo Spinelli Spyna

💭
🚀
View GitHub Profile
@Spyna
Spyna / PushNotificationComponent.js
Created August 30, 2019 07:52
A React Component that uses the usePushNotificationHook
import React from "react";
import usePushNotifications from "./usePushNotifications";
export default function PushNotificationDemo() {
const {
userConsent,
pushNotificationSupported,
userSubscription,
onClickAskUserPermission,
onClickSusbribeToPushNotification,
@Spyna
Spyna / usePushNotification.js
Last active June 5, 2023 01:06
React custom Hook to handle push notification
import { useState, useEffect } from "react";
import http from "./utils/http";
//the function to call the push server: https://github.com/Spyna/push-notification-demo/blob/master/front-end-react/src/utils/http.js
import {
isPushNotificationSupported,
askUserPermission,
registerServiceWorker,
createNotificationSubscription,
getUserSubscription
@Spyna
Spyna / sw.js
Created August 29, 2019 15:14
Full service worker to manage Push notifications
function receivePushNotification(event) {
console.log("[Service Worker] Push Received.");
const { image, tag, url, title, text } = event.data.json();
const options = {
data: url,
body: text,
icon: image,
vibrate: [200, 100, 200],
@Spyna
Spyna / push-notifications.js
Created August 29, 2019 15:13
Push notification manager
const pushServerPublicKey = "BIN2Jc5Vmkmy-S3AUrcMlpKxJpLeVRAfu9WBqUbJ70SJOCWGCGXKY-Xzyh7HDr6KbRDGYHjqZ06OcS3BjD7uAm8";
/**
* checks if Push notification and service workers are supported by your browser
*/
function isPushNotificationSupported() {
return "serviceWorker" in navigator && "PushManager" in window;
}
/**
@Spyna
Spyna / service-worker.js
Created August 26, 2019 15:39
How to open a web push notification
function openPushNotification(event) {
console.log("[Service Worker] Notification click Received.", event.notification.data);
event.notification.close();
event.waitUntil(clients.openWindow(event.notification.data));
}
self.addEventListener("notificationclick", openPushNotification);
@Spyna
Spyna / service-worker.js
Last active August 26, 2019 15:39
How to receive a web push notification i a service worker
function receivePushNotification(event) {
console.log("[Service Worker] Push Received.");
//const { image, tag, url, title, text } = event.data.json();
const notificationText = event.data.text();
const title = "A brand new notification!"
const options = {
//data: url,
data: "something you want to send within the notification, such an URL to open"
@Spyna
Spyna / create-push-notification-subscription.js
Last active August 26, 2019 14:35
How to create a web push notification subscription
const pushServerPublicKey = "<A PUSH SERVER PUBLIC KEY GOES HERE>";
/**
*
* using the registered service worker creates a push notification subscription and returns it
*
*/
function createNotificationSubscription() {
//wait for service worker installation to be ready, and then
return navigator.serviceWorker.ready.then(function(serviceWorker) {
@Spyna
Spyna / push-notifications.js
Created August 26, 2019 13:27
How to display web push notificaitons
/**
* checks if Push notification and service workers are supported by your browser
*/
function isPushNotificationSupported() {
return "serviceWorker" in navigator && "PushManager" in window;
}
/**
* asks user consent to receive push notifications and returns the response of the user, one of granted, default, denied
*/
@Spyna
Spyna / push-notifications-base.js
Last active August 26, 2019 13:16
How to show a web push notification
const img = "/images/jason-leung-HM6TMmevbZQ-unsplash.jpg";
const text = "Take a look at this brand new t-shirt!";
const title = "New Product Available";
const options = {
body: text,
icon: "/images/jason-leung-HM6TMmevbZQ-unsplash.jpg",
vibrate: [200, 100, 200],
tag: "new-product",
image: img,
badge: "https://spyna.it/icons/android-icon-192x192.png",
const asyncForEach = async (array, callback) => {
for (let index = 0; index < array.length; index++) {
await callback(array[index], index, array);
}
}