files/ja/web/api/serviceworkerglobalscope/onpush/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

---
title: ServiceWorkerGlobalScope.onpush
slug: Web/API/ServiceWorkerGlobalScope/onpush
tags:
  - API
  - Property
  - Push
  - Reference
  - Service Worker
  - ServiceWorker
  - ServiceWorkerGlobalScope
  - onpush
translation_of: Web/API/ServiceWorkerGlobalScope/onpush
---
<div>{{APIRef("Service Workers API")}}</div>

<p>{{domxref("ServiceWorkerGlobalScope")}} インターフェースの <code><strong>ServiceWorkerGlobalScope.onpush</strong></code> イベントは、Service Worker がプッシュサーバー経由でメッセージを受け取るたびに発火します。</p>

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="syntaxbox">ServiceWorkerGlobalScope.onpush = function(PushEvent) { ... }
self.addEventListener('push', function(PushEvent) { ... })
</pre>

<h2 id="Example" name="Example">例</h2>

<p>次の例では、{{domxref("PushEvent")}} からデータを取得して、すべての Service Worker のクライアント上で表示しています。プッシュメッセージのデータペイロードは、イベントオブジェクトの <code>data</code> プロパティ（{{domxref("PushEvent.data")}} は {{domxref("PushMessageData")}} オブジェクトを含みます。）で利用できます。</p>

<pre class="brush: js">self.addEventListener('push', function(event) {
 if (!(self.Notification &amp;&amp; self.Notification.permission === 'granted')) {
   return;
 }

 var data = {};
 if (event.data) {
   data = event.data.json();
 }
 var title = data.title || "Something Has Happened";
 var message = data.message || "Here's something you might want to check out.";
 var icon = "images/new-notification.png";

 var notification = new Notification(title, {
   body: message,
   tag: 'simple-push-demo-notification',
   icon: icon
 });

 notification.addEventListener('click', function() {
   if (clients.openWindow) {
     clients.openWindow('https://example.blog.com/2015/03/04/something-new.html');
   }
 });
});</pre>

<h2 id="Specifications" name="Specifications">仕様</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">仕様</th>
   <th scope="col">ステータス</th>
   <th scope="col">コメント</th>
  </tr>
  <tr>
   <td>{{SpecName('Push API', '#widl-ServiceWorkerGlobalScope-onpush', 'onpush')}}</td>
   <td>{{Spec2('Push API')}}</td>
   <td>初期定義。このイベントは {{domxref("ServiceWorkerGlobalScope")}} からアクセスしますが、Push API で定義されています。</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>

<div>
<div class="hidden">このページの互換性テーブルは構造化データから作成されています。データに貢献したい場合、<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックし、プルリクエストを送ってください。</div>

<p>{{Compat("api.ServiceWorkerGlobalScope.onpush")}}</p>
</div>

<h2 id="See_also" name="See_also">関連項目</h2>

<ul>
 <li><a href="/ja/docs/Web/API/Push_API">Push API</a></li>
</ul>