VektolにPWAを導入しました

1. ＰＷＡをＷｅｂサービスに導入した
椎野 文
＠PWAの勉強会をやりませんか？ in 松山市 2018/06/24

2. 自己紹介

3. 椎野 文
• サーバサイドエンジニア
• Ruby (ruby on rails)
• アプリ（Monacaでハイブリットアプリ開発 Angular）
– 自分で作るくじ引き You can Make lottery
• 1月から愛媛に住んでます
– 獣医向けのWebサービス開発
– 東京の仕事を受託開発

4. 獣医向けのWebサービス作ってます
• 人の可能性を拡げる
• 前の会社の同期が獣医学部だった
• 愛媛の動物病院さんと開発してます
• 獣医向けのconnpassみたいなサイト
• Ruby on Rails
• 開発は一人でやってます
https://vektol.net/

6. アプリ作りたくないな・・

7. アプリ作りたくない理由
• Swift ・ kotlin やったことない
• Mac持ってないよー
• アプリ作るほどのサービスか？
• テキストメインだし、別の言語覚えるほど？
• Monacaでアプリ作ったことあるけど、API作るの・・。
• 1人で開発してるから、Web（ruby）に集中したい

8. そんなとき・・
ＰＷＡを知りました！

9. PWA実装までの経緯
• 5月 兼久さんのＦＢ投稿を見てPWAを知る
– Web Working Group 「PWAに備える３ヶ月」 vol.1
https://www.youtube.com/watch?v=mSOdB5HFbAA&feature=youtu.be
– Web Working Group 「PWAに備える３ヶ月」 vol.2
https://www.youtube.com/watch?v=aUQs-KHqkIs&t=13s
• 5月 Google I/O 報告会 2018 四国 in 愛媛
– PWAをハンズオン
– 矢倉さんの説明わかりやすい・・！！
• 今日の勉強会までに実装するぞ！

10. PWAの構成要素
Page Cache
Service
worker

11. PWAの構成要素
ブラウザ
Cache
サーバ
サーバ
Page Cache
Service
worker

12. PWAの構成要素
Page
Web
Storage
Javascript
Page Cache
Service
worker

13. Ruby on Rails

14. Ruby on Rails
• gem serviceworker-rails
– https://github.com/rossta/serviceworker-rails
• Qiita
– https://qiita.com/hirotakasasaki/items/e3fb638b4f75a92bce8b
• この記事で対応できなかった部分の記事を追加
– iOSホーム画面のアイコン
– スプラッシュ画像
– https://qiita.com/shiinoaya/items/e8cf25244419b317beae

15. ありがとうございます。
• 誰かＰＣ余ってたら、年末までに貸してください。