gcm_sender_id は適切な値に書き換える。
localhost でテストする限りに於いては変更する必要なし。
push.cmd を開き API_KEY と SUBSCRIPTION_ID を適切に入力し、実行する。
push.sh を開き API_KEY と SUBSCRIPTION_ID を適切に入力し、実行する。
Last active
August 29, 2015 14:19
-
-
Save ww24/9a3d5df4114fa209b4be to your computer and use it in GitHub Desktop.
Service Workers Push API Hands-on
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Service Workers Push API hands-on | |
| */ | |
| $(function () { | |
| navigator.serviceWorker.register("worker.js") | |
| .then(function (reg) { | |
| if (window.Notification.permission === "denied") { | |
| throw new Error("The user has blocked notification"); | |
| } | |
| return reg.pushManager.getSubscription(); | |
| }).then(function (sub) { | |
| if (! sub) { | |
| // enable subscription button | |
| $("#btn").prop("disabled", false); | |
| return console.log("Unsubscribed."); | |
| } | |
| console.log("subscription:", sub.subscriptionId); | |
| }).catch(function (err) { | |
| console.error("register:", err); | |
| alert("Failed."); | |
| }); | |
| $("#btn").click(function () { | |
| navigator.serviceWorker.ready.then(function (reg) { | |
| reg.pushManager.subscribe().then(function (sub) { | |
| // disable subscription button | |
| $("#btn").prop("disabled", true); | |
| console.log("subscribe:", sub.subscriptionId); | |
| }).catch(function (err) { | |
| console.error("subscribe:", err); | |
| alert("Failed."); | |
| }); | |
| }); | |
| }); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="ja"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <link rel="manifest" href="manifest.json"> | |
| <title>Service Workers DEMO</title> | |
| </head> | |
| <body> | |
| <h1>Service Workers DEMO</h1> | |
| <p> | |
| <button id="btn" disabled="true">Subscribe</button> | |
| </p> | |
| <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "push test", | |
| "short_name": "push!", | |
| "icons": [{ | |
| "src": "html5.png", | |
| "sizes": "64x64", | |
| "type": "image/png" | |
| }], | |
| "start_url": "/", | |
| "display": "standalone", | |
| "gcm_sender_id": "849903130382", | |
| "gcm_user_visible_only": true | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @set API_KEY=AIzaSyD29klxLmGqbCPBLpSrUbgHVtqETsqmHmw | |
| @set SUBSCRIPTION_ID=APA91bGh6SVD7RTL2EGDav6YGAF6JCn4OE1GQwshzgiy2VysMhObxPieffzg2Ys5z5xrnLHmJBpWWa_LUYQXckLRj28y7xyT4N-G5VIN60j5lnmuPn5SGg-Q6IByOGuxp1zjmGwVyg44TrLO3-fCsInJ2wztIKPAkcIaidoAhnCJllHjul1j3q4 | |
| @set script=Invoke-RestMethod -Headers @{Authorization="key=%API_KEY%"} -ContentType "application/json" -Uri "https://android.googleapis.com/gcm/send" -Method POST -Body (ConvertTo-Json @{registration_ids=@("%SUBSCRIPTION_ID%")}) | |
| @set script=%script:"=\"% | |
| powershell -Command "%script%" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #!/bin/sh | |
| API_KEY="AIzaSyD29klxLmGqbCPBLpSrUbgHVtqETsqmHmw" | |
| SUBSCRIPTION_ID="APA91bGh6SVD7RTL2EGDav6YGAF6JCn4OE1GQwshzgiy2VysMhObxPieffzg2Ys5z5xrnLHmJBpWWa_LUYQXckLRj28y7xyT4N-G5VIN60j5lnmuPn5SGg-Q6IByOGuxp1zjmGwVyg44TrLO3-fCsInJ2wztIKPAkcIaidoAhnCJllHjul1j3q4" | |
| curl --header "Authorization:key=$API_KEY" --header "Content-Type:application/json" https://android.googleapis.com/gcm/send -d "{\"registration_ids\":[\"$SUBSCRIPTION_ID\"]}" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Service Worker script | |
| */ | |
| // プッシュ通知を受け取った時の処理 | |
| self.addEventListener("push", function (event) { | |
| console.log("push event"); | |
| // GET request | |
| var promise = self.fetch("http://api.openweathermap.org/data/2.5/weather?q=Sapporo,JP") | |
| .then(function (res) { | |
| var err; | |
| if (res.status !== 200) { | |
| err = new Error(res.status); | |
| err.status = res.status; | |
| throw err; | |
| } | |
| // get response body (json) | |
| return res.json(); | |
| }).then(function (data) { | |
| return self.registration.showNotification("天気情報", { | |
| body: [ | |
| "都市: " + data.name.split("-")[0], | |
| "天気: " + data.weather[0].main, | |
| "気温: " + Math.round(data.main.temp - 273.15) + "℃" | |
| ].join("\n"), | |
| icon: "html5.png", | |
| tag: "weather" | |
| }); | |
| }).catch(function (err) { | |
| if (err.status === 404) { | |
| return console.log(err); | |
| } | |
| console.error(err); | |
| }); | |
| // 非同期処理が実行し終わるのを待つ | |
| event.waitUntil(promise); | |
| }); | |
| // 通知がクリックされた時の処理 | |
| self.addEventListener("notificationclick", function (event) { | |
| console.log("notification click event:", event.notification.tag); | |
| event.notification.close(); | |
| var promise = clients.matchAll({ | |
| type: "window" | |
| }).then(function (client_list) { | |
| client_list = client_list.filter(function (client) { | |
| return client.url === "/" && "focus" in client; | |
| }); | |
| if (client_list[0]) { | |
| client_list[0].focus(); | |
| } else { | |
| clients.openWindow("/"); | |
| } | |
| console.log(client_list); | |
| }); | |
| event.waitUntil(promise); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Google Developers Console