Skip to content

Commit 94563ec

Browse files
committedOct 28, 2017
Update README.md
1 parent 9bb0e97 commit 94563ec

15 files changed

+128
-65
lines changed
 

‎README.md

+128-65
Original file line numberDiff line numberDiff line change
@@ -52,14 +52,6 @@
5252

5353
The plugin creates the object `cordova.plugins.notification.local` and is accessible after *deviceready* has been fired.
5454

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-
6355
```js
6456
cordova.plugins.notification.local.schedule({
6557
title: 'My first notification',
@@ -68,47 +60,57 @@ cordova.plugins.notification.local.schedule({
6860
```
6961

7062
<p align="center">
71-
<img height="300px" src="images/ios-basic.png">
63+
<img src="images/ios-basic.png">
7264
</p>
7365

74-
Of course its possible to schedule multiple notifications at once:
66+
The plugin allows to schedule multiple notifications at once.
7567

7668
```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+
]);
8673
```
8774

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:
8987

9088
```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
9398
});
9499
```
95100

96101
## Actions
97102

98-
Great so far. Now we add some content and actions:
103+
The plugin knows two types of actions: _button_ and _input_.
99104

100105
```js
101106
cordova.plugins.notification.local.schedule({
102107
title: 'The big survey',
103108
text: 'Are you a fan of RB Leipzig?',
104109
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+
]
112114
});
113115
```
114116

@@ -120,22 +122,14 @@ cordova.plugins.notification.local.schedule({
120122
<img width="31%" src="images/windows-actions.png">
121123
</p>
122124

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
132126

133127
```js
134128
cordova.plugins.notification.local.schedule({
135129
title: 'Justin Rhyss',
136130
text: 'Do you want to go see a movie tonight?',
137131
actions: [{
138-
id: '#reply',
132+
id: 'reply',
139133
type: 'input',
140134
title: 'Reply',
141135
emptyText: 'Type message',
@@ -144,19 +138,9 @@ cordova.plugins.notification.local.schedule({
144138
```
145139

146140
<p align="center">
147-
<img width="48%" src="images/android-reply-1.png">
148-
&nbsp;&nbsp;&nbsp;&nbsp;
149-
<img width="48%" src="images/android-reply-2.png">
141+
<img src="images/android-reply.png">
150142
</p>
151143

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-
160144
It is recommended to pre-define action groups rather then specifying them with each new notification of the same type.
161145

162146

@@ -177,6 +161,25 @@ cordova.plugins.notification.local.schedule({
177161
});
178162
```
179163

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+
180183
## Triggers
181184

182185
Notifications may trigger immediately or depend on calendar or location.
@@ -200,7 +203,9 @@ cordova.plugins.notification.local.schedule({
200203
});
201204
```
202205

203-
Or repeat relative from now:
206+
### Repeating
207+
208+
Repeat relative from now:
204209

205210
```js
206211
cordova.plugins.notification.local.schedule({
@@ -224,10 +229,42 @@ And to get informed about the event triggered:
224229
cordova.plugins.notification.local.on('trigger', function (toast, event) { ... });
225230
```
226231

232+
### Location based
227233

228-
## Styles
234+
To trigger when the user enters a region:
229235

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.
231268

232269
```js
233270
cordova.plugins.notification.local.schedule({
@@ -239,12 +276,12 @@ cordova.plugins.notification.local.schedule({
239276
```
240277

241278
<p align="center">
242-
<img width="48%" src="images/android-inbox-1.png">
243-
&nbsp;&nbsp;&nbsp;&nbsp;
244-
<img width="48%" src="images/android-inbox-2.png">
279+
<img src="images/android-inbox.png">
245280
</p>
246281

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.
248285

249286
```js
250287
cordova.plugins.notification.local.schedule({
@@ -260,9 +297,7 @@ cordova.plugins.notification.local.schedule({
260297
```
261298

262299
<p align="center">
263-
<img width="48%" src="images/android-chat-1.png">
264-
&nbsp;&nbsp;&nbsp;&nbsp;
265-
<img width="48%" src="images/android-chat-2.png">
300+
<img src="images/android-chat.png">
266301
</p>
267302

268303
To add a new message to the existing chat:
@@ -274,7 +309,12 @@ cordova.plugins.notification.local.update({
274309
});
275310
```
276311

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.
278318

279319
```js
280320
cordova.plugins.notification.local.schedule([
@@ -287,11 +327,34 @@ cordova.plugins.notification.local.schedule([
287327
```
288328

289329
<p align="center">
290-
<img width="48%" src="images/android-stack-1.png">
291-
&nbsp;&nbsp;&nbsp;&nbsp;
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">
293350
</p>
294351

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+
295358

296359
## Installation
297360

‎images/android-chat-1.png

-90.1 KB
Binary file not shown.

‎images/android-chat-2.png

-81.9 KB
Binary file not shown.

‎images/android-chat.png

74.2 KB
Loading

‎images/android-inbox-1.png

-94 KB
Binary file not shown.

‎images/android-inbox-2.png

-92.2 KB
Binary file not shown.

‎images/android-inbox.png

77.7 KB
Loading

‎images/android-progress.png

57.1 KB
Loading

‎images/android-reply-1.png

-83.2 KB
Binary file not shown.

‎images/android-reply.png

86 KB
Loading

‎images/android-stack-1.png

-223 KB
Binary file not shown.

‎images/android-stack-2.png

-240 KB
Binary file not shown.

‎images/android-stack.png

173 KB
Loading

‎images/ios-basic.png

872 KB
Loading

‎images/ios-permission.png

162 KB
Loading

0 commit comments

Comments
 (0)
Please sign in to comment.