Giter Club home page Giter Club logo

web-push-notifications's Introduction

Pushwoosh Web Push Notification SDK

GitHub release npm platforms

Download Guide Sample

Integration

  • Download Pushwoosh Web Push SDK and unzip it. You should have the following files: manifest.json, pushwoosh-service-worker.js

  • Place all these files to top-level root of your website directory.

  • Open manifest.json and make the following changes:

    • Change name and short_name to the name of your website.
    • Change gcm_sender_id to your Sender ID. Please keep in mind that Sender ID is usually a 12-digit number, and it can't contain any letters.
  • Include manifest.json in <head>

<link rel="manifest" href="/manifest.json">

Installation

via npm

npm install web-push-notifications --save

via html

<script type="text/javascript" src="//cdn.pushwoosh.com/webpush/v3/pushwoosh-web-notifications.js" async></script>

Usage

import {Pushwoosh} from 'web-push-notifications';
const pwInstance = new Pushwoosh();
pwInstance.push(['init', {
    logLevel: 'info', // possible values: error, info, debug
    applicationCode: 'XXXXX-XXXXX', // you application code from Pushwoosh Control Panel
    safariWebsitePushID: 'web.com.example.domain', //  unique reverse-domain string, obtained in you Apple Developer Portal. Only needed if you send push notifications to Safari browser
    defaultNotificationTitle: 'Pushwoosh', // sets a default title for push notifications
    defaultNotificationImage: 'https://yoursite.com/img/logo-medium.png', // URL to custom custom notification image
    autoSubscribe: false, // or true. If true, prompts a user to subscribe for pushes upon SDK initialization
    subscribeWidget: {
      enable: true
    },
    userId: 'user_id', // optional, set custom user ID
    tags: {
        'Name': 'John Smith'   	// optional, set custom Tags
    }
}]);

pwInstance.push(function(api) {
  console.log('Pushwoosh ready');
});
Chrome Guide Firefox Guide Safari Guide HTTP integration Guide Subscription Button Guide

web-push-notifications's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

web-push-notifications's Issues

module ios

which the possibilities of a module of the same iOS (titanium)?

browser notification click url

Hi, in the docs we cant set the click url for the browser notification.

We want to set differents urls for each notification.

example:

notification 1 - token A - chrome_url = somesite1.com notification 2 - token B - chrome url = somesite1.com/foo notification 3 = token C - chrome url = somesite1.com/foo/bar

In developer words, we are asking for a "chrome_url"/"firefox_url"/"safari_url" parameters to change the click url destionation for each notification.

https://community.pushwoosh.com/questions/3766/browser-notification-click-url

Web push notifications not working in chrome browser

Hi,
I integrated Pushwoosh web push notifications to my PWA, After integration, I tested it with Firefox and Google Chrome Browser (Both mobile and desktop) by sending push notifications from Pushwoosh dashboard.
I am getting push notifications on Firefox (mobile and desktop) and i am impressed with your service for Firefox browser but i am not getting any notification in Google Chrome Browser (Both mobile and desktop).

FCM and sender id is already configured before doing this.

Some Information about how i am accessing:

  1. First of all i am running latest version of google chrome and using it's default window (not in incognito or guest mode) and , No Adblocker is enabled.
  2. I am using Pushwoosh notification in debug mode.
  3. Then i visit my website which is running on HTTPS and have Let's Encrypt SSL installed on the server.
  4. Then notification permission window pops up and i click on allow button. Then some info were added in chrome console
  5. I scanned the console and no error was there from Pushwoosh (only info is displayed).
  6. After this i am pushing notifications by targeting Google Chrome and Firefox Browser in Pushwoosh dashboard.

I am getting notifications in Firefox but not in Google Chrome Browser. I also tried it on another website which is using cPanel Auto SSL from Comodo and same results are there.

Any idea what i am missing?? Can you please guide me how to resolve that issue. If you need any information, please let me know.

Thanks

Avoid any eval's

Hello Pushwoosh team,

I try to integrate your web-sdk in my site which follow Content Security Policy.
And get the following error

functions.js:2 Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' cdn.pushwoosh.com".

I do not want specify unsafe-eval directive, because it unsafe :)
Can you please remove all dynamic source code from SDK? Especially from following line https://github.com/Pushwoosh/web-push-notifications/blob/master/src/functions.ts#L5

And if it possible please add Subresource Integrity support

PushWoosh SDK since 3.1.0 not working

Hi!

