いこレポでのWorkbox導入事例 @PWA Night #7

by HeRo

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Copyright (C) 2019 ActIndi, Inc. All Rights Reserved. Add to Home Screenの表示条件 ● すでにインストールされていないこと ● prefer_related_applications: false であること ● マニフェストに次の含むこと ○ short_name または name ○ 192px と 512px のicons ○ start_url ○ display が fullscreen, standalone, minimal-uiのいずれか ● HTTPS ● ServiceWorker が登録されていること ● ServiceWorkerでfetchイベントハンドラを実装していること https://developers.google.com/web/fundamentals/app-install-banners/ Chromeでの話です。

Slide 13

Slide 13 text

Copyright (C) 2019 ActIndi, Inc. All Rights Reserved. いこレポはすでにほとんど満たしていた ✅ すでにインストールされていないこと ✅ prefer_related_applications: false であること ✅ マニフェストに次の含むこと ○ short_name または name ○ 192px と 512px のicons ○ start_url ○ display が fullscreen, standalone, minimal-uiのいずれか ✅ HTTPS ✅ ServiceWorker が登録されていること ❌ ServiceWorkerでfetchイベントハンドラを実装していること実は初期開発で実装していたものの、最後の条件が追加され動かなくなっていた

Slide 14

Slide 14 text

Copyright (C) 2019 ActIndi, Inc. All Rights Reserved. fetch イベントハンドラって？ ServiceWorkerの主な用途であるキャッシュその際、ServiceWorkerはサーバへの通信を横取りしてキャッシュがあればそれを返し、通信はしないように実装する。これを実現するのが、Fetch API。ブラウザの通信を横取りするためにはfetchイベントハンドラを実装するキャッシュを実装すればA2HSが有効になる！

Slide 15

Slide 15 text

Copyright (C) 2019 ActIndi, Inc. All Rights Reserved. キャッシュを自前で実装するのはなかなか大変 ServiceWorkerを自前で実装するのは面倒。しかもキャッシュを実装するのは結構難しい ● すでにキャッシュされている場合とされていない場合 ● キャッシュとサーバからの取得どっちを優先するか ● 古くなったキャッシュの更新 ● etc 実装するからにはちゃんとしたい(ちょっとでも速くなったら嬉しい) でも、キャッシュするということ自体がモチベーションではない楽したい

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Copyright (C) 2019 ActIndi, Inc. All Rights Reserved. いこレポのソフトウェアスタックしっかりRails Wayに乗っかったRailsアプリケーション ● Ruby 2.6.3 ● Rails 5.2.3 ○ webpacker 4.0.7 ■ Webpack 4.32.2 ■ Babel 7.5.5 ■ workbox-webpack-plugin 4.3.1 ■ Vue.js 2.6.10

Slide 19

Slide 19 text

Copyright (C) 2019 ActIndi, Inc. All Rights Reserved. いこレポのJavascript・CSS事情 Webpackerを導入しているが、 Assets Pipelineも使っているというか、Assets Pipelineがメイン Assets Pipeline ● ユーザ向けページで使うJS、CSS等のみ扱う Webpacker ● <管理画面用Dir>/ 管理画面で使うJS、CSS ● front/ ユーザ向けページで使うJS,CSS Assets Pipelineでビルドされるファイルユーザ向けページで使われるもののみ WebPackerでビルドされるファイルユーザ向けページで使うものと管理画面で使うものがある

Slide 20

Slide 20 text

Copyright (C) 2019 ActIndi, Inc. All Rights Reserved. キャッシュの方針 ①静的なアセットは基本プリキャッシュ ● assets/**/* ● javascript/packs/front/**/* ②ただし、PC向けアセット、管理画面用アセットはキャッシュしたくない ● assets/**/pc/**/* ● javascript/packs/<管理画面用>/**/* ③記事で使われている画像はランタイムキャッシュでキャッシュしたいキャッシュしたいキャッシュしたくない

Slide 21

Slide 21 text

Copyright (C) 2019 ActIndi, Inc. All Rights Reserved. workbox-webpack-pluginの動作 ● WebPackのプラグインとして設定する ● ビルドするとServiceWorkerを実装したJSを生成する ● プリキャッシュ ○ WebPackでビルドした出力はデフォルトでキャッシュする ■ キャッシュ対象は precache-manifest.****.js に記載される ○ 設定すればWebPack無関係なファイルもキャッシュできる ■ キャッシュ対象は sw.jsに記載される ● ランタイムキャッシュ ○ パターンを設定すればキャッシュされるようになる

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Copyright (C) 2019 ActIndi, Inc. All Rights Reserved. Workboxの設定① 1. Webpackでビルドするファイルでプリキャッシュしたくないものがある関連する設定項目一部をキャッシュから除外したいので exclude が使えそう設定項目説明 include 正規表現のリストを設定する。マッチしたファイルをプリキャッシュに含める例）include: [/\.html$/, /\.js$/] exclude 正規表現のリストを設定する。マッチしたファイルをプリキャッシュから除外する例）exclude: [/\.jpg$/, /\.png$/]

Slide 24

Slide 24 text

