morishitaです。
2019/08/21 行われたPWA Night vol.7 ～PWAのミライや活用方法をみんなで考えよう～ で 「いこレポ」でのPWAで事例ということで話してきました。
これまでにこの関係では次のブログエントリを書きました。
tech.actindi.net tech.actindi.net
これらを発表用に再構成した内容ですが、事前に伺っていたYahooさんの発表内容と結構かぶりそうだったので次を軸に話しました。
- RailsアプリケーションにWorkboxでキャッシュを実装した話
- A2HS をカスタマイズした話
資料はこちらになります。
大勢の前で20分も話す機会が久々で緊張しました。後半声が上ずったのが恥ずかしい。
Workboxの設定ファイルについて
発表後、「Workboxの設定はどのファイルにするんですか？」と質問されたのでちょっと補足します。
「決まったファイルはありません」というのが回答です。
いこレポでは Webpacker を使っています。
Webpackerを使う場合、インストール時に生成される
config/webpack/environment.js などに設定を追加していくのが最もシンプルかと思います。
ただ、Workboxの設定はそれなりな行数になると思います。なので設定ファイルの肥大化を避けるために workbox-config.js というファイルを作って、それを production.js で読み込む形にしています。
読み込むコードは発表資料にありますのでそちらを参照ください。
rails-app/config/webpack ├── loaders/ ├── development.js ├── environment.js ├── production.js # <= workbox-config.js を読み込んでいる ├── test.js └── workbox-config.js # <= Workboxの設定
A2HSの表示について
懇親会で、A2HSのミニインフォバーが表示されるサイトが増えてきましたねという話になりました。
そうなると、カスタマイズしたポップアップを表示するよりもデフォルトのものを表示したほうが、ユーザにわかってもらえやすいのではという
話がありました。なるほどなー。
ただ、自動的には表示されなくなるのでは? という話もあるので今度の仕様の動きに注意したいと思います。
また、いこレポにアクセスすると初回からA2HSのポップアップが表示されるのが気になるという指摘もいただきました。
確かに、初訪問で表示されるとちょっと引くかもなと思いました。
2度目以降のサイトアクセスで表示するように近いうちに改めたいと思います。
他のスピーカーの方の発表
他の登壇者の方の発表も面白かったです。
Yahoo! JAPANトップページ（スマートフォン）におけるPWAの取り組み〜ホーム画面追加編〜
神野さんによるYahoo!でのA2HSの取り組みについての発表です。
いこレポではどうせChromeでしかインフォバー出ないし、とPWA AppがiOSでどう動くかはほとんど検証しなかったのですが、きっちりやられていて流石だと思いました。
Chromeでストレージを永続化を実現するには
ノックノートの五嶋さんによる発表です。 ChronmeのCacheStrageとIndexedDBで以下にデータを永続化するかという話。
結局、確実な方法はないとのことでしたが、Chrominumのソースまで追いかけて隠れた仕様を探られている大変興味深い内容でした。
LT
LTは2本。
AngularでPWAでやろーよ
Ishizakaさんの発表。
AngularJSの頃しか触ったことがないのですが、今のAnglarは全く別物とのこと。
フルスタックで公式モジュールがいろいろ揃っているのが便利そうです。
こんどちょっと遊んでみよう。
簡単には届かなかったweb push
Ideさんの発表。
やってみたいなーと常々思っているのですが、結構大変そうです。
簡単には届かなかったweb push/web-push-is-difficult#pwanight - Speaker Deck
発表してみて
久々にこういう場所で発表する機会を得ていい刺激になりましたし、楽しかったです。
PWA Nightの運営の方々、お疲れさまでした＆ありがとうございました。
最後に
アクトインディではエンジニアを募集しています。 actindi.net
