52
52
53
53
The plugin creates the object ` cordova.plugins.notification.local ` and is accessible after * deviceready* has been fired.
54
54
55
- ``` js
56
- document .addEventListener (' deviceready' , function () {
57
- // cordova.plugins.notification.local is now available
58
- }, false );
59
- ```
60
-
61
- Lets schedule a basic notification:
62
-
63
55
``` js
64
56
cordova .plugins .notification .local .schedule ({
65
57
title: ' My first notification' ,
@@ -68,47 +60,57 @@ cordova.plugins.notification.local.schedule({
68
60
```
69
61
70
62
<p align =" center " >
71
- <img height="300px" src="images/ios-basic.png">
63
+ <img src="images/ios-basic.png">
72
64
</p >
73
65
74
- Of course its possible to schedule multiple notifications at once:
66
+ The plugin allows to schedule multiple notifications at once.
75
67
76
68
``` js
77
- cordova .plugins .notification .local .schedule ([{
78
- id: 1 ,
79
- title: ' My first notification' ,
80
- text: ' Thats pretty easy...'
81
- },{
82
- id: 2 ,
83
- title: ' My first notification' ,
84
- text: ' Thats pretty easy...'
85
- }]);
69
+ cordova .plugins .notification .local .schedule ([
70
+ { id: 1 , title: ' My first notification' },
71
+ { id: 2 , title: ' My first notification' }
72
+ ]);
86
73
```
87
74
88
- And to get informed when the user has clicked on it:
75
+ ## Properties
76
+
77
+ A notification does have a set of configurable properties. Not all of them are supported across all platforms.
78
+
79
+ | Property | Property | Property | Property | Property | Property | Property | Property |
80
+ | :------------ | :------------ | :------------ | :------------ | :------------ | :------------ | :------------ | :------------ |
81
+ | id | data | actionGroupId | summary | led | showWhen | channel | actions |
82
+ | text | icon | attachments | smallIcon | color | defaults | launch | groupSummary |
83
+ | title | silent | progressBar | sticky | vibrate | priority | mediaSession |
84
+ | sound | trigger | group | autoClear | lockscreen | number | badge |
85
+
86
+ For their default values see:
89
87
90
88
``` js
91
- cordova .plugins .notification .local .on (' click' , function (toast , event ) {
92
- console .log (toast .title );
89
+ cordova .plugins .notification .local .getDefaults ();
90
+ ```
91
+
92
+ To change some default values:
93
+
94
+ ``` js
95
+ cordova .plugins .notification .local .setDefaults ({
96
+ led: { color: ' #FF00FF' , on: 500 , off: 500 },
97
+ vibrate: false
93
98
});
94
99
```
95
100
96
101
## Actions
97
102
98
- Great so far. Now we add some content and actions:
103
+ The plugin knows two types of actions: _ button _ and _ input _ .
99
104
100
105
``` js
101
106
cordova .plugins .notification .local .schedule ({
102
107
title: ' The big survey' ,
103
108
text: ' Are you a fan of RB Leipzig?' ,
104
109
attachments: [' file://img/rb-leipzig.jpg' ],
105
- actions: [{
106
- id: ' #he-likes-leipzig' ,
107
- title: ' Yes'
108
- },{
109
- id: ' #he-doesnt' ,
110
- title: ' No'
111
- }]
110
+ actions: [
111
+ { id: ' yes' , title: ' Yes' },
112
+ { id: ' no' , title: ' No' }
113
+ ]
112
114
});
113
115
```
114
116
@@ -120,22 +122,14 @@ cordova.plugins.notification.local.schedule({
120
122
<img width="31%" src="images/windows-actions.png">
121
123
</p >
122
124
123
- To get informed about the users choice:
124
-
125
- ``` js
126
- cordova .plugins .notification .local .on (' #he-likes-leipzig' , function (toast , event ) {
127
- console .log (' Yeah!!!' );
128
- });
129
- ```
130
-
131
- All platforms have built-in support for interactive actions where the user can respond by some input:
125
+ ### Input
132
126
133
127
``` js
134
128
cordova .plugins .notification .local .schedule ({
135
129
title: ' Justin Rhyss' ,
136
130
text: ' Do you want to go see a movie tonight?' ,
137
131
actions: [{
138
- id: ' # reply' ,
132
+ id: ' reply' ,
139
133
type: ' input' ,
140
134
title: ' Reply' ,
141
135
emptyText: ' Type message' ,
@@ -144,19 +138,9 @@ cordova.plugins.notification.local.schedule({
144
138
```
145
139
146
140
<p align =" center " >
147
- <img width="48%" src="images/android-reply-1.png">
148
-
149
- <img width="48%" src="images/android-reply-2.png">
141
+ <img src="images/android-reply.png">
150
142
</p >
151
143
152
- To get informed about the users input:
153
-
154
- ``` js
155
- cordova .plugins .notification .local .on (' #reply' , function (toast , event ) {
156
- console .log (event .text );
157
- });
158
- ```
159
-
160
144
It is recommended to pre-define action groups rather then specifying them with each new notification of the same type.
161
145
162
146
@@ -177,6 +161,25 @@ cordova.plugins.notification.local.schedule({
177
161
});
178
162
```
179
163
164
+ ### Properties
165
+
166
+ Actions do have a set of configurable properties. Not all of them are supported across all platforms.
167
+
168
+ | Property | Type | Android | iOS | Windows |
169
+ | :----------- | :----------- | :------ | :-- | :------ |
170
+ | id | button+input | x | x | x |
171
+ | title | button+input | x | x | x |
172
+ | launch | button+input | x | x | x |
173
+ | ui | button+input | | x | |
174
+ | needsAuth | button+input | | x | |
175
+ | icon | button+input | x | | |
176
+ | emptyText | input | x | x | x |
177
+ | submitTitle | input | | x | |
178
+ | editable | input | x | | |
179
+ | choices | input | x | | |
180
+ | defaultValue | input | | | x |
181
+
182
+
180
183
## Triggers
181
184
182
185
Notifications may trigger immediately or depend on calendar or location.
@@ -200,7 +203,9 @@ cordova.plugins.notification.local.schedule({
200
203
});
201
204
```
202
205
203
- Or repeat relative from now:
206
+ ### Repeating
207
+
208
+ Repeat relative from now:
204
209
205
210
``` js
206
211
cordova .plugins .notification .local .schedule ({
@@ -224,10 +229,42 @@ And to get informed about the event triggered:
224
229
cordova .plugins .notification .local .on (' trigger' , function (toast , event ) { ... });
225
230
```
226
231
232
+ ### Location based
227
233
228
- ## Styles
234
+ To trigger when the user enters a region:
229
235
230
- It's possible to split the text into multiple lines:
236
+ ``` js
237
+ cordova .plugins .notification .local .schedule ({
238
+ title: ' Welcome to our office' ,
239
+ trigger: {
240
+ type: ' location' ,
241
+ center: [x, y],
242
+ radius: 15 ,
243
+ notifyOnEntry: true
244
+ }
245
+ });
246
+ ```
247
+
248
+ ## Progress
249
+
250
+ Notifications can include an animated progress indicator that shows users the status of an ongoing operation.
251
+
252
+ ``` js
253
+ cordova .plugins .notification .local .schedule ({
254
+ title: ' Sync in progress' ,
255
+ text: ' Copied 2 of 10 files' ,
256
+ progressBar: { value: 20 }
257
+ });
258
+ ```
259
+
260
+ <p align =" center " >
261
+ <img src="images/android-progress.png">
262
+ </p >
263
+
264
+
265
+ ## Patterns
266
+
267
+ Split the text by line breaks if the message comes from a single person and just to long to show in a single line.
231
268
232
269
``` js
233
270
cordova .plugins .notification .local .schedule ({
@@ -239,12 +276,12 @@ cordova.plugins.notification.local.schedule({
239
276
```
240
277
241
278
<p align =" center " >
242
- <img width="48%" src="images/android-inbox-1.png">
243
-
244
- <img width="48%" src="images/android-inbox-2.png">
279
+ <img src="images/android-inbox.png">
245
280
</p >
246
281
247
- The notification may visulate a chat conversation:
282
+ ### Summarizing
283
+
284
+ Instead of displaying multiple notifications, you can create one notification that summarizes them all.
248
285
249
286
``` js
250
287
cordova .plugins .notification .local .schedule ({
@@ -260,9 +297,7 @@ cordova.plugins.notification.local.schedule({
260
297
```
261
298
262
299
<p align =" center " >
263
- <img width="48%" src="images/android-chat-1.png">
264
-
265
- <img width="48%" src="images/android-chat-2.png">
300
+ <img src="images/android-chat.png">
266
301
</p >
267
302
268
303
To add a new message to the existing chat:
@@ -274,7 +309,12 @@ cordova.plugins.notification.local.update({
274
309
});
275
310
```
276
311
277
- You can bundle connected notifications together as a single group:
312
+ ### Grouping
313
+
314
+ Your app can present multiple notifications as a single group:
315
+
316
+ - A parent notification displays a summary of its child notifications.
317
+ - The child notifications are presented without duplicate header information.
278
318
279
319
``` js
280
320
cordova .plugins .notification .local .schedule ([
@@ -287,11 +327,34 @@ cordova.plugins.notification.local.schedule([
287
327
```
288
328
289
329
<p align =" center " >
290
- <img width="48%" src="images/android-stack-1.png">
291
-
292
- <img width="48%" src="images/android-stack-2.png">
330
+ <img src="images/android-stack.png">
331
+ </p >
332
+
333
+
334
+ ## Permissions
335
+
336
+ Each platform may require the user to grant permissions first before the app is allowed to schedule notifications.
337
+
338
+ ``` js
339
+ cordova .plugins .notification .local .hasPermission (function (granted ) { ... });
340
+ ```
341
+
342
+ If requesting via plug-in, a system dialog does pop up for the first time. Later its only possible to tweak the settings through the system settings.
343
+
344
+ ``` js
345
+ cordova .plugins .notification .local .requestPermission (function (granted ) { ... });
346
+ ```
347
+
348
+ <p align =" center " >
349
+ <img src="images/ios-permission.png">
293
350
</p >
294
351
352
+ Checking the permissions is done automatically, however it's possible to skip that.
353
+
354
+ ``` js
355
+ cordova .plugins .notification .local .schedule (toast, callback, scope, { skipPermission: true });
356
+ ```
357
+
295
358
296
359
## Installation
297
360
0 commit comments