既存サイトをPWA化した話

SonicGarden Tech #1 岡山 で発表した資料です。

実際のサイトを例にPWA化していくまでの流れを説明しました。

Transcript

1. 既存サイトをPWA化した 株式会社ソニックガーデン 野上　誠司
2. 自己紹介 野上　誠司（のがみ　せいじ） @LuckOfWise 岡山在住 気さくなプロトタイププログラマー まかない店長
3. お品書き • ベタなHTMLで作られたサイトをPWA化 • WordPressで作られたサイトをPWA化 • Railsで作られたサイトをPWA化
4. ベタなHTMLで作られたサイトを PWA化
5. 方針 • とりあえずLighthouseでスコアが100になる ことを目指す • 細かい説明は置いておく
8. Manifest.json
12. theme-color
15. Service Worker
18. Service Workerが登録されていることを確認
20. Cache
21. Cache方針 • 基本的にはキャッシュしたものを返す • まだキャッシュしてないものにアクセスしたらキャッシュする • コンテンツの内容を変えたらキャッシュのkeyを変えて古いのを削除する
24. Chromeでキャッシュされてるの確認するのはこのへん見るよ
25. 全体の差分はこちら https://github.com/osokayama/osokayama.gi thub.io/pull/104
26. WordPressで作られたサイトを PWA化
29. プラグインインストールでおｋ
33. Railsで作られたサイトをPWA化
36. gem 'serviceworker-rails'
37. rails g serviceworker:install
38. manifest.json, theme-color
40. push
41. push server ブラウザ Web Service Worker app server ① endpoint取得 ②endpoint送信 ③pushをリクエスト ④push
42. OneSignal
43. 色んなデバイスや複数人に一気に送るのに便利
44. URLを設定していると通知をタップすると該当の WPAアプリが開く
45. 参考サイト • 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