Help us understand the problem. What is going on with this article?

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした