2 | 
3 |
18 |
19 |
3 | Strapi v4 - FCM plugin
4 |Send FCM notifications from Strapi.
5 | 6 | 17 |
9 | 
12 | 
15 | 20 | 21 | ## Installation 22 | 23 | ### From NPM: 24 | ```bash 25 | npm install strapi-plugin-fcm 26 | ``` 27 | 28 | ### From YARN: 29 | ```bash 30 | yarn add strapi-plugin-fcm 31 | ``` 32 | 33 | ### From Git: 34 | 35 | 1. Clone the plugin into your Strapi project 36 | 37 | ```bash 38 | cd /
79 | 
80 |
81 |
82 | - In the same interface 'FCM Plugin Configuration', optionally you can provide where the devices tokens are stored, in the picture example above, I store them in User -> **deviceToken** (strapi generate the users database table with the name up_users).
83 |
84 | - Optionally you can provide all the topics you have, in the 'FCM Topic' collection type (via the dashboard or via the api - Post requests).
85 |
80 |
86 | 
87 |
88 |
89 | ## Usage
90 | ### Via the dashboard
91 | - Enter the notification content.
92 | - Select targets to send to.
93 | - Click send!
94 |
87 |
95 | 
96 |
97 |
96 |
98 | 
99 |
100 |
101 | ### Another way via the dashboard.
102 | - you can create a new entry in the 'FCM Notification' collection type and click publish to send to the FCM.
103 |
104 | ### Via the api
105 | - First you have to enable and give routes permissions to a specific role or roles.
106 |
99 |
107 | 
108 |
109 | - Then via an Http Client (axios, ajax, postman, curl or whatever) send a post request with the body data:
110 |
111 | ```json
112 | {
113 | "data": {
114 | "title": "OKey",
115 | "body": "Test body",
116 | "image": "",
117 | "payload": "",
118 | "targetType": "topics",
119 | //or "targetType": "tokens",
120 | "target": "client_android",
121 | //or multiple topics "target": "client_android,client_ios",
122 | //or "target": "eyJhbGciOiJFUzI1...",
123 | //publishedAt: null //<<- uncomment this if you want to just add an entry as a draft to 'FCM Notification' collection without publishing and sending FCM.
124 | }
125 | }
126 | ```
127 |
128 | - You can send an array too:
129 | ```json
130 | {
131 | "data": [{...entry1}, {...entry2}, {...entry3}, ...]
132 | }
133 | ```
134 |
135 | ## Trick
136 | If you have saved the entries in the FCM Notification collection as drafts, you can scheduled them to be sent to FCM at a later time.
137 | - [Scheduled publication](https://docs.strapi.io/developer-docs/latest/guides/scheduled-publication.html)
138 | - [strapi-plugin-publisher
139 | ](https://github.com/ComfortablyCoding/strapi-plugin-publisher)
140 |
141 |
108 | 142 | 143 | ## References 144 | 145 | - [Strapi v4 developer documentation](https://docs.strapi.io/) 146 | -------------------------------------------------------------------------------- /admin/src/pages/HomePage/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * 3 | * HomePage 4 | * 5 | */ 6 | 7 | import React, { memo, useReducer, useState } from 'react'; 8 | import { useHistory, useRouteMatch } from 'react-router-dom'; 9 | 10 | 11 | // import PropTypes from 'prop-types'; 12 | import pluginId from '../../pluginId'; 13 | 14 | import Information from '@strapi/icons/Information'; 15 | import ArrowRight from '@strapi/icons/ArrowRight'; 16 | 17 | 18 | import { Grid, GridItem } from '@strapi/design-system/Grid'; 19 | import { Button } from '@strapi/design-system/Button'; 20 | import { Tooltip } from '@strapi/design-system/Tooltip'; 21 | import { TextInput } from '@strapi/design-system/TextInput'; 22 | import { Textarea } from '@strapi/design-system/Textarea'; 23 | 24 | 25 | const HomePage = () => { 26 | const match = useRouteMatch(); 27 | const history = useHistory(); 28 | 29 | const [title, setTitle] = useState(''); 30 | const [body, setBody] = useState(''); 31 | const [payload, setPayload] = useState(''); 32 | const [image, setImage] = useState(''); 33 | 34 | const handleEntry = event => { 35 | event.preventDefault(); 36 | console.log('You have submitted the form.'); 37 | // check title 38 | if (title.trim().length !== 0) { 39 | const entry = { 40 | title: title, 41 | body: body, 42 | payload: payload, 43 | image: image, 44 | }; 45 | // send data to local storage 46 | localStorage.setItem('fcmLastNotification', JSON.stringify(entry)); 47 | history.push({ pathname: match.url + '/targets', state: entry }); 48 | 49 | } else { 50 | alert('Please enter a title'); 51 | } 52 | }; 53 | return ( 54 | 130 | ); 131 | }; 132 | 133 | export default memo(HomePage); 134 | -------------------------------------------------------------------------------- /admin/src/pages/TargetsPage/index.js: -------------------------------------------------------------------------------- 1 | import React, { memo, useState, useEffect, useMemo } from 'react'; 2 | import { useHistory } from 'react-router-dom'; 3 | 4 | import { Box } from '@strapi/design-system/Box'; 5 | import { Typography } from '@strapi/design-system/Typography'; 6 | import { Checkbox } from '@strapi/design-system/Checkbox'; 7 | import { Table, Thead, Tbody, Tr, Td, Th } from '@strapi/design-system/Table'; 8 | import { Dots, NextLink, PageLink, Pagination, PreviousLink } from '@strapi/design-system/Pagination'; 9 | import { Button } from '@strapi/design-system/Button'; 10 | import { Grid, GridItem } from '@strapi/design-system/Grid'; 11 | import PaperPlane from '@strapi/icons/PaperPlane'; 12 | import { Alert } from '@strapi/design-system/Alert'; 13 | 14 | import api from '../../service/api'; 15 | 16 | 17 | const TargetsPage = (props) => { 18 | const history = useHistory(); 19 | 20 | let entry = props?.location?.state; 21 | if (!entry) { 22 | entry = JSON.parse(localStorage.getItem('fcmLastNotification')); 23 | } 24 | if (!entry) { 25 | history.goBack(); 26 | } 27 | 28 | const defaultPageSize = 20; 29 | const [page, setPage] = useState(1); 30 | const [allTargets, setAllTargets] = useState(null); 31 | const [targets, setTargets] = useState(null); 32 | const [fetching, setFetching] = useState(true); 33 | const [selectedTargets, setSelectedTargets] = useState(null); 34 | const [targetsCheckedState, setTargetsCheckedState] = useState({ unchecked: true }); 35 | const [paginationInfo, setPaginationInfo] = useState(null); 36 | const [alertToShow, setAlertToShow] = useState(null); 37 | 38 | 39 | const fetchTargets = async (page, pageSize = defaultPageSize) => { 40 | setFetching(true); 41 | let items = paginate(page, pageSize); 42 | if (items && items.length > 0) { 43 | console.log('targets', items); 44 | setTargets(items); 45 | setFetching(false); 46 | } else { 47 | const res = await api.getTargets(page, pageSize); 48 | items = res.data; 49 | console.log('items', items); 50 | if (!paginationInfo && res.pagination && res.pagination.pageCount > 0) { 51 | console.log('res.pagination', res.pagination); 52 | setPaginationInfo(res.pagination); 53 | } 54 | if (items && items.length > 0) { 55 | insertTargetsAtOffset(items, (page - 1) * pageSize); 56 | setTargets(items); 57 | setFetching(false); 58 | setPage(page + 1); 59 | } 60 | } 61 | }; 62 | useEffect(() => { 63 | fetchTargets(1); 64 | }, []); 65 | 66 | const toggleCheckTarget = (target) => { 67 | let selected = selectedTargets || []; 68 | const index = selected.indexOf(target); 69 | index >= 0 ? selected.splice(index, 1) : selected.push(target); 70 | //console.log('selected', selected.length, 'allTargets', allTargets.length, 'index', index); 71 | if (selected.length >= allTargets.length && selected.length !== 0) { 72 | setTargetsCheckedState({ checked: true }); 73 | } else if (selected.length === 0) { 74 | setTargetsCheckedState({ unchecked: true }); 75 | } else {// Indeterminate state is used to show partially checked states. 76 | setTargetsCheckedState({ indeterminate: true }); 77 | } 78 | setSelectedTargets(selected); 79 | }; 80 | 81 | const toggleCheckAllTargets = () => { 82 | //console.log('allTargets', allTargets, 'selectedTargets', selectedTargets); 83 | let selected = selectedTargets || []; 84 | if (selected.length > 0) { // unselect all 85 | setSelectedTargets([]); 86 | setTargetsCheckedState({ unchecked: true }); 87 | } else { 88 | setSelectedTargets(allTargets ? [...allTargets] : []); 89 | setTargetsCheckedState({ checked: true }); 90 | } 91 | }; 92 | 93 | const isTargetChecked = (target) => { 94 | return (selectedTargets || []).indexOf(target) > -1; 95 | } 96 | 97 | const paginate = (page, pageSize = defaultPageSize) => { 98 | const all = allTargets || [] 99 | return all.slice((page - 1) * pageSize, page * pageSize); 100 | }; 101 | 102 | const insertTargetsAtOffset = (items, offset) => { 103 | const all = allTargets ? [...allTargets] : []; 104 | all.splice(offset, items.length, ...items); 105 | setAllTargets(all); 106 | }; 107 | 108 | const range = (size, startAt = 0) => { 109 | return [...Array(size).keys()].map(i => i + startAt); 110 | }; 111 | 112 | const startPartPagination = () => { 113 | const size = paginationInfo?.pageCount || 1; 114 | if (size < 7) { 115 | return range(size); 116 | } else if (page <= 2) { 117 | return range(4); 118 | } else { 119 | return [0]; 120 | } 121 | /** 122 | 1 ... 3 4 5 ... 7 >> page > 2 && size > 5 123 | 1 2 3 4 ... 7 124 | 1 2 3 4 5 6 125 | */ 126 | }; 127 | 128 | const middlePartPagination = () => { 129 | const size = paginationInfo?.pageCount || 1; 130 | if (size >= 7) { 131 | if (page >= 3 && page < size - 3) { 132 | return range(3, page - 1); 133 | } 134 | } 135 | return undefined; 136 | 137 | /** 138 | 1 ... 3 4 5 ... 7 >> page >= 3 && page < size - 3 139 | 1 ... 18 19 20 21 140 | 1 2 3 4 ... 21 141 | */ 142 | }; 143 | 144 | const endPartPagination = () => { 145 | const size = paginationInfo?.pageCount || 1; 146 | if (size > 5) { 147 | if (page > 3 && page >= size - 3) { 148 | return range(4, size - 4); 149 | } else { 150 | return [size - 1]; 151 | } 152 | } 153 | return undefined; 154 | /** 155 | 1 ... 3 4 5 ... [7] >> size > 5 && 156 | 1 ... 4 5 6 7 >> page > 3 && page >= size - 3 157 | 1 2 3 4 ... 7 >> page < 5 && page < size - 3 158 | */ 159 | 160 | }; 161 | 162 | const sendToSelected = async () => { 163 | const selected = selectedTargets || []; 164 | if (selected.length < 1) { 165 | setAlertToShow({ 166 | title: 'Error', 167 | message: 'One or more targets should be selected to send the fcm message.', 168 | variant: 'danger' 169 | }); 170 | return; 171 | } 172 | 173 | console.log('selected', selected); 174 | const typesValues = selected.reduce((p, n) => { 175 | console.log('p', p, 'n', n, n.type === 'token', n.type === 'topic'); 176 | if (n.type === 'token') { 177 | p.tokens = p.tokens || []; 178 | p.tokens.push(n.value); 179 | }else if (n.type === 'topic') { 180 | p.topics = p.topics || []; 181 | p.topics.push(n.value); 182 | } 183 | return p; 184 | }, {}); 185 | console.log('typesValues', typesValues); 186 | const payload = { 187 | title: entry.title, 188 | body: entry.body, 189 | image: entry.image, 190 | payload: entry.payload 191 | } 192 | const entries = []; 193 | if(typesValues.tokens?.length > 0){ 194 | entries.push({...payload, ...{targetType: 'tokens', target: typesValues.tokens.join(',')}}); 195 | } 196 | if(typesValues.topics?.length > 0){ 197 | entries.push({...payload, ...{targetType: 'topics', target: typesValues.topics.join(',')}}); 198 | } 199 | console.log('entries', entries); 200 | try { 201 | const response = await api.sendFCMs(entries); 202 | console.log('response', response); 203 | setAlertToShow({ 204 | title: 'Sent', 205 | message: 'FCM sent successfully.', 206 | variant: 'success' 207 | }); 208 | } catch (err) { 209 | setAlertToShow({ 210 | title: 'Error', 211 | message: 'Failed to send to FCM. '+JSON.stringify(err || {}), 212 | variant: 'danger' 213 | }); 214 | } 215 | }; 216 | 217 | return ( 218 | <> 219 | {fetching &&
220 | Loading...
221 |
}
222 | {targets && targets.length > 0 ? (
223 | <>
224 | |
228 | |
230 |
231 | |
233 |
234 | |
236 |
237 | |
239 |
240 | |
242 |
|---|---|---|---|---|
|
248 | |
250 |
251 | |
253 |
254 | |
256 |
257 | |
259 |
260 | |
262 |
292 | No targets found.
293 |
)}
295 |
296 |