Slide 1
Slide 1 text
既存サイトをPWA化した
株式会社ソニックガーデン
野上 誠司
Slide 2
Slide 2 text
自己紹介
野上 誠司（のがみ せいじ）
@LuckOfWise
岡山在住
気さくなプロトタイププログラマー
まかない店長
Slide 3
Slide 3 text
お品書き
● ベタなHTMLで作られたサイトをPWA化
● WordPressで作られたサイトをPWA化
● Railsで作られたサイトをPWA化
Slide 4
Slide 4 text
ベタなHTMLで作られたサイトを
PWA化
Slide 5
Slide 5 text
方針
● とりあえずLighthouseでスコアが100になる
ことを目指す
● 細かい説明は置いておく
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
Manifest.json
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
theme-color
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
Service Worker
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
Service Workerが登録されていることを確認
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
Cache
Slide 21
Slide 21 text
Cache方針
● 基本的にはキャッシュしたものを返す
● まだキャッシュしてないものにアクセスしたらキャッシュする
● コンテンツの内容を変えたらキャッシュのkeyを変えて古いのを削除する
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
Chromeでキャッシュされてるの確認するのはこのへん見るよ
Slide 25
Slide 25 text
全体の差分はこちら
https://github.com/osokayama/osokayama.gi
thub.io/pull/104
Slide 26
Slide 26 text
WordPressで作られたサイトを
PWA化
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
プラグインインストールでおｋ
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
Railsで作られたサイトをPWA化
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
gem 'serviceworker-rails'
Slide 37
Slide 37 text
rails g serviceworker:install
Slide 38
Slide 38 text
manifest.json, theme-color
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
push
Slide 41
Slide 41 text
push server
ブラウザ
Web
Service Worker
app server
① endpoint取得
②endpoint送信
③pushをリクエスト
④push
Slide 42
Slide 42 text
OneSignal
Slide 43
Slide 43 text
色んなデバイスや複数人に一気に送るのに便利
Slide 44
Slide 44 text
URLを設定していると通知をタップすると該当の WPAアプリが開く
Slide 45
Slide 45 text
参考サイト
● Manifestファイルについて
○ https://developers.google.com/web/fundamentals/web-app-manifest/?hl=ja
● SericeWorker
○ https://developers.google.com/web/fundamentals/primers/service-workers/?hl=ja
● cache
○ https://developer.mozilla.org/en-US/docs/Web/API/Cache
● client, clients
○ https://developer.mozilla.org/en-US/docs/Web/API/Client
○ https://developer.mozilla.org/en-US/docs/Web/API/Clients
● Navigator
○ https://developer.mozilla.org/en-US/docs/Web/API/Navigator