# Web-Push für Chrome und Firefox für HTTP-Websites

<Aside type="caution" title="ACHTUNG">
Die folgenden Anweisungen sind für die Konfiguration von Chrome und Firefox **vereinheitlicht**, **AUSSER** für den ersten Artikel, der für jede Plattform einzigartig ist.
</Aside>

## Konfiguration

1. Wählen Sie bei der Erstellung eines Projekts die Option Web-Push.

<img src="/web-push-notifications-chrome-firefox-web-push-for-http-websites-1.webp" alt=""/>

2. Wählen Sie http, geben Sie Ihre Website-URL und Ihren Projektnamen ein.

<img src="/web-push-notifications-chrome-firefox-web-push-for-http-websites-2.webp" alt=""/>

3. Konfigurieren Sie sowohl Chrome als auch Firefox mit Ihren FCM-Projektanmeldeinformationen.

<Aside type="note">
Erfahren Sie, wie Sie FCM-Anmeldeinformationen erhalten, im [Konfigurationsleitfaden für Chrome und Firefox](/de/developer/first-steps/connect-messaging-services/chrome-configuration/).
</Aside>

<img src="/web-push-notifications-chrome-firefox-web-push-for-http-websites-3.webp" alt=""/>

## Integration

**1.** Erstellen Sie die Datei **pushwoosh-web-pushes-http-sdk.js** im Stammverzeichnis Ihrer Website mit folgendem Inhalt:

```javascript
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();
```

**2.** Fügen Sie die vorherige Datei in Ihre Website ein und initialisieren Sie sie mit dem **Anwendungscode** anstelle von XXXXX-XXXXX

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

**3.** Um eine Schaltfläche für das Push-Abonnement zu erstellen, verwenden Sie Folgendes:

```txt
<button onclick="pushwoosh.showSubscriptionWindow()">Push-Benachrichtigungen abonnieren</button>
```

**4.** Alternativ, wenn Sie möchten, dass Benachrichtigungsabonnements automatisch angezeigt werden (im Gegensatz zu Nr. 4 oben), verwenden Sie Folgendes:

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

<Aside type="note">
#### WICHTIG

Ein Pop-up-Fenster ist aufgrund der Sicherheitsrichtlinien des Browsers nur mit der Erlaubnis des Benutzers zulässig: Pop-up-Blocker werden ohne direkte Benutzeraktion automatisch aktiviert. \
Der Browser blockiert Pop-ups automatisch, bis Sie sie explizit durch einen Klick auf eine Schaltfläche zulassen.\
Die oben genannte Schaltfläche für das Push-Abonnement funktioniert einwandfrei ohne zusätzliche Benutzerberechtigungen.
</Aside>

<img src="/web-push-notifications-chrome-firefox-web-push-for-http-websites-4.webp" alt=""/>

<img src="/web-push-notifications-chrome-firefox-web-push-for-http-websites-5.webp" alt=""/>

Als Ergebnis wird der Benutzer aufgefordert, Push-Benachrichtigungen von der Website zu abonnieren:

<img src="/web-push-notifications-chrome-firefox-web-push-for-http-websites-6.webp" alt=""/>