部内チャットツールのオフライン対応をした話 / Make traQ offline available

『Vue.js/PWA/JavaScript…新&定番なんでもあり』表参道Web勉強会 Vol.2 - connpass (https://connpass.com/event/124534/) でのLTで発表した資料です。

Transcript

1. 部内チャットサービスのオフライン対応した話 とーふとふ (@to-hutohu) 2019/04/13 表参道Web勉強会 LT
2. 自己紹介 2 表参道Web勉強会 n 名前: とーふとふ (@to_hutohu) n 所属: 東京工業大学4年 デジタル創作同好会traP n 言語: Golang Vue.jsなど n 好きなもの: Vtuber
3. traPとは？ 3 表参道Web勉強会 n 名前: 東京工業大学デジタル創作同好会trap n デジタルに関することならなんでもするサークル n 創設から4年 n 部員: 200名
4. 部内チャットサービスのオフライン対応した話 とーふとふ (@to-hutohu) 2019/04/13 表参道Web勉強会 LT traQ のオフライン対応した話
5. traQ • 部内向けコミュニケーションサービス • チャンネルの階層化が特徴 • 二年目から運用 • 今年の3月にフルリプレース • ブラウザ・iOS/Android(側ネイティブ) • サーバー Go • クライアント Vue.js 表参道Web勉強会 5
6. 動作画面 表参道Web勉強会 6
7. 7 表参道Web勉強会 なぜSlackを使わないのか？ ？
8. 表参道Web勉強会 8 0 500 1000 1500 2000 2500 3000 3500 4000 4500 5000 2015/4/4 2016/4/4 2017/4/4 2018/4/4 2019/4/4 2018/6/17-23 4629メッセージ 2017/09/16 10万メッセージ 2018/11/3 20万メッセージ 一週間ごとのメッセージ数の推移 Slackの無料枠は 1万メッセージ
9. なぜSlackを使わないのか？ 9 表参道Web勉強会 n 無料枠の1万メッセージでは足りない l 役員会や制作プロジェクトは1年以上続く l さかのぼって議論を見直すことも良くある n 一人850円/月は高い l 部費は1年4000円 n 技術力も身につけたい
10. チームメンバー 表参道Web勉強会 10 @kaz @spa @ninja @sigma @masutech16 @to-hutohu @takashi_trap クライアント サーバー リーダー
11. 技術選定 11 表参道Web勉強会 • バリバリモダンな感じに • Webアプリだけどネイティブに近い感覚で扱えるように • 部内で流行っている技術を中心に 技術選定の方針 Go Vue.js REST API
12. 技術選定 12 表参道Web勉強会 • バリバリモダンな感じに • Webアプリだけどネイティブに近い感覚で扱えるように • 部内で流行っている技術を中心に 技術選定の方針 Go Vue.js REST API
13. 13 表参道Web勉強会 ブラウザローカルにデータは存在しているのだから 周りをうまくやればオフラインで見られるのでは？ オフラインで見たい！
14. オフライン化実現に向けて 14 表参道Web勉強会 1. 静的ファイルのキャッシュ 2. APIのオフライン対応 3. メッセージのバックグラウンド更新 Service Workerの力を存分に使ってオフライン化を実現
15. オフライン化実現に向けて 15 表参道Web勉強会 1. 静的ファイルのキャッシュ 2. APIのオフライン対応 3. メッセージのバックグラウンド更新 Service Workerの力を存分に使ってオフライン化を実現
16. 1. 静的ファイルのキャッシュ 16 表参道Web勉強会 n Workbox(ServiceWorker向けユーティリティ)を使う n vue-cliを使っていたのでプラグインを入れて設定するだけ n ユーザーのアイコンなども静的ファイルとしてWorkboxでキャッシュ(左側) n 各チャンネルのページのURLでもindex.htmlを返すように設定(右側)
17. オフライン化実現に向けて 17 表参道Web勉強会 1. 静的ファイルのキャッシュ 2. APIのオフライン対応 3. メッセージのバックグラウンド更新 Service Workerの力を存分に使ってオフライン化を実現
18. 機能追加前の状況 18 表参道Web勉強会 n indexedDBによるAPIのキャッシュは 実装済み l サーバーからのデータの取得とindexedDBか らのデータの取得を Promise.race() で実行 l サーバーからのデータは必ずVuexのストアに 追加することでデータを反映
19. 通信状態が悪い状況での動作 表参道Web勉強会 19 APIからレスポンスが返ってくるまで APIからレスポンスが返ってきた後 更新される indexedDBからのデータが表示 APIからのデータが表示
20. 2. APIのオフライン対応 20 表参道Web勉強会 n navigator.onLine でインターネット接続を 確認できる n オフラインの場合はindexedDBからのみ データを取ってくるように l 実は変更しなくてもエラーがドバドバ出るだけで動き はする 変更部分
21. オフライン化実現に向けて 21 表参道Web勉強会 1. 静的ファイルのキャッシュ 2. APIのオフライン対応 3. メッセージのバックグラウンド更新 Service Workerの力を存分に使ってオフライン化を実現
22. メッセージの バックグラウンド更新 22 表参道Web勉強会 n 元々FCMで通知を受ける機能は存在していた n そのイベントの際にメッセージを取得し indexedDBに入れておく
23. 実際の動作 表参道Web勉強会 23 1. 通知を受け取る 2. オフラインにしてアプリをキル 3. オフラインの状態でアプリが開ける！ 4. メッセージも最新！！！ 5. オンラインにするとファイルなどの情報も取得できる
24. ΦϑϥΠϯରԠʂʂʂ !
25. とはいったものの・・・ 25 表参道Web勉強会 まだまだ必要な修正は多い n オフライン時のUI修正 l チャンネル名のところの色を変えるとか？ n オフライン時でもメッセージを送りたい l Service Workerの Background Sync を使うとできそう l UIのロジック変更が伴う
26. 26 表参道Web勉強会 これからもまだまだ機能追加を頑張っていく!! ネイティブアプリよりも 快適なPWAを目指して
27. ありがとうございました！！ n 今日紹介したtraQのリポジトリ n サーバー https://github.com/traPtitech/traQ n クライアント https://github.com/traPtitech/traQ-UI
28. 宣伝 28 表参道Web勉強会 n macOSのモードによってテーマが自 動で変化する n 解説記事 [WebアプリでmacOSの テーマ切り替えを取得する方法] (https://qiita.com/unipota/items /ec552bd3d782844e65ef)
29. THE POWER OF POWERPOINT Jun Akizaki http://thepopp.com