そもそもPWAとは

Progressive Web Apps
ウェブとアプリの両方の利点を兼ね備えたアプリです。
モバイル寄りのためコンバージョンやアクティブユーザのKPIの向上にも役立つかと。

これがすごいぞPWA

ウェブなのに全てのページがオフラインで動作するためフライトモードでも動作する。
プッシュ通知が飛ぶ
ブラウザの機能を使用できるため非ログインユーザ以外のユーザアクションを計測可能
インストールが不要のためインストールの際の離脱が減る。

PWAを実現するための要件

レスポンシブデザイン
Service Workers
Web App Manifest
HTTPS通信であること
Web App Manifest ホーム画面に追加できるため1タップでサービスへきてくれる！

必要な要件

モバイルフレンドリーなデザインであること(タブレットと携帯端末がメインのため)
Service Workersが導入されていることオフラインで動作させるために必須

対応ブラウザと必要なツール群

この記事参照
やばい、iOSにネイティブアプリ要らなくなるかも。SafariもPWAに対応する可能性

SEO大丈夫？

よく見かける質問で
1ページしかインデックスされていないのは）PWA のせいかな？
というポストがあるが、サイト構造の問題らしい。

URLを動的に書き換えればSEO的にも問題はない

オフラインで遷移するため、URLが自動で書き換えられないためこの現象が発生する
Googleが作ってるだけあってSEOは大丈夫な模様。(断言はできないが)
SEO対策はこちらの記事参照

Railsアプリケーションに導入

HTTPSの準備

# config/environments/production.rb

Rails.application.configure do
  # ...

  # Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies.
  config.force_ssl = true

  # ...
end

Service Workerの導入

# Gemfile

gem "serviceworker-rails"

初期化

$ bundle install
$ rails g serviceworker:install

自動で生成されるファイルはこれ

config/initializers/serviceworker.rb - Railsアプリケーションのためのconfigファイル
app/assets/javascripts/serviceworker.js.erb - ServiceWorkerのサンプルとメインファイル？
app/assets/javascripts/serviceworker-companion.js - ServiceWorkerをブラウザに登録するためのファイル
app/assets/javascripts/manifest.json.erb - Readme的な公開する設定情報
public/offline.html - オフラインのスタートページ

ServiceWorkerのライフサイクル

サンプルプロダクトとドキュメント

所感

ドキュメントも探せばいろいろ出てくるのでそこまでトラブルはなさそうな肌感。
あまりトラップっぽいところはなさそう。
1回サンプルプロダクトを年末年始で書いて検討する価値はありそうかと！

おにぎり万太郎のブログ

RailsアプリケーションをPWA化する目論見