Copyright (C) 2019 ActIndi, Inc. All Rights Reserved. Workboxの設定② 2. Webpackに無関係なファイルでプリキャッシュしたいものがある関連する設定項目設定項目説明 globDirectory workbox無関係だけどプリキャッシュしたいファイルのベースディレクトリを指定する例）globDirectory: '.' globPatterns globDirectoryの中でプリキャッシュするファイルのパターンを指定する例）globPatterns: ['dist/*.{js,png,html,css}'] globIgnores プリキャッシュから除外したいファイルのパターンを指定する例）globIgnores: ['**/ignored.html'] modifyUrlPrefix Webpack無関係なプリキャッシュファイルのURLを書き換える CDNのURLに変更する等に利用する例）modifyURLPrefix: { '/dist': '' }

Slide 25

Slide 25 text

Copyright (C) 2019 ActIndi, Inc. All Rights Reserved. Workboxの設定③ 3. ランタイムキャッシュも使いたい関連する設定項目設定項目説明 runtimeCaching 下記の設定を含むオブジェクトのリスト urlPattern キャッシュするURLパターンを正規表現やglobパターンで指定する handler 'NetworkFirst'や'CacheFirsdt'などのキャッシュ戦略を指定する options 有効期限やキャッシュするファイル数、などを設定する

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Copyright (C) 2019 ActIndi, Inc. All Rights Reserved. Workboxの設定設定のポイント 1. modifyUrlPrefix でCDNからプリキャッシュファイルを取るように設定 2. exclude で管理画面用のファイルをプリキャッシュから除外 3. Webpack無関係ファイルのプリキャッシュ 4. ランタイムキャッシュも設定 1 2 3 4

Slide 29

Slide 29 text

Copyright (C) 2019 ActIndi, Inc. All Rights Reserved. Workboxの設定 1. modifyUrlPrefix でCDNからプリキャッシュファイルを取るように設定環境変数 AWS_S3_HOST_ALIASが定義されていれば、そのホストから取得するように設定ただし、この設定の影響範囲はWebpack無関係なファイルのみ Webpackで生成されるファイルには適用されない（対処方法は後述）

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Copyright (C) 2019 ActIndi, Inc. All Rights Reserved. Rails＋Webpackerでのビルド ● rake webpacker:compile で webpak build が実行される ● 実際には rake assets:precompile を実行するだけ。 ○ assets/ 以下のファイルのビルドのあと webpacker:compile も実行される

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Copyright (C) 2019 ActIndi, Inc. All Rights Reserved. 条件は満した ✅ すでにインストールされていないこと ✅ prefer_related_applications: false であること ✅ マニフェストに次の含むこと ○ short_name または name ○ 192px と 512px のicons ○ start_url ○ display が fullscreen, standalone, minimal-uiのいずれか ✅ HTTPS ✅ ServiceWorker が登録されていること ✅ ServiceWorkerでfetchイベントハンドラを実装していること

Slide 39

Slide 39 text

Slide 40

Slide 40 text

Slide 41

Slide 41 text

Slide 42

Slide 42 text

Slide 43

Slide 43 text

Slide 44

Slide 44 text

Copyright (C) 2019 ActIndi, Inc. All Rights Reserved. 問題点:キャンセルできない ● キャンセルしてもキャンセルしても beforeinstallpromptイベントが発火する → ポップアップ表示がアクセスのたびに表示 ● ホームアイコンを追加すればもう表示されない → その前にユーザを怒らせてしまう Cookieを使って一定期間表示しないようにした

Slide 45

Slide 45 text

Slide 46

Slide 46 text

Slide 47

Slide 47 text

Slide 48

Slide 48 text

Slide 49

Slide 49 text

Slide 50

Slide 50 text

Slide 51

Slide 51 text

Slide 52

Slide 52 text

Slide 53

Slide 53 text

Copyright (C) 2019 ActIndi, Inc. All Rights Reserved. まとめ ● WorkboxによってServiceWorkerのキャッシュは比較的容易に実装できる ● Webpackを利用しているのなら webpack plugin を利用すると楽 ● Webpackで出力しないファイルや CDNから配信するファイルのキャッシュも可能 ● ホームアイコンを作ってもらうのはなかなか険しい

Slide 54

Slide 54 text

Slide 55

Slide 55 text

Copyright (C) 2019 ActIndi, Inc. All Rights Reserved. 参考 ● Workbox https://developers.google.com/web/tools/workbox/ ● Workbox webpack Plugins https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#configuration ● Add to Home Screen https://developers.google.com/web/fundamentals/app-install-banners/ ● The mini-info bar https://developers.google.com/web/fundamentals/app-install-banners/#mini-info-bar ● What is an opaque response? https://blog.fullstacktraining.com/what-is-an-opaque-response/

Slide 56

Slide 56 text

Copyright (C) 2019 ActIndi, Inc. All Rights Reserved. 本日の発表の元になったブログエントリ ● workbox を導入してServiceWorkerによるキャッシュを実装した話 https://tech.actindi.net/2018/10/05/083913 ● Workboxのプリキャッシュの設定でハマった https://tech.actindi.net/2019/08/02/090212