Edited at

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

More than 1 year has passed since last update.


そもそも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回サンプルプロダクトを年末年始で書いて検討する価値はありそうかと!