diff options
Diffstat (limited to 'files/de/web/api/notification/index.html')
| -rw-r--r-- | files/de/web/api/notification/index.html | 265 |
1 files changed, 265 insertions, 0 deletions
diff --git a/files/de/web/api/notification/index.html b/files/de/web/api/notification/index.html new file mode 100644 index 0000000000..aaf5188c37 --- /dev/null +++ b/files/de/web/api/notification/index.html @@ -0,0 +1,265 @@ +--- +title: Notification +slug: Web/API/notification +translation_of: Web/API/Notification +--- +<div>{{APIRef("Web Notifications")}} {{ SeeCompatTable() }}</div> + +<div>Das Notification interface wird zum konfigurieren und Anzeigen von desktop notifications verwendet.</div> + +<h3 id="Permissions" name="Permissions">Permissions</h3> + +<p>Wenn Sie notifications in einer offenen web app verwenden, fügen sie die <span style="font-family: consolas,monaco,andale mono,monospace;">desktop-notification permission zu ihrem <a href="/de/docs/Apps/Manifest">manifest</a> file hinzu. </span>Notifications können für jedes permission level, hosted oder darüber verwendet werden.</p> + +<pre class="brush: json"><code><span class="str">"permissions"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> + </span><span class="str">"desktop-notification"</span><span class="pun">:{}</span><span class="pln"> +</span><span class="pun">}</span></code></pre> + +<h2 id="Method_overview" name="Method_overview">Konstruktor</h2> + +<pre class="brush: js">var notification = new Notification(title, options);</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>title</code></dt> + <dd>Titel der innerhalb der Notification angezeigt werden muss.</dd> + <dt><code>options</code> {{optional_inline}}</dt> + <dd>Ein Objekt das optionale Konfigurationsparamter enthält. Es kann die folgenden Einträge enthalten: + <ul> + <li><code>dir</code> : Die Ausrichtung des Textes; Verfügbar sind <code>auto</code>, <code>ltr</code>, oder <code>rtl</code>.</li> + <li><code>lang</code>: Spezifiziere die verwendete Sprache. Dieser String muss ein valides <a href="http://tools.ietf.org/html/bcp47" title="http://tools.ietf.org/html/bcp47">BCP 47 language tag</a> sein.</li> + <li><code>body</code>: Ein String, welcher jeglichen extra Inhalt einer notification beinhaltet.</li> + <li><code>tag</code>: Die ID einer gegebene notification, um diese abzurufen, zu löschen, zu ersetzen oder zu löschen. </li> + <li><code>icon</code>: Die Url für das verwendete Icon in einer notification.</li> + <li><code>data</code>: Ein Benutzerdefiniertes Datenfeld.</li> + </ul> + </dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<h3 id="Static_properties">Static properties</h3> + +<p>Diese Eigenschaften sind nur im Notification-Objekt selbst verfügbar.</p> + +<dl> + <dt>{{domxref("Notification.permission")}} {{readonlyinline}}</dt> + <dd>Eine Zeichenkette, die die aktuell gesetzten Berechtigungen Notifications anzuzeigen darstellt. Mögliche Werte sind: denied (der Nutzer erlaubt keine Benachrichtigungen), granted (der Nutzer akzeptiert, dass Benachrichtigungen angezeigt werden) oder default (die Nutzerwahl ist unbekannt, daher verhält sich der Browser wie bei denied).</dd> +</dl> + +<h3 id="Instance_properties">Instance properties</h3> + +<p>Diese Eigenschaften sind nur in Instanzen des Notification-Objekts verfügbar.</p> + +<dl> + <dt>{{domxref("Notification.title")}} {{readonlyinline}}</dt> + <dd>Der Titel der Benachrichtigung der in den Parametern des Konstruktors spezifiziert wurde.</dd> + <dt>{{domxref("Notification.dir")}} {{readonlyinline}}</dt> + <dd>Textausrichtung der Benachrichtung welche in den Parametern des Konstruktors spezifiziert wurde.</dd> + <dt>{{domxref("Notification.lang")}} {{readonlyinline}}</dt> + <dd>Sprachcode der Benachrichtung welche in den Parametern des Konstruktors spezifiziert wurde.</dd> + <dt>{{domxref("Notification.body")}} {{readonlyinline}}</dt> + <dd>Textinhalt der Benachrichtung welche in den Parametern des Konstruktors spezifiziert wurde.</dd> + <dt>{{domxref("Notification.tag")}} {{readonlyinline}}</dt> + <dd>ID der Benachrichtung (if any) welche in den Parametern des Konstruktors spezifiziert wurde.</dd> + <dt>{{domxref("Notification.icon")}} {{readonlyinline}}</dt> + <dd>URL des Bildes welches als Icon der Benachrichtgung verwendet wird, wie in den Parametern des Konstruktors spezifiziert wurde</dd> + <dt>{{domxref("Notification.data")}} {{readonlyinline}}</dt> + <dd>Returns a structured clone of the notification’s data.</dd> +</dl> + +<h4 id="Event_handlers">Event handlers</h4> + +<dl> + <dt>{{domxref("Notification.onclick")}}</dt> + <dd>A handler for the {{event("click")}} event. It is triggered each time the user clicks on the notification.</dd> + <dt>{{domxref("Notification.onshow")}}</dt> + <dd>A handler for the {{event("show")}} event. It is triggered when the notification is displayed.</dd> + <dt>{{domxref("Notification.onerror")}}</dt> + <dd>A handler for the {{event("error")}} event. It is triggered each time the notification encounters an error.</dd> + <dt>{{domxref("Notification.onclose")}}</dt> + <dd>A handler for the {{event("close")}} event. It is triggered when the user closes the notification.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<h3 id="Static_methods">Static methods</h3> + +<p>These methods are available only on the <code>Notification</code> object itself.</p> + +<dl> + <dt>{{domxref("Notification.requestPermission()")}}</dt> + <dd>Requests permission from the user to display notifications. This method must be called as the result of a user action (for example, an onclick event), and cannot be used without it.</dd> +</dl> + +<h3 id="Instance_methods">Instance methods</h3> + +<p>These properties are available only on an instance of the <code>Notification</code> object or through its <a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain" title="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain"><code>prototype</code></a>. The <code>Notification</code> objects also inherit from the {{domxref("EventTarget")}} interface.</p> + +<dl> + <dt>{{domxref("Notification.close()")}}</dt> + <dd>Programmatically closes a notification.</dd> +</dl> + +<p>{{page("/en-US/docs/Web/API/EventTarget","Methods")}}</p> + +<h2 id="Example">Example</h2> + +<p>Assume this basic HTML:</p> + +<pre class="brush: html"><button onclick="notifyMe()">Notify me!</button></pre> + +<p>It's possible to send a notification as follows:</p> + +<pre class="brush: js">function notifyMe() { + // Let's check if the browser supports notifications + if (!("Notification" in window)) { + alert("This browser does not support desktop notification"); + } + + // Let's check whether notification permissions have alredy been granted + else if (Notification.permission === "granted") { + // If it's okay let's create a notification + var notification = new Notification("Hi there!"); + } + + // Otherwise, we need to ask the user for permission + else if (Notification.permission !== 'denied') { + Notification.requestPermission(function (permission) { + // If the user accepts, let's create a notification + if (permission === "granted") { + var notification = new Notification("Hi there!"); + } + }); + } + + // At last, if the user has denied notifications, and you + // want to be respectful there is no need to bother them any more. +}</pre> + +<h3 id="See_the_live_result">See the live result</h3> + +<p>{{ EmbedLiveSample('Example', '100%', 30) }}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Web Notifications')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>5 {{ property_prefix("webkit") }} (see notes)<br> + 22</td> + <td>4.0 {{ property_prefix("moz") }} (see notes)<br> + 22</td> + <td>{{ CompatNo() }}</td> + <td>25</td> + <td>6 (see notes)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td> + <p>{{CompatVersionUnknown}}</p> + </td> + <td>4.0 {{ property_prefix("moz") }} (see notes)<br> + 22</td> + <td>1.0.1 {{ property_prefix("moz") }} (see notes)<br> + 1.2</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td> + <p>{{CompatVersionUnknown}}</p> + </td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Gecko_notes">Gecko notes</h3> + +<ul> + <li>Prior to Firefox 22 (Firefox OS <1.2), the instantiation of a new notification must be done with the {{ domxref("window.navigator.mozNotification","navigator.mozNotification") }} object through its <code>createNotification</code> method.</li> + <li>Prior to Firefox 22 (Firefox OS <1.2), the Notification was displayed when calling the <code>show</code> method and was supporting the <code>click</code> and <code>close</code> events only.</li> + <li>Nick Desaulniers has written a <a href="https://github.com/nickdesaulniers/fxos-irc/blob/master/js/notification.js">Notification shim</a> to cover both newer and older implementations.</li> + <li>One particular Firefox OS issue is that you can <a href="https://github.com/nickdesaulniers/fxos-irc/blob/0160cf6c3a2b5c9fe33822aaf6bcba3b7e846da9/my.js#L171">pass a path to an icon</a> to use in the notification, but if the app is packaged you cannot use a relative path like <code>/my_icon.png</code>. You also can't use <code>window.location.origin + "/my_icon.png"</code> because <code>window.location.origin</code> is null in packaged apps. The <a href="https://developer.mozilla.org/en-US/Apps/Developing/Manifest#origin">manifest origin field</a> fixes this, but it is only available in Firefox OS 1.1+. A potential solution for supporting Firefox OS <1.1 is to <a href="https://github.com/nickdesaulniers/fxos-irc/blob/0160cf6c3a2b5c9fe33822aaf6bcba3b7e846da9/my.js#L168">pass an absolute URL to an externally hosted version of the icon</a>. This is less than ideal as the notification is displayed immediately with the icon missing, then the icon is fetched, but it works on all versions of Firefox OS.</li> +</ul> + +<h3 id="Chrome_notes">Chrome notes</h3> + +<ul> + <li>Prior to Chrome 22, the support for notification was following an <a href="http://www.chromium.org/developers/design-documents/desktop-notifications/api-specification" title="http://www.chromium.org/developers/design-documents/desktop-notifications/api-specification">old prefixed version of the specification</a> and was using the {{domxref("window.navigator.webkitNotifications","navigator.webkitNotifications")}} object to instantiate a new notification.</li> + <li>Prior to Chrome 32, {{domxref("Notification.permission")}} was not supported.</li> +</ul> + +<h3 id="Android_notes">Android notes</h3> + +<ul> + <li>The Android browser has been deprecated since Android 4.0. Newer versions use Chrome.</li> +</ul> + +<h3 id="Safari_notes">Safari notes</h3> + +<ul> + <li>Safari started supporting notification with Safari 6 but only on Mac OSX 10.8+ (Mountain Lion).</li> +</ul> + +<h2 id="Notes">Notes</h2> + +<p>{{ref("1")}} Deprecated since Android 4.0.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/WebAPI/Using_Web_Notifications" title="/en-US/docs/WebAPI/Using_Web_Notifications">Using Web Notifications</a></li> + <li><a class="external" href="https://github.com/soapdog/firefoxos-sample-app-image-uploader" title="Firefox OS Image Uploader Sample App">Firefox OS Image Uploader Sample App</a></li> +</ul> |