Tweet
Tweet

Slide 1

Slide 1 text

部内チャットサービスのオフライン対応した話 とーふとふ (@to-hutohu) 2019/04/13 表参道Web勉強会 LT

Slide 2

Slide 2 text

自己紹介 2 表参道Web勉強会 n 名前: とーふとふ (@to_hutohu) n 所属: 東京工業大学4年 デジタル創作同好会traP n 言語: Golang Vue.jsなど n 好きなもの: Vtuber

Slide 3

Slide 3 text

traPとは？ 3 表参道Web勉強会 n 名前: 東京工業大学デジタル創作同好会trap n デジタルに関することならなんでもするサークル n 創設から4年 n 部員: 200名

Slide 4

Slide 4 text

部内チャットサービスのオフライン対応した話 とーふとふ (@to-hutohu) 2019/04/13 表参道Web勉強会 LT traQ のオフライン対応した話

Slide 5

Slide 5 text

traQ • 部内向けコミュニケーションサービス • チャンネルの階層化が特徴 • 二年目から運用 • 今年の3月にフルリプレース • ブラウザ・iOS/Android(側ネイティブ) • サーバー Go • クライアント Vue.js 表参道Web勉強会 5

Slide 6

Slide 6 text

動作画面 表参道Web勉強会 6

Slide 7

Slide 7 text

7 表参道Web勉強会 なぜSlackを使わないのか？ ？

Slide 8

Slide 8 text

表参道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万メッセージ

Slide 9

Slide 9 text

なぜSlackを使わないのか？ 9 表参道Web勉強会 n 無料枠の1万メッセージでは足りない l 役員会や制作プロジェクトは1年以上続く l さかのぼって議論を見直すことも良くある n 一人850円/月は高い l 部費は1年4000円 n 技術力も身につけたい

Slide 10

Slide 10 text

チームメンバー 表参道Web勉強会 10 @kaz @spa @ninja @sigma @masutech16 @to-hutohu @takashi_trap クライアント サーバー リーダー

Slide 11

Slide 11 text

技術選定 11 表参道Web勉強会 • バリバリモダンな感じに • Webアプリだけどネイティブに近い感覚で扱えるように • 部内で流行っている技術を中心に 技術選定の方針 Go Vue.js REST API

Slide 12

Slide 12 text

技術選定 12 表参道Web勉強会 • バリバリモダンな感じに • Webアプリだけどネイティブに近い感覚で扱えるように • 部内で流行っている技術を中心に 技術選定の方針 Go Vue.js REST API

Slide 13

Slide 13 text

13 表参道Web勉強会 ブラウザローカルにデータは存在しているのだから 周りをうまくやればオフラインで見られるのでは？ オフラインで見たい！

Slide 14

Slide 14 text

オフライン化実現に向けて 14 表参道Web勉強会 1. 静的ファイルのキャッシュ 2. APIのオフライン対応 3. メッセージのバックグラウンド更新 Service Workerの力を存分に使ってオフライン化を実現

Slide 15

Slide 15 text

オフライン化実現に向けて 15 表参道Web勉強会 1. 静的ファイルのキャッシュ 2. APIのオフライン対応 3. メッセージのバックグラウンド更新 Service Workerの力を存分に使ってオフライン化を実現

Slide 16

Slide 16 text

1. 静的ファイルのキャッシュ 16 表参道Web勉強会 n Workbox(ServiceWorker向けユーティリティ)を使う n vue-cliを使っていたのでプラグインを入れて設定するだけ n ユーザーのアイコンなども静的ファイルとしてWorkboxでキャッシュ(左側) n 各チャンネルのページのURLでもindex.htmlを返すように設定(右側)

Slide 17

Slide 17 text

オフライン化実現に向けて 17 表参道Web勉強会 1. 静的ファイルのキャッシュ 2. APIのオフライン対応 3. メッセージのバックグラウンド更新 Service Workerの力を存分に使ってオフライン化を実現

Slide 18

Slide 18 text

機能追加前の状況 18 表参道Web勉強会 n indexedDBによるAPIのキャッシュは 実装済み l サーバーからのデータの取得とindexedDBか らのデータの取得を Promise.race() で実行 l サーバーからのデータは必ずVuexのストアに 追加することでデータを反映

Slide 19

Slide 19 text

通信状態が悪い状況での動作 表参道Web勉強会 19 APIからレスポンスが返ってくるまで APIからレスポンスが返ってきた後 更新される indexedDBからのデータが表示 APIからのデータが表示

Slide 20

Slide 20 text

2. APIのオフライン対応 20 表参道Web勉強会 n navigator.onLine でインターネット接続を 確認できる n オフラインの場合はindexedDBからのみ データを取ってくるように l 実は変更しなくてもエラーがドバドバ出るだけで動き はする 変更部分

Slide 21

Slide 21 text

オフライン化実現に向けて 21 表参道Web勉強会 1. 静的ファイルのキャッシュ 2. APIのオフライン対応 3. メッセージのバックグラウンド更新 Service Workerの力を存分に使ってオフライン化を実現

Slide 22

Slide 22 text

メッセージの バックグラウンド更新 22 表参道Web勉強会 n 元々FCMで通知を受ける機能は存在していた n そのイベントの際にメッセージを取得し indexedDBに入れておく

Slide 23

Slide 23 text

実際の動作 表参道Web勉強会 23 1. 通知を受け取る 2. オフラインにしてアプリをキル 3. オフラインの状態でアプリが開ける！ 4. メッセージも最新！！！ 5. オンラインにするとファイルなどの情報も取得できる

Slide 24

Slide 24 text

ΦϑϥΠϯରԠʂʂʂ !

Slide 25

Slide 25 text

とはいったものの・・・ 25 表参道Web勉強会 まだまだ必要な修正は多い n オフライン時のUI修正 l チャンネル名のところの色を変えるとか？ n オフライン時でもメッセージを送りたい l Service Workerの Background Sync を使うとできそう l UIのロジック変更が伴う

Slide 26

Slide 26 text

26 表参道Web勉強会 これからもまだまだ機能追加を頑張っていく!! ネイティブアプリよりも 快適なPWAを目指して

Slide 27

Slide 27 text

ありがとうございました！！ n 今日紹介したtraQのリポジトリ n サーバー https://github.com/traPtitech/traQ n クライアント https://github.com/traPtitech/traQ-UI

Slide 28

Slide 28 text

宣伝 28 表参道Web勉強会 n macOSのモードによってテーマが自 動で変化する n 解説記事 [WebアプリでmacOSの テーマ切り替えを取得する方法] (https://qiita.com/unipota/items /ec552bd3d782844e65ef)

Slide 29

Slide 29 text

THE POWER OF POWERPOINT Jun Akizaki http://thepopp.com