Service Workerハッカソンでつくったもの

1. おれおれブログシステム
にServiceWorkerを
導入してみた #serviceworker
Toshiaki Maki (チーム一人@making)
2015-04-04 Service Workerハッカソン

2. おれおれblog
https://github.com/making/categolj2-backend
フルREST APIなブログシステム
フロントエンドを好きに作れる
(JenkinsやGitBucketのように簡単に起動できる)

3. http://blog.ik.am
自分用ブログに
使われている

4. システム構成
Backend
API
(Java)
Frontend
SPA
(React.js)
Backend
SPA
(Backbone.js)
REST API
REST API
デフォルト
画面
デフォルト
画面

5. 今日やりたかったこと
• オフラインでも管理画面で記事を作成・保存する
• 新しい記事が投稿されたら通知する

6. 今日やりたかったこと
Backend
API
(Java)
Frontend
SPA
(React.js)
Backend
SPA
(Backbone.js)
REST API
REST API
投稿があれば通知
オフラインの場合に、Service Worker経由で
作業内容をキャッシュする

7. 今日できたこと
Backend
API
(Java)
Frontend
SPA
(React.js)
Backend
SPA
(Backbone.js)
REST API
REST API
投稿があれば通知
オフラインの場合に、Service Worker経由で
作業内容をキャッシュする

8. 流れ
Backend
API
(Java)
Frontend
SPA
(React.js)
Backend
SPA
(Backbone.js)
REST API
REST API
購読ボタンクリック
ユーザー

9. 流れ
Backend
API
(Java)
Frontend
SPA
(React.js)
Backend
SPA
(Backbone.js)
REST API
REST API
購読者情報保存
ユーザー

10. 流れ
Backend
API
(Java)
Frontend
SPA
(React.js)
Backend
SPA
(Backbone.js)
REST API
REST API
記事投稿
ユーザー
ぼく

11. 流れ
Backend
API
(Java)
Frontend
SPA
(React.js)
Backend
SPA
(Backbone.js)
REST API
REST API
GCMに送信
GCM
ユーザー
ぼく

12. 流れ
Backend
API
(Java)
Frontend
SPA
(React.js)
Backend
SPA
(Backbone.js)
REST API
REST API
購読者に通知
GCM
ユーザー
ぼく

13. 流れ
Backend
API
(Java)
Frontend
SPA
(React.js)
Backend
SPA
(Backbone.js)
REST API
REST API
購読者に通知
GCM
ユーザー
ぼく
ブログの
ユーザーエンゲージメント
向上 !!!

14. デモ

15. できてないこと
• 購読中止ボタン
• https対応
• 本番デプロイ
• オフライン対応！！
うちに帰って続きをやる！

16. 興味がわいたら
試してみてください
https://github.com/making/categolj2-backend
フルREST APIなブログシステム
フロントエンドを好きに作れる
(JenkinsやGitBucketのように簡単に起動できる)
きっとService Worker対応します！