おれおれブログシステムにserviceworkerを導入してみた #serviceworker

おれおれブログシステム にServiceWorkerを

導入してみた #serviceworker

Toshiaki Maki (チーム一人@making) 2015-04-04 Service Workerハッカソン

おれおれbloghttps://github.com/making/categolj2-backend

フルREST APIなブログシステム フロントエンドを好きに作れる

(JenkinsやGitBucketのように簡単に起動できる)

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

システム構成

Backend API (Java)

Frontend SPA

(React.js)

Backend SPA

(Backbone.js)

REST API

REST API

デフォルト画面

デフォルト画面

今日やりたかったこと

• オフラインでも管理画面で記事を作成・保存する

• 新しい記事が投稿されたら通知する

今日やりたかったこと

Backend API (Java)

Frontend SPA

(React.js)

Backend SPA

(Backbone.js)

REST API

REST API

投稿があれば通知

オフラインの場合に、Service Worker経由で 作業内容をキャッシュする

今日できたこと

Backend API (Java)

Frontend SPA

(React.js)

Backend SPA

(Backbone.js)

REST API

REST API

投稿があれば通知

オフラインの場合に、Service Worker経由で 作業内容をキャッシュする

流れ

Backend API (Java)

Frontend SPA

(React.js)

Backend SPA

(Backbone.js)

REST API

REST API

購読ボタンクリック

ユーザー

流れ

Backend API (Java)

Frontend SPA

(React.js)

Backend SPA

(Backbone.js)

REST API

REST API

購読者情報保存

ユーザー

流れ

Backend API (Java)

Frontend SPA

(React.js)

Backend SPA

(Backbone.js)

REST API

REST API

記事投稿

ユーザー

ぼく

流れ

Backend API (Java)

Frontend SPA

(React.js)

Backend SPA

(Backbone.js)

REST API

REST API

GCMに送信

GCM

ユーザー

ぼく

流れ

Backend API (Java)

Frontend SPA

(React.js)

Backend SPA

(Backbone.js)

REST API

REST API

購読者に通知

GCM

ユーザー

ぼく

流れ

Backend API (Java)

Frontend SPA

(React.js)

Backend SPA

(Backbone.js)

REST API

REST API

購読者に通知

GCM

ユーザー

ぼく

ブログの ユーザーエンゲージメント

向上 !!!

デモ

できてないこと

• 購読中止ボタン

• https対応

• 本番デプロイ

• オフライン対応！！

うちに帰って続きをやる！

興味がわいたら 試してみてください

https://github.com/making/categolj2-backend

フルREST APIなブログシステム フロントエンドを好きに作れる

(JenkinsやGitBucketのように簡単に起動できる)

きっとService Worker対応します！