追記 2017/06/19
このエントリで絶賛してる公式ドキュメントがいつの間にかすっげーわかりづらいものになってたので、あらためて自分でサンプル書いたやつがこちらです。
以下原文
Progressive Web App Dev Summit っていうのがあったので行ってきました。結論から言うとめっちゃ面白かったです。
個人的にはだいたいの場合「ネイティブアプリが作りたい」と思う同期の多くが「プッシュ通知したい」だったので、ウェブで完結してプッシュ通知できるんならそれはとっても嬉しいな、って。
ゴール
- サーバからのプッシュ通知を
- PCのChromeが受け取れる
- サーバ(GCM)からのプッシュなので、WebSocketとかロングポーリングとかしてnew Notificationして…、とかやらなくていい!
参考
- Progressive Web Apps | Web | Google Developers
- Adding Push Notifications to a Web App | Web | Google Developers
- <- この資料が懇切丁寧すぎてやばい。ほかに何もいらない
- Adding Push Notifications to a Web App | Web | Google Developers
- Simple Push Demo
作業記録
実際の作業記録はこれです: Commits · otiai10/push-notifications · GitHub
- Adding Push Notifications to a Web App | Web | Google Developers
- <- この資料が懇切丁寧すぎてやばい。ほかに何もいらない
マジでこれなので、詰まったところだけ備忘録します
ServiceWorkerが更新されない問題
問題
sw.js
の内容を更新したのに、出てくるpushNotificationのアイコンとかが変わってないよ
解決
unregisterして再度registerすれば治る
chrome://serviceworker-internals/
ここから、unregister- なんかエラーでるしブラウザめっちゃリロードした
DOMException: Subscription failed - no active Service Worker
Adding Push Notifications to a Web App | Web | Google Developers
雑感
- ぜんぜん詰まらなかった。ドキュメントがめちゃくそ丁寧!
- これをAndroidのChrome相手にやれば、ネイティブのスリープ画面での通知トーストとかが使える!はず!最高!
- Progressive Web App dev summit、すげー面白かったです
- #pwadevsummit - Twitter Search
- もちろんpushNotificationも具体的でよかったんですが、
- Offline First
- ServiceWorkerを活用したcache
- 全体的には、manifest.jsonとServiceWorkerがすげえな、っていう印象です(雑)
DRYな備忘録として