おれおれブログシステムにserviceworkerを導入してみた #serviceworker
TRANSCRIPT
![Page 1: おれおれブログシステムにServiceWorkerを導入してみた #serviceworker](https://reader033.vdocuments.mx/reader033/viewer/2022052413/55a932401a28ab30368b469a/html5/thumbnails/1.jpg)
おれおれブログシステム にServiceWorkerを
導入してみた #serviceworker
Toshiaki Maki (チーム一人@making) 2015-04-04 Service Workerハッカソン
![Page 2: おれおれブログシステムにServiceWorkerを導入してみた #serviceworker](https://reader033.vdocuments.mx/reader033/viewer/2022052413/55a932401a28ab30368b469a/html5/thumbnails/2.jpg)
おれおれbloghttps://github.com/making/categolj2-backend
フルREST APIなブログシステム フロントエンドを好きに作れる
(JenkinsやGitBucketのように簡単に起動できる)
![Page 4: おれおれブログシステムにServiceWorkerを導入してみた #serviceworker](https://reader033.vdocuments.mx/reader033/viewer/2022052413/55a932401a28ab30368b469a/html5/thumbnails/4.jpg)
システム構成
Backend API (Java)
Frontend SPA
(React.js)
Backend SPA
(Backbone.js)
REST API
REST API
デフォルト画面
デフォルト画面
![Page 5: おれおれブログシステムにServiceWorkerを導入してみた #serviceworker](https://reader033.vdocuments.mx/reader033/viewer/2022052413/55a932401a28ab30368b469a/html5/thumbnails/5.jpg)
今日やりたかったこと
• オフラインでも管理画面で記事を作成・保存する
• 新しい記事が投稿されたら通知する
![Page 6: おれおれブログシステムにServiceWorkerを導入してみた #serviceworker](https://reader033.vdocuments.mx/reader033/viewer/2022052413/55a932401a28ab30368b469a/html5/thumbnails/6.jpg)
今日やりたかったこと
Backend API (Java)
Frontend SPA
(React.js)
Backend SPA
(Backbone.js)
REST API
REST API
投稿があれば通知
オフラインの場合に、Service Worker経由で 作業内容をキャッシュする
![Page 7: おれおれブログシステムにServiceWorkerを導入してみた #serviceworker](https://reader033.vdocuments.mx/reader033/viewer/2022052413/55a932401a28ab30368b469a/html5/thumbnails/7.jpg)
今日できたこと
Backend API (Java)
Frontend SPA
(React.js)
Backend SPA
(Backbone.js)
REST API
REST API
投稿があれば通知
オフラインの場合に、Service Worker経由で 作業内容をキャッシュする
![Page 8: おれおれブログシステムにServiceWorkerを導入してみた #serviceworker](https://reader033.vdocuments.mx/reader033/viewer/2022052413/55a932401a28ab30368b469a/html5/thumbnails/8.jpg)
流れ
Backend API (Java)
Frontend SPA
(React.js)
Backend SPA
(Backbone.js)
REST API
REST API
購読ボタンクリック
ユーザー
![Page 9: おれおれブログシステムにServiceWorkerを導入してみた #serviceworker](https://reader033.vdocuments.mx/reader033/viewer/2022052413/55a932401a28ab30368b469a/html5/thumbnails/9.jpg)
流れ
Backend API (Java)
Frontend SPA
(React.js)
Backend SPA
(Backbone.js)
REST API
REST API
購読者情報保存
ユーザー
![Page 10: おれおれブログシステムにServiceWorkerを導入してみた #serviceworker](https://reader033.vdocuments.mx/reader033/viewer/2022052413/55a932401a28ab30368b469a/html5/thumbnails/10.jpg)
流れ
Backend API (Java)
Frontend SPA
(React.js)
Backend SPA
(Backbone.js)
REST API
REST API
記事投稿
ユーザー
ぼく
![Page 11: おれおれブログシステムにServiceWorkerを導入してみた #serviceworker](https://reader033.vdocuments.mx/reader033/viewer/2022052413/55a932401a28ab30368b469a/html5/thumbnails/11.jpg)
流れ
Backend API (Java)
Frontend SPA
(React.js)
Backend SPA
(Backbone.js)
REST API
REST API
GCMに送信
GCM
ユーザー
ぼく
![Page 12: おれおれブログシステムにServiceWorkerを導入してみた #serviceworker](https://reader033.vdocuments.mx/reader033/viewer/2022052413/55a932401a28ab30368b469a/html5/thumbnails/12.jpg)
流れ
Backend API (Java)
Frontend SPA
(React.js)
Backend SPA
(Backbone.js)
REST API
REST API
購読者に通知
GCM
ユーザー
ぼく
![Page 13: おれおれブログシステムにServiceWorkerを導入してみた #serviceworker](https://reader033.vdocuments.mx/reader033/viewer/2022052413/55a932401a28ab30368b469a/html5/thumbnails/13.jpg)
流れ
Backend API (Java)
Frontend SPA
(React.js)
Backend SPA
(Backbone.js)
REST API
REST API
購読者に通知
GCM
ユーザー
ぼく
ブログの ユーザーエンゲージメント
向上 !!!
![Page 14: おれおれブログシステムにServiceWorkerを導入してみた #serviceworker](https://reader033.vdocuments.mx/reader033/viewer/2022052413/55a932401a28ab30368b469a/html5/thumbnails/14.jpg)
デモ
![Page 15: おれおれブログシステムにServiceWorkerを導入してみた #serviceworker](https://reader033.vdocuments.mx/reader033/viewer/2022052413/55a932401a28ab30368b469a/html5/thumbnails/15.jpg)
できてないこと
• 購読中止ボタン
• https対応
• 本番デプロイ
• オフライン対応!!
うちに帰って続きをやる!
![Page 16: おれおれブログシステムにServiceWorkerを導入してみた #serviceworker](https://reader033.vdocuments.mx/reader033/viewer/2022052413/55a932401a28ab30368b469a/html5/thumbnails/16.jpg)
興味がわいたら 試してみてください
https://github.com/making/categolj2-backend
フルREST APIなブログシステム フロントエンドを好きに作れる
(JenkinsやGitBucketのように簡単に起動できる)
きっとService Worker対応します!