既存サイトをPWA化した話

Transcript

1. 既存サイトをPWA化した 株式会社ソニックガーデン 野上　誠司

2. 自己紹介 野上　誠司（のがみ　せいじ） @LuckOfWise 岡山在住 気さくなプロトタイププログラマー まかない店長

3. お品書き • ベタなHTMLで作られたサイトをPWA化 • WordPressで作られたサイトをPWA化 • Railsで作られたサイトをPWA化

4. ベタなHTMLで作られたサイトを PWA化

5. 方針 • とりあえずLighthouseでスコアが100になる ことを目指す • 細かい説明は置いておく

6. None
7. None

8. Manifest.json

9. None
10. None
11. None

12. theme-color

13. None
14. None

15. Service Worker

16. None
17. None

18. Service Workerが登録されていることを確認

19. None

20. Cache

21. Cache方針 • 基本的にはキャッシュしたものを返す • まだキャッシュしてないものにアクセスしたらキャッシュする • コンテンツの内容を変えたらキャッシュのkeyを変えて古いのを削除する

22. None
23. None

24. Chromeでキャッシュされてるの確認するのはこのへん見るよ

25. 全体の差分はこちら https://github.com/osokayama/osokayama.gi thub.io/pull/104

26. WordPressで作られたサイトを PWA化

27. None
28. None

29. プラグインインストールでおｋ

30. None
31. None
32. None

33. Railsで作られたサイトをPWA化

34. None
35. None

36. gem 'serviceworker-rails'

37. rails g serviceworker:install

38. manifest.json, theme-color

39. None

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