Chrome/Firefox Web Push for HTTP websites

Follow the instructions to enable push notifications for Chrome and Firefox http websites

ATTENTION

The following instructions are unified for Chrome and Firefox configuration EXCEPT for the first article, which is unique for each platform.

Integration

1. (Chrome) Go to Chrome platform settings in your Pushwoosh control panel and input the following:

  • GCM server API key
  • GCM Project Number
  • Website Name (Set the default URL here. It will be opened when the user clicks on the notification unless different URL is preset)

1. (Firefox) Go to Firefox platform settings in your Pushwoosh control panel, click Configure and then mark the specific checkbox.

2. Create pushwoosh-web-pushes-http-sdk.js file in the root directory of your website with the following content:

var pushwoosh = {
	PUSHWOOSH_APPLICATION_CODE: 'XXXX-XXXX',
	PUSHWOOSH_APPLICATION_CODE_GET_PARAMETER: 'pw_application_code',
	init: function (applicationCode) {
		this.PUSHWOOSH_APPLICATION_CODE = applicationCode;
		window.addEventListener('message', this.pwReceiveMessage, false);
	},
	tryInitUsingGetParameter: function () {
		var applicationCode = this.getQueryVariable(this.PUSHWOOSH_APPLICATION_CODE_GET_PARAMETER);
		console.log(applicationCode);
		if (applicationCode) {
			this.init(applicationCode);
		}
	},
	pwReceiveMessage: function (event) {
		if (event.data == 'allowPushNotifications') {
			localStorage.setItem('pwAllowPushNotifications', true);
		}
	},
	isBrowserChrome: function () {
		return navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
	},
	isBrowserFirefox: function () {
		return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
	},
	isBrowserSafari: function () {
		return navigator.userAgent.toLowerCase().indexOf('safari') > -1 && !this.isBrowserChrome();
	},
	isBrowserSupported: function () {
		return this.isBrowserChrome() || this.isBrowserFirefox();
	},
	subscribeAtStart: function () {
		if (this.isBrowserSupported()) {
			if (null === localStorage.getItem('pwAllowPushNotifications')) {
				this.showSubscriptionWindow();
			}
		}
	},
	isSubscribedForPushNotifications: function () {
		return true == localStorage.getItem('pwAllowPushNotifications');
	},
	showSubscriptionWindow: function () {
		if (this.isBrowserSupported()) {
			var windowWidth = screen.width / 2;
			var windowHeight = screen.height / 2;

			var windowLeft = screen.width / 2 - windowWidth / 2;
			var windowRight = screen.height / 2 - windowHeight / 2;

			var URL = 'https://' + this.PUSHWOOSH_APPLICATION_CODE + '.chrome.pushwoosh.com/';
			var pwSubscribeWindow = window.open(URL, '_blank', 'width=' + windowWidth + ',height=' + windowHeight + ',resizable=yes,scrollbars=yes,status=yes,left=' + windowLeft + ',top=' + windowRight);
		}
	},
	getQueryVariable: function (variable) {
		// document.currentScript won't work if this code is called from function in event lister
		if (document.currentScript) {
			var urlParts = document.currentScript.src.split('?');
			if (typeof urlParts[1] !== 'undefined') {
				var vars = urlParts[1].split('&');
				for (var i = 0; i < vars.length; i++) {
					var pair = vars[i].split('=');
					if (pair[0] == variable) {
						return pair[1];
					}
				}
			}
		}
		else {
			console.error('Cannot get current script address');
		}
		return null;
	}
};
pushwoosh.tryInitUsingGetParameter();

3. Include the previous file to your website and initialize it using the application code instead of XXXXX-XXXXX

<!--[if !IE]><!-->
    <script src="/pushwoosh-web-pushes-http-sdk.js?pw_application_code=XXXXX-XXXXX"></script>
<!--<![endif]-->

4. In order to create a Push Subscription button use the following:

<button onclick="pushwoosh.showSubscriptionWindow()">Subscribe to push notifications</button>

5. Alternatively, if you want Notification Subscriptions to pop up automatically (opposed to #4 above), use the following:

<script>pushwoosh.subscribeAtStart();</script>

IMPORTANT

A pop-up window is only allowed with the user's permission due to the browser's security policy: pop-up blockers engage automatically without direct user action. .
The browser will block pop-ups automatically until you explicitly allow them with a button click.
The above-mentioned Push Subscription button will work flawlessly without additional user permissions.

As a result, the user will be prompted to subscribe for push notifications from the website:

Chrome/Firefox Web Push for HTTP websites

Follow the instructions to enable push notifications for Chrome and Firefox http websites