I have pushwoosh SDK 3.0.8 installed with your package on several sites and it works fine.
But when I try to update on 3.1.0 or later - it stop working as well (service worker didn't install or update, pushwoosh didnt init).
And after I rollback to 3.0.8 - it's fine again.

I guess you changed smth important in this commit 84804e0

So maybe you have new requirements about some environment things or etc?

Thanks in advance for the help!

Lower the level of error to warning

When I added pushwoosh script and enabled Firefox and Chrome integration it works fine but I don't want to enable it on Safari. So eventually in my error log system(sentry for example) I see a lot of errors of type Unhandled Promise Rejection: Error: For work with Safari Push Notification add safariWebsitePushID to initParams!

Screenshot

Screenshot 2024-05-31 at 15 56 06

I understand that i can ignore this error in logs, but maybe better handle this promise rejection and show warning in console?

Issues with 3.0

Hello,
I'm getting following unresolved constants:
ReferenceError: __API_URL__ is not defined
ReferenceError: __DEV_MODE__ is not defined

Perhaps you need to use webpack DefinePlugin or so 😃
I was able to pass __DEV_MODE__ constant but i don't know what's api url should be

Also, since the lib was rewritten to typescript, can you generate & include typescript definition files into npm module?

TypeScript cause type error

ERROR in node_modules/web-push-notifications/lib/index.d.ts(67,26): error TS2304: Cannot find name 'IPWParams'.

It is because you declare interface PWParams instead IPWParams

TypeError: ServiceWorker script at http://localhost:8100/pushwoosh-service-worker.js?version=3.1.4 for scope http://localhost:8100/ encountered an error during installation.

I see error
When i use ionic 3
and your package

TypeError: ServiceWorker script at http://localhost:8100/pushwoosh-service-worker.js?version=3.1.4 for scope http://localhost:8100/ encountered an error during installation.

Here is my ionic info

cli packages:

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 8.0.0

local packages:

@ionic/app-scripts : 3.1.6
Cordova Platforms  : none
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 25.2.5
Node              : v8.9.3
npm               : 5.5.1
OS                : Windows 7

Environment Variables:

ANDROID_HOME : C:\Program Files (x86)\Android\android-sdk

Misc:

backend : pro

And yes i have used service worker and included
importScripts('https://cdn.pushwoosh.com/webpush/v3/pushwoosh-service-worker.js');

EventDispatcher?

Need event to pushwooshRegisterDevice.
I have some algorithm for setTags:

  1. Get deviceToken (as hwid)
  2. Send deviceToken to server - to receive tags for user
  3. Set Tags

So need for me do algorithm after create deviceToken in some callback
Now hardCore write in vendor pushwoosh-web-notifications.js, but hope you create some event or callback

Cannot read property 'forEach' of undefined on (Pushwoosh Web SDK beta.5)

Сделал по примеру http://docs.pushwoosh.com/docs/web-sdk-20 и в консоле ошибка (predefinedCommands in undefined)
file: web-notifications.js

let {Pushwoosh} = global;
let predefinedCommands;

if (Pushwoosh) {
  predefinedCommands = Pushwoosh;
}

Pushwoosh = new PushwooshGlobal();
predefinedCommands.forEach(c => Pushwoosh.push(c));

->

const global = getGlobal();

let Pushwoosh = new PushwooshGlobal();

if (global.Pushwoosh) {
    global.Pushwoosh.forEach(c => Pushwoosh.push(c));
}

Manually trigger subscribePopup

Is it possible to trigger subscribePopup on custom event instead of setting delay property?
When my custom event is triggered i call Pushwoosh.subscribePopup.toggle(true) but i am not sure if subscribePopup will be shown twice when delay will fire.
BTW, where is the repo with source code of @pushwoosh/web-push-subscribe-popup? And also it is now of version 1.0.14 but in dependencies i see "@pushwoosh/web-push-subscribe-popup": "1.0.7"

Documentation: Web-SDK-20 proposal

documentation
Можете ли Вы добавить дополнительный пример - чтобы подключать одним файлом?

import PushwooshGlobal from 'web-push-notifications/classes/Global';
let pushwoosh = new PushwooshGlobal();
pushwoosh.push(['init', {
    logLevel: 'info', // or debug
    applicationCode: 'DEAD0-BEAF0',
    safariWebsitePushID: 'web.com.example.domain',
    defaultNotificationTitle: 'Pushwoosh',
    defaultNotificationImage: 'https://cp.pushwoosh.com/img/logo-medium.png'
}]);

В плане поддерживать такой вариант подключения - чтоб добавить в общую сборку

wrong userdata notification on chrome

Hi, i'm using the remove api /createmessage to send push to my clients.

i'm sending the same content to android/ios/wp/chrome but only on chrome i'm receveing the wrong content and userdata values.

/NODEJS/
var Pushwoosh = require('pushwoosh-client');
var clientPW = new Pushwoosh('app id', 'app token');

clientPW.sendMessage('any message', {
send_date: 'now',
ignore_user_timezone: true,

devices: ['ios id', 'android id', 'wp id', 'chrome id'],

platforms: [1, 3, 5, 9],

data: {     
    title: 'any title'',
    message: 'any message',
    image: 'http://...anyimage.png',
    url: 'http://...anyurl.com'
},

chrome_icon: 'http://...anyimage.png',
firefox_icon: 'http://...anyimage.png',

android_custom_icon: 'http://...anyimage.png',
android_vibration: 1,
android_ibc: '#ffffff'

});

https://community.pushwoosh.com/questions/3603/wrong-userdata-notification-on-chrome

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.