@tencentcloud/web-push 1.0.0 β 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +10 -0
- package/README.md +91 -5
- package/index.d.ts +0 -2
- package/index.esm.js +82 -15604
- package/index.umd.js +1 -1
- package/package.json +1 -1
- package/src/core/service-worker-manager.d.ts +3 -0
- package/src/core/web-push-sdk.d.ts +0 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [1.0.2] - 2025-01-16
|
|
4
|
+
|
|
5
|
+
- β¨ Added UMD build support for direct `<script>` tag integration
|
|
6
|
+
- π Enhanced UMD usage documentation and examples
|
|
7
|
+
|
|
8
|
+
## [1.0.1] - 2025-12-19
|
|
9
|
+
|
|
10
|
+
- Optimize subscription logic
|
|
11
|
+
- Optimized state persistence logic, only persisting VAPID public key while resetting temporary states each session
|
|
12
|
+
|
|
3
13
|
## [1.0.0] - 2025-12-17
|
|
4
14
|
|
|
5
15
|
### Added
|
package/README.md
CHANGED
|
@@ -21,20 +21,54 @@ A web-based push notification SDK built on modern Web APIs including Service Wor
|
|
|
21
21
|
|
|
22
22
|
## Integration Step
|
|
23
23
|
|
|
24
|
-
### Step 1:
|
|
24
|
+
### Step 1: Install Web Push SDK
|
|
25
25
|
|
|
26
|
-
|
|
26
|
+
**Option 1: NPM Installation**
|
|
27
27
|
|
|
28
28
|
```bash
|
|
29
29
|
npm install @tencentcloud/web-push --save
|
|
30
30
|
```
|
|
31
31
|
|
|
32
|
-
|
|
32
|
+
or
|
|
33
33
|
|
|
34
34
|
```bash
|
|
35
35
|
yarn add @tencentcloud/web-push
|
|
36
36
|
```
|
|
37
37
|
|
|
38
|
+
**Option 2: CDN Integration (UMD)**
|
|
39
|
+
|
|
40
|
+
Include directly via `<script>` tag:
|
|
41
|
+
|
|
42
|
+
```html
|
|
43
|
+
<!-- Include TencentCloudChat SDK (Professional Edition) -->
|
|
44
|
+
<script src="https://unpkg.com/@tencentcloud/lite-chat/professional.js"></script>
|
|
45
|
+
|
|
46
|
+
<!-- Include Web Push SDK -->
|
|
47
|
+
<script src="https://unpkg.com/@tencentcloud/web-push/index.umd.js"></script>
|
|
48
|
+
|
|
49
|
+
<script>
|
|
50
|
+
// SDK will be mounted to global variable WebPushSDK
|
|
51
|
+
const webPush = WebPushSDK.webPush;
|
|
52
|
+
|
|
53
|
+
// Usage is the same as ES6 modules
|
|
54
|
+
webPush.registerPush({
|
|
55
|
+
SDKAppID: 1400000000,
|
|
56
|
+
appKey: 'your-app-key',
|
|
57
|
+
userID: 'test-user-001',
|
|
58
|
+
});
|
|
59
|
+
</script>
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
Or download and use locally:
|
|
63
|
+
|
|
64
|
+
```html
|
|
65
|
+
<!-- Include Chat SDK -->
|
|
66
|
+
<script src="./path/to/chat-sdk.js"></script>
|
|
67
|
+
|
|
68
|
+
<!-- Include Web Push SDK -->
|
|
69
|
+
<script src="./dist/index.umd.js"></script>
|
|
70
|
+
```
|
|
71
|
+
|
|
38
72
|
### Step 2: Configure the Service Worker File
|
|
39
73
|
|
|
40
74
|
After integrating `@tencentcloud/web-push`, copy the **Service Worker (sw.js)** to your project's **root directory**. After website deployment, ensure this file can be accessed through `https://your-domain.com/sw.js`. Otherwise, the browser will be unable to register the **Service Worker**.
|
|
@@ -81,7 +115,7 @@ In your homepage (for example: `index.js`), add `@tencentcloud/web-push` and reg
|
|
|
81
115
|
|
|
82
116
|
<td rowspan="1" colSpan="1" >Number</td>
|
|
83
117
|
|
|
84
|
-
<td rowspan="1" colSpan="1" >The SDKAppID for the push service Push.
|
|
118
|
+
<td rowspan="1" colSpan="1" >The SDKAppID for the push service Push. </td>
|
|
85
119
|
</tr>
|
|
86
120
|
|
|
87
121
|
<tr>
|
|
@@ -89,7 +123,7 @@ In your homepage (for example: `index.js`), add `@tencentcloud/web-push` and reg
|
|
|
89
123
|
|
|
90
124
|
<td rowspan="1" colSpan="1" >String</td>
|
|
91
125
|
|
|
92
|
-
<td rowspan="1" colSpan="1" >The client key for the push service Push
|
|
126
|
+
<td rowspan="1" colSpan="1" >The client key for the push service Push.</td>
|
|
93
127
|
</tr>
|
|
94
128
|
|
|
95
129
|
<tr>
|
|
@@ -122,6 +156,58 @@ WebPush.addPushListener(WebPush.EVENT.NOTIFICATION_CLICKED, (data) => {
|
|
|
122
156
|
});
|
|
123
157
|
```
|
|
124
158
|
|
|
159
|
+
### UMD Usage (Script Tag)
|
|
160
|
+
|
|
161
|
+
> **Important**: When using UMD integration, you must include the TencentCloudChat SDK (Professional Edition) first, otherwise you'll encounter "Cannot read properties of undefined (reading 'create')" error.
|
|
162
|
+
|
|
163
|
+
If you're using UMD integration, here's an example:
|
|
164
|
+
|
|
165
|
+
```html
|
|
166
|
+
<!DOCTYPE html>
|
|
167
|
+
<html>
|
|
168
|
+
<head>
|
|
169
|
+
<title>Web Push SDK UMD Example</title>
|
|
170
|
+
</head>
|
|
171
|
+
<body>
|
|
172
|
+
<!-- Include TencentCloudChat SDK (Professional Edition) -->
|
|
173
|
+
<script src="https://unpkg.com/@tencentcloud/lite-chat/professional.js"></script>
|
|
174
|
+
|
|
175
|
+
<!-- Include Web Push SDK -->
|
|
176
|
+
<script src="https://unpkg.com/@tencentcloud/web-push/index.umd.js"></script>
|
|
177
|
+
|
|
178
|
+
<script>
|
|
179
|
+
// Get SDK instance
|
|
180
|
+
const webPush = WebPushSDK.webPush;
|
|
181
|
+
|
|
182
|
+
// Configuration parameters
|
|
183
|
+
const SDKAppID = 1400000000; // Your SDKAppID
|
|
184
|
+
const appKey = 'your-app-key'; // Client key
|
|
185
|
+
const userID = 'test-user-001'; // User ID
|
|
186
|
+
|
|
187
|
+
// Register push service
|
|
188
|
+
webPush
|
|
189
|
+
.registerPush({ SDKAppID, appKey, userID })
|
|
190
|
+
.then((registrationID) => {
|
|
191
|
+
console.log('Registration successful:', registrationID);
|
|
192
|
+
})
|
|
193
|
+
.catch((error) => {
|
|
194
|
+
console.error('Registration failed:', error);
|
|
195
|
+
});
|
|
196
|
+
|
|
197
|
+
// Listen to push messages
|
|
198
|
+
webPush.addPushListener(webPush.EVENT.MESSAGE_RECEIVED, (message) => {
|
|
199
|
+
console.log('Received push message:', message);
|
|
200
|
+
});
|
|
201
|
+
|
|
202
|
+
// Listen to notification click
|
|
203
|
+
webPush.addPushListener(webPush.EVENT.NOTIFICATION_CLICKED, (data) => {
|
|
204
|
+
console.log('Notification clicked:', data);
|
|
205
|
+
});
|
|
206
|
+
</script>
|
|
207
|
+
</body>
|
|
208
|
+
</html>
|
|
209
|
+
```
|
|
210
|
+
|
|
125
211
|
## API Reference
|
|
126
212
|
|
|
127
213
|
### Methods
|
package/index.d.ts
CHANGED