The importance of notifications in mobile and web applications cannot be over-emphasized as they are an important and integral part of any modern application. Users want to get updated when events or activities happen so they don't miss them~~.~~ ## Goal Throughout this tutorial, we will be looking at how we can achieve push notifications in our React app with the aid of Strapi, Cron Jobs, and Rest API. ## Prerequisites To get the most out of this tutorial, you need the following: - Basic knowledge of [React.js](https://reactjs.org/) - [NPM installed](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) [](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) - [Node 14 or higher](https://nodejs.org/en/download/) - Tailwind CSS - Axios - Strapi v4 ## Using Router V6 The importance of routers in software applications cannot be over-emphasized as they are essential to how movements and data are passed from one screen or component to another. Routers in React as a library have evolved over time; it has gotten even better with the new version of React Router v6, which is a groundbreaking update from the popular React Router v5. **React Router 6 vs React Router 5** - React Router v6 has a smaller bundle size compared to v5. - There is no need for the “**exact**” prop parameter in Router v6 as in v5. - **UseHistory** hook in React v5 has been replaced with **useNavigate** hook with more added functionalities. - **Redirect** component in React v5 has been replaced with **Navigate** component in v6. - A**ctiveStyle** and **ActiveClassName** in React v5 have been removed from the **NavLink** component. - Replacement of **Switch** component in React v5 with **Routes** component. - See more features of React v6 in the [documentation](https://reactrouter.com/docs/en/v6/getting-started/overview) ## Strapi Setup To set up Strapi for your project, you need to run the following commands: ```bash npx create-strapi-app@latest push-notification --quickstart ``` After running the command above, dependencies get installed and our browser starts up, redirecting us to a login screen to create an admin account. Input the necessary credentials to create an admin account. ![Strapi Admin page](https://paper-attachments.dropbox.com/s_D085DB73FB8FEBADB5AEEEA0A409B87E72D2FC3CE465C6240D7D3C95F3A24B5C_1646377482325_Screenshot+2022-03-04+at+07.57.59.png) After creating an admin account, you will be directed to your dashboard, where you can set up Strapi for the asset management application. On our admin dashboard, on the left, under plugins, click on `Content-Type Builder` to easily create a new collection type. ![Creating content types](https://paper-attachments.dropbox.com/s_D085DB73FB8FEBADB5AEEEA0A409B87E72D2FC3CE465C6240D7D3C95F3A24B5C_1646385840307_Screenshot+2022-03-04+at+10.23.30.png) We will be creating two collection types called *Assets* and *Logs*. To achieve this, we will follow the steps below. - After clicking the text button Create a new collection type, in the display name, we will name it Asset, the other fields will automatically fill up themselves unless you want to give them a different name. - Afterwards, click on the continue button below to add the necessary fields. ## Assets Collection - name: This field will contain our assets' names. - description: This will hold a description of the assets. - model_number: Each asset will have a model number. - category: Each asset will have a category, either `perishable` or `non-perishable``.` - is_available: In this field, after creating the name, we will click on the advanced settings at the top of the dialog and make the default value of the is_available field true. - validity_period: This field will hold how long the assets will stay. - is_expired: This field will be set to “false” on default, and it will tell whether the asset has expired or not. ## Log Collection - collected_at: This field will hold details of when the assets were collected or uploaded. - returned_at: This field will be set to `null` on default until an asset has been returned. ## Notification Collection - message: This text field will contain the body of the notification message. - type: This field will show if the message is a log message, asset, or user. - Metadata: This field is a json field that holds any extra data or provides more information about the notification. ## Creating a Relationship Between the Assets and Logs On the main navigation bar, click on the `content-Type builder`. For our two collections, `Log` and `Assets`, we add one more field to them of type `Relational` so we can relate our Log to many users. We will do the same for our `Assets`, but we will relate it to our `Log` collection. ![Edit permissions](https://paper-attachments.dropbox.com/s_D085DB73FB8FEBADB5AEEEA0A409B87E72D2FC3CE465C6240D7D3C95F3A24B5C_1646391953578_Screenshot+2022-03-04+at+12.02.41.png) Click on `Add new field to this collection type` and this field type is `Relational` . ## Setting up Roles and Permissions After creating this content, we need to make sure that our API is allowed to perform certain actions on the system. To do this, - Click on the settings in the `General` category on the main navigation pane. - Next, under `*Users & Permissions Plugin*`, click on `Roles`. - Then, click on `authenticated` and all our collections will show up. - Select on the `Assets` collection. - Click on the dropdown button and check the following permissions: create, find and findOne. - Next, select *l**og collections* under permissions and check the following permissions to create, find, update and findOne. - Next, choose the Upload plugin under `Roles` and check all the permissions. ![Check permissions](https://paper-attachments.dropbox.com/s_D085DB73FB8FEBADB5AEEEA0A409B87E72D2FC3CE465C6240D7D3C95F3A24B5C_1646449215061_Screenshot+2022-03-05+at+03.59.52.png) **Note: Hit the save button in the top right corner of your screen to save your changes.** ## Setting up Push Notifications for the Application Hurray! We made it to the *push notification* feature; let’s dive right in. We will be creating new collections called *Notification* and *UserNotificationKey*. **Notification Collection** This collection will hold two(2) fields, namely: 1. **Message:** This field will contain the body of our notification with the type of text. 2. **Metadata:** This field is to hold more information about our notification and its type will be json. **UserNotificationKey** The collection will hold two fields: **a. Users_permissions_user:** This field will carry a type `Relation` and will be related with `Users` default collection as shown in the image below. ![Creating a relationship type](https://paper-attachments.dropbox.com/s_D085DB73FB8FEBADB5AEEEA0A409B87E72D2FC3CE465C6240D7D3C95F3A24B5C_1646453191558_Screenshot+2022-03-05+at+05.04.44.png) **b. subscription:** This field will have a type json. ## Dependencies for our Frontend We will need the following dependencies to aid in building our frontend. - **React App with PWA Functions** as we will be using service workers in this application. To install a pw react app, use the following commands: `npx create-react-app my-app --template cra-template-pwa` on your terminal. - **Axios** - To make HTTP requests. To install this dependency, use the following command: `yarn add axios` (if you use yarn as your package manager) or `npm install axios` (if you use npm as your package manager). - **TailwindCSS**: A CSS library. [To add TailwindCSS to your React app, follow the official documentation here.](https://tailwindcss.com/docs/guides/create-react-app) - **ReactRouterDOM (React Router v6):** For handling routing on the app. To install this, use the following command: `yarn add react-router-dom` (if you use yarn as your package manager) or `npm install react-router-dom` (if you use npm as your package manager). ## Building the UI This is what our front-end should look like once we are done with this tutorial. ![Our Asset manager should look like this](https://paper-attachments.dropbox.com/s_D085DB73FB8FEBADB5AEEEA0A409B87E72D2FC3CE465C6240D7D3C95F3A24B5C_1646759404309_Screenshot+2022-03-08+at+18.04.34.png) As stated earlier, we will be using TailwindCSS majorly to style this application. We will also add some generic styles for a little more customisation. The generic styles are present in our `index.css` file. ## Implementing Top Navigation ``` import React from 'react'; import { Link } from 'react-router-dom' const Navbar = () => { return ( ); }; export default Navbar; ``` ## Our Pages For this project, we will be having four pages - Asset Page - Index Page: This page shows the list of assets and links to the *Create Assets* and *Edit* *Assets* pages and buttons for deleting a specific asset. - Login Page: To enable authentication for already signed-up users on the app. - Signup Page: To enable authentication for new users on the app. ## Managing States in our Assets Application Let’s dive into some preliminary procedures for managing states in our app. In this section, we will be making HTTP requests to Strapi to signup a new user on the app. The code block `MainContext.js` below shows how we will handle requests and states on the app. ``` import React, { createContext } from 'react'; import axios from 'axios'; axios.defaults.baseURL = "http://localhost:1337/api"; const initialState = () => ({ user: localStorage.getItem("strapi") ? JSON.parse(localStorage.getItem("strapi")).user : null, token: localStorage.getItem("strapi") ? JSON.parse(localStorage.getItem("strapi")).token : null, assets:{ allAssets: null, asset: null, } }) // create context export const generalContext = createContext({}) export const StateAndEndpointHOC = (props) => { const [state, setState] = React.useState(initialState); let config = { headers: { 'authorization': "Bearer " +state.token || null } } const endpoints = { login: async(params, callback)=> { try{ const res = await axios.post('/auth/local', params) console.log('endpoint result--login', res) if(callback && typeof callback === 'function'){ callback(res, null) } console.log(res.data.user); setState(() => ({...state, token: res?.data?.jwt, user: res.data.user })) localStorage.setItem('strapi', JSON.stringify({ token: res?.data?.jwt, user: res?.data?.user })) return res }catch(err){ console.log(err.response.data.error.message) if(callback && typeof callback === 'function'){ callback(null, err) } throw new Error(err) } }, signup: async(params, callback)=>{ try{ const res = await axios.post('/auth/local/register', params) console.log('endpoint result--signup', res) if(callback && typeof callback === 'function'){ callback(res, null) } setState(() => ({...state, token: res?.data?.jwt, user: res?.data?.user})) localStorage.setItem('strapi', JSON.stringify({ token: res?.data?.jwt, user: res?.data?.user })) return res }catch(err){ if(callback && typeof callback === 'function'){ callback(null, err) } throw new Error(err) } }, getAssets: async(callback)=>{ try{ const res = await axios.get('/assets', config) console.log('endpoint result--get', res) if(callback && typeof callback === 'function'){ callback(res, null) } setState(() => ({ ...state, assets:{...state.assets, allAssets: res?.data?.data} })) return res }catch(err){ if(callback && typeof callback === 'function'){ callback(null, err) } throw new Error(err) } }, getSingleAsset: async(id, callback)=>{ try{ const res = await axios.get(`/assets/${id}`, config) console.log('endpoint result--get single asset', res?.data?.data) setState(()=> ({...state, assets:{...state.assets, asset: res?.data?.data} })) if(callback && typeof callback === 'function'){ callback(res, null) } return res }catch(err){ if(callback && typeof callback === 'function'){ callback(null, err) } throw new Error(err) } }, deleteSingleAsset: async(id, callback)=>{ try{ const res = await axios.delete(`/assets/${id}`, config) console.log('endpoint result--get', res) if(callback && typeof callback === 'function'){ callback(res, null) } return res }catch(err){ if(callback && typeof callback === 'function'){ callback(null, err) } throw new Error(err) } }, createAssets: async(data, callback)=>{ try{ const res = await axios.post('/assets',{ data }, config) console.log('endpoint result--create', res) if(callback && typeof callback === 'function'){ callback(res, null) } return res }catch(err){ if(callback && typeof callback === 'function'){ callback(null, err) } throw new Error(err) } }, editAssets: async(data, callback)=>{ try{ const res = await axios.put('/assets', { data }, config) console.log('endpoint result--edit', res) if(callback && typeof callback === 'function'){ callback(res, null) } return res }catch(err){ if(callback && typeof callback === 'function'){ callback(null, err) } throw new Error(err) } }, logout: ()=>{ localStorage.removeItem('strapi') setState({...initialState}) } } const allProps = {...state, setState, endpoints } return <> }; ``` ## Entry Point ``` import React from 'react'; import AllRoutes from './components/Routes/AllRoutes'; import { BrowserRouter } from "react-router-dom"; import { generalContext, StateAndEndpointHOC } from './contexts/MainContext'; function App(props) { const value = React.useMemo(() => props, [props]); return (

); } // eslint-disable-next-line import/no-anonymous-default-export export default () => ; ``` The above code in our `app.js` is where we pass the state manager as a prop to our context provider, which will supply states to all components of our application. ## Handling Authentication To Sign in as a User ``` import React, { useState, useContext } from 'react'; import { Link, Navigate } from 'react-router-dom'; import { generalContext } from '../contexts/MainContext'; import { subscribeUser } from '../subscription' const Signup = () => { const StateManager = useContext(generalContext) const [loading, setloading] = useState(false); const [error, setError] = useState(null) const [state, setstate] = useState({ email: null, username: null, password: null, }); const handleChange = (e) => { setstate({ ...state, [e.target.name]: e.target.value }); }; const handleSubmit = (e) => { e.preventDefault(); setloading(true); !StateManager?.token && StateManager?.endpoints.signup(state, (success, error) => { if(error){ setError(error.response.data.error.message); return alert(error.response.data.error.message); } if(success){ setError(null) subscribeUser(success.data) StateManager.endpoints.getAssets() return; } setloading(false); }) }; if (StateManager?.token) { console.log('token-login', StateManager?.token) return ; } return (

); }; export default Signup; ``` For the above component, we are basically extracting the state manager using the useContext hook and making a HTTP request to Strapi to sign up a new user on our app. The return of the user’s information and JWT token signifies that the user has signed up to our app. To Log in as a User ``` import React, { useState, useContext } from 'react'; import { Link, Navigate } from 'react-router-dom'; import { generalContext } from '../contexts/MainContext'; import { subscribeUser } from '../subscription' const Login = () => { const StateManager = useContext(generalContext) const [loading, setloading] = useState(false); const [error, setError] = useState(null) const [state, setstate] = useState({ identifier: "", password: "", }); const handleChange = (e) => { setstate({ ...state, [e.target.name]: e.target.value }); }; const handleSubmit = (e) => { e.preventDefault(); setloading(true); !StateManager?.token && StateManager?.endpoints.login(state, async(success, error)=>{ if(error){ setError(error.response.data.error.message); return alert(error.response.data.error.message); } if(success){ setError(null) subscribeUser(success.data) StateManager.endpoints.getAssets() return; } setloading(false); }) }; if (StateManager?.token) { console.log('token-login', StateManager?.token) return ; } return (

); }; export default Login; ``` For the above component, we are basically extracting the state manager using the useContext hook and making an HTTP request to Strapi to login as an already-signed up user on our app. The return of the user’s information and JWT token signifies that the user has logged in on our assets manager app. **Assets Page** ``` import React, { useContext, useEffect } from 'react'; import { Link } from 'react-router-dom'; import AssetsCard from '../../components/assets/AssetsCard'; import { generalContext } from '../../contexts/MainContext'; const AssetsPage = (props) => { const StateManager = useContext(generalContext); useEffect(()=>{ StateManager.endpoints.getAssets() }, []) return (

Create a new asset

{StateManager?.user?.email}

{ StateManager?.assets?.allAssets ? StateManager.assets.allAssets.map((curr, idx)=>{ return (

{props.children}

) }):(

NO Asset

) }

); }; export default AssetsPage; ``` From the component above, once a user is authenticated, he is redirected to the asset index page which lists or holds all the available assets and buttons to create, edit, or delete an asset. When hovering on the asset card, two buttons are displayed to delete and edit assets. **Creating an Asset** ``` import React, { useState, useContext } from 'react'; import { Link, useLocation, useNavigate, Navigate } from 'react-router-dom'; import { generalContext } from '../../contexts/MainContext'; import { subscribeUser } from '../../subscription' const CreateAssets = ({token}) => { const StateManager = useContext(generalContext) const location = useLocation(); let navigate = useNavigate(); const [loading, setloading] = useState(false); const [error, setError] = useState(null) const [state, setstate] = useState({ name: '', description: '', model_number: '', validity_period: '', category: '', is_available: false, logs: [], is_expired: false, }); const handleChange = (e) => { switch (e.target.type) { case "number": setstate({ ...state, [e.target.name]: parseFloat(e.target.value) }); break; case "checkbox": setstate({ ...state, [e.target.name]: e.target.checked }); break; default: setstate({ ...state, [e.target.name]: e.target.value }); } }; const handleSubmit = (e) => { e.preventDefault(); setloading(true); StateManager?.endpoints.createAssets(state, (success, error) => { if(error){ setError(error.response.data.error.message); alert(error.response.data.error.message); } if(success){ setError(null) subscribeUser(success.data) StateManager?.endpoints.getAssets() navigate('/assets'); } setloading(false); }) }; return (

Create a new Asset

Asset Name

Asset description

Asset model number

Asset validity period

Asset category

is Asset available?

is Asset expired?

{/*

logs

*/}

); }; export default CreateAssets; ``` Once a user is authenticated, they can create a new asset. This is done by the user inputting the necessary information as shown in the code above. ## Editing Assets ``` import React, { useLayoutEffect, useEffect, useState, useContext, useCallback, useMemo } from 'react'; import { useParams, useNavigate, Navigate } from 'react-router-dom'; import { generalContext } from '../../contexts/MainContext'; import { subscribeUser } from '../../subscription' const EditAssets = () => { const StateManager = useContext(generalContext) const { id } = useParams(); let navigate = useNavigate(); const [loading, setloading] = useState(false); const [error, setError] = useState(null) const [state, setstate] = useState({ name: null, description: null, model_number: null, validity_period: null, category: null, is_available: false, logs: [], is_expired: false, }); const handleChange = (e) => { switch (e.target.type) { case "number": setstate({ ...state, [e.target.name]: parseFloat(e.target.value) }); break; case "checkbox": setstate({ ...state, [e.target.name]: e.target.checked }); break; default: setstate({ ...state, [e.target.name]: e.target.value }); } }; const handleSubmit = (e) => { e.preventDefault(); setloading(true); StateManager?.endpoints.editAssets(state, (success, error) => { if(error){ setError(error.response.data.error.message); alert(error.response.data.error.message); } if(success){ setError(null) subscribeUser(success.data) StateManager?.endpoints.getSingleAsset(id) StateManager?.endpoints.getAssets() navigate('/assets'); } setloading(false); }) }; const getAsset = useCallback(()=>{ console.log('location', id) setloading(true); return StateManager?.endpoints.getSingleAsset(id, (success, error) => { if(error){ setError(error.response.data.error.message); alert(error.response.data.error.message); } if(success){ setError(null) subscribeUser(success) setstate(()=> ({ name: StateManager?.assets?.asset?.attributes?.name, description: StateManager?.assets?.asset?.attributes?.description, model_number: StateManager?.assets?.asset?.attributes?.model_number, validity_period: StateManager?.assets?.asset?.attributes?.validity_period, category: StateManager?.assets?.asset?.attributes?.category, is_available: StateManager?.assets?.asset?.attributes?.is_available, logs: [], is_expired: StateManager?.assets?.asset?.attributes?.is_expired, })) } setloading(false); }) },[]); useEffect(() => { getAsset() }, [StateManager.assets.asset, id]) return (

{!loading && StateManager?.assets?.asset ? (

Edit an Asset

Asset Name

Asset description

Asset model number

Asset validity period

Asset category

is Asset available?

is Asset expired?

{/*

logs

*/}

):!loading && error ?(

{error}

):(

Loading...

)}

); }; export default EditAssets; ``` From the code above, users can edit an asset when they hover on the asset card as two buttons will show up, of which one is to edit the asset and the other is to delete the asset. ![Edit and Delete an asset.](https://paper-attachments.dropbox.com/s_D085DB73FB8FEBADB5AEEEA0A409B87E72D2FC3CE465C6240D7D3C95F3A24B5C_1646759913444_Screenshot+2022-03-08+at+18.17.11.png) ## Implementing Push Notifications We have finally reached the most important part of this article as we will be learning to create push notifications using cron jobs and web push. **What is Web Push?** [Web Push](https://www.npmjs.com/package/web-push) is an npm package that helps users push real time events to clients, usually triggered from the backend and, in our case, Strapi is the backend. To make use of this package, we need to install it using the following command: `yarn add web-push`. Create a new `web-push.js` file in the config folder of our backend and add the following code: ``` const { readFileSync } = require('fs'); const { join } = require('path'); const webpush = require('web-push') const vapidKeys = JSON.parse(readFileSync(join(__dirname, 'vapidKeys.json')).toString()); webpush.setVapidDetails( 'mailto:example@yourdomain.org', vapidKeys.publicKey, vapidKeys.privateKey ) const notify = async (strapi, data) => { const users = await strapi.entityService.findMany( 'api::user-notification-key.user-notification-key', { filters: { subscription: { $notNull: true } } }); users.forEach(user => { setTimeout(() => { webpush.sendNotification( user.subscription, JSON.stringify(data) ).then(() => console.log('notification sent')).catch(console.error) }, 6000) }) } module.exports = { webpush, notify, }; ``` Let's dive in to what's happening in the code above. To use the web-push package, we need to import the web-push package into our `web-push.js` folder and we need vapid keys to sign the push notifications. These keys can be generated using the following code that checks if there is already a file that holds the vapid keys else it creates a new one. Web push documentation warns against generating vapid keys more than once. To ensure we do not have our vapid keys generated twice, we find a way to reach the already generated vapid key file and make a check as follows. We then read it and pass the values of that file to our web push detail function. ``` const pathToVapidKey = join(__dirname, 'vapidKeys.json'); if (!existsSync(pathToVapidKey)) { const keys = webpush.generateVAPIDKeys(); writeFileSync(pathToVapidKey, JSON.stringify(keys)); } const vapidKeys = JSON.parse(readFileSync(pathToVapidKey).toString()); webpush.setVapidDetails( 'mailto:example@yourdomain.org', vapidKeys.publicKey, vapidKeys.privateKey ) ``` **Trigger Notification** Recall that the field we gave the UserNotificationKey was a subscription field. We will fetch all subscription fields that are not empty and loop through for every user and use the `webpush.sendNotification` function to trigger notifications. We have added timing to the notification to avoid queuing of notifications. The code below shows how we can achieve this: ``` const notify = async (strapi, data) => { const users = await strapi.entityService.findMany( 'api::user-notification-key.user-notification-key', { filters: { subscription: { $notNull: true } } }); users.forEach(user => { setTimeout(() => { webpush.sendNotification( user.subscription, JSON.stringify(data) ).then(() => console.log('notification sent')).catch(console.error) }, 6000) }) } module.exports = { webpush, notify, }; ``` ## Setting up Cron Job Cron Job is a utility program that allows users to run or execute scripts periodically. To enable Cron Jobs, set `cron.enabled` to `true` in the `server.js` file, still in the config folder and declare the jobs as such: ``` const cronTasks = require("./cron-tasks"); module.exports = ({ env }) => ({ host: env('HOST', '0.0.0.0'), port: env.int('PORT', 1337), app: { keys: env.array('APP_KEYS'), }, cron: { enabled: true, tasks: cronTasks, }, }); ``` Cron Jobs will help you look out for expired assets and notify us when it expires. To set up Cron Job in our application, we created a file called `cron-task.js` in our `config` folder. This Cron Job will be executed every minute. ``` const { notify } = require('./web-push'); module.exports = { '*/1 * * * * *': async ({ strapi }) => { const expiredAssets = await strapi.entityService.findMany('api::asset.asset', { filters: { validity_period: { $lte: new Date() }, is_expired: false }, }); for (const e of expiredAssets) { const notice = await strapi.entityService.create('api::notification.notification', { data: { message: `Asset ${e.name} with model number ${e.model_number} has expired`, type: 'asset', metadata: { id: e.id } } }) await strapi.entityService.update('api::asset.asset', e.id, { data: { is_expired: true } }); await notify(strapi, notice); } }, }; ``` Let’s explain what happening in our code: ``` module.exports = { '*/1 * * * * *': async ({ strapi }) => { const expiredAssets = await strapi.entityService.findMany('api::asset.asset', { filters: { validity_period: { $lte: new Date() }, is_expired: false }, }); ``` Based on the code above, we have a Cron Job that allows our function to run every minute as it filters through all assets and fetches all expired assets. ``` for (const e of expiredAssets) { const notice = await strapi.entityService.create('api::notification.notification', { data: { message: `Asset ${e.name} with model number ${e.model_number} has expired`, https://www.dropbox.com/scl/fi/dk7qxelfy1cibw3shkm6f/Implement-Push-Notification-Building-an-Asset-Manager-using-Strapi-Cron-jobs-and-Rest-API.paper?dl=0&rlkey=i9m7kjg6n6wipohk7prybugxf type: 'asset', metadata: { id: e.id } } }) await strapi.entityService.update('api::asset.asset', e.id, { data: { is_expired: true } }); await notify(strapi, notice); } }, ``` Next, it loops through the already fetched assets based on the filter from our first function and creates a notification body for every expired asset using their id as identifiers, after which the expired status of the assets are updated. **Add Notification on Creation and Deletion of Assets** We would like to be notified on every creation and deletion of assets in our application. To do this, we need to extend the asset controller. To access the assets controller, go to `src >> api >> assets >> controllers >> asset.js`. ``` const { createCoreController } = require('@strapi/strapi').factories; module.exports = createCoreController(''api::asset.asset'); ``` The code above is what we should see in our file initially but we will extend these controllers to be able to get notified on every operation made. Recall that we only want to be notified when an asset is created or deleted so we add a notify object from web-push package. ``` 'use strict'; const { notify } = require('../../../../config/web-push'); /** * asset controller */ const { createCoreController } = require('@strapi/strapi').factories; module.exports = createCoreController('api::asset.asset', ({ strapi }) => ({ async find(ctx) { const response = await super.find(ctx); return response; }, async update(ctx) { const response = await super.update(ctx); return response; }, async findOne(ctx) { const response = await super.findOne(ctx); return response; }, async delete(ctx) { const response = await super.delete(ctx); await notify(strapi, { message: 'An asset has been deleted' }); return response; }, async create (ctx) { const response = await super.create(ctx); await notify(strapi, { message: `An asset ${response?.data?.attributes?.name} has been created` }); return response; } })); ``` ![showing notification message](https://paper-attachments.dropbox.com/s_D085DB73FB8FEBADB5AEEEA0A409B87E72D2FC3CE465C6240D7D3C95F3A24B5C_1646944525387_notification.png) ## Conclusion We have finally come to the end of this tutorial. In this tutorial, we looked at how the new react router and its benefits, and we also learnt how set up Strapi for our application. We also learned how to set up Strapi to push notifications and manage states in our asset manager in the process. We learned how to handle authentication from login to sign up and, most importantly, to push notifications from our Strapi backend using Cron Jobs and Web Push. ## Resources - [GitHub Repo](https://github.com/maxiggle/push-notification-using-strapi.git) - [Strapi cron-task](https://docs.strapi.io/developer-docs/latest/guides/scheduled-publication.html#introduction) - [Understanding Cron Jobs](https://www.easycron.com/faq/What-cron-expression-does-easycron-support) - [Web Push](https://www.npmjs.com/package/web-push)

How to Implement Push Notifications using Strapi and Web Push