そもそも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
# 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のライフサイクル
サンプルプロダクトとドキュメント
- serviceworker-rails-sandbox
- awesome-progressive-web-apps
- https://jakearchibald.com/2014/offline-cookbook/
所感
ドキュメントも探せばいろいろ出てくるのでそこまでトラブルはなさそうな肌感。
あまりトラップっぽいところはなさそう。
1回サンプルプロダクトを年末年始で書いて検討する価値はありそうかと！