Web push JS
=========================
Version 1.0.9
This is a node module for push notifications, integrated with Nodejs Server & Webpush
This is node module can support for many framework. [Angular, Vue, pure JS]
Install
Requirements
npm install web-push-js
- add this line
"webpush": "wpush"
toscripts
section inpackage.json
:
"scripts": {
...
"webpush": "wpush"
...
}
- Run command line to init our services:
npm run webpush
-
You will see the list of frameworks, please make the proper choice!
-
Let take a look with some environment variables:
- apiUrl: we need an apiUrl for send
POST
request each time init push-notifications successful in order to register device. - serverKey: with the same keys in both side, it let our frontend project and server contact each others.
- apiUrl: we need an apiUrl for send
Vuejs
- When you choose
vuejs
, You will see thewp-worker.js
created in public folder. Vuejs auto copy all files in public folder to their build folder. - Thus, you just need to setup some environment for it in
main.js
import webPush from 'web-push-js'
const apiUrl = 'https://web-push-js-server.herokuapp.com';
const serverKey = 'BIZ8E6td2p2qwepGtOt8IG-JZz1VVFt7F1MTNj4LZE6VFXlmKxl4cZKM8qP5kJIHdJvHZPVqfbrpiSBb6iLXILI';
webPush.settingEnv(`${apiUrl}/save-subscription`, serverKey);
webPush.requestNotiPermission();
Angular
when you choose angular
, You will see the wp-worker.js
created in src
folder.
- add:
src/wp-worker.js
inassets
ofangular.json
.
You need to setup some environment for it in main.ts
like Vue:
import webPush from 'web-push-js'
const apiUrl = 'https://web-push-js-server.herokuapp.com';
const serverKey = 'BIZ8E6td2p2qwepGtOt8IG-JZz1VVFt7F1MTNj4LZE6VFXlmKxl4cZKM8qP5kJIHdJvHZPVqfbrpiSBb6iLXILI';
webPush.settingEnv(`${apiUrl}/save-subscription`, serverKey);
webPush.requestNotiPermission();
Pure Js
comming soon
Build and Test
-
Service worker will not run in Development, so to test it, you need to build your project with
npm run build
. -
Check your
dist
folder. Try to run it withhttp-server
or install pluginweb server for chrome
Server Push Notifications
-
Check out our server in:
https://web-push-js-server.herokuapp.com/
. -
Now we can push notifcations with
title
,body
andicon
. -
Let have your experiences!
Licence
Usage is under provisioned of @AsianTechInc
UNLICENSED