[Rails] Lighthouseで PWAスコア100点をとるためにやったこと

9961 ワード
Lighthouse PWA Rails Rails テキストリンク

目的

Google Lighthouse PWAスコアで100点とる

やったこと

  • 対応前の把握 → PWA 56点
  • 対応
  • 対応後のチェック → PWA 100点

(宣伝） PWA対応したサイトの紹介

  • dokode

    • 個人で作成している研究者向けイベント紹介サイトです！

  • アプリ環境

    • Rails 5.2
    • Bootstrap 4
    • Heroku (Hobby plan)
    • Postgresql 10.0

このアプリをPWA対応してゆきます

対応前の把握

  • Google Lighthouseでチェックします
  • Progressive Web App は 56/100点 です。

対応

  • Google Lighthouseからの指摘
    1. Does not respond with a 200 when offline.
    2. User will not be prompted to install the Web App.
    3. Does not redirect HTTP traffic to HTTPS
    4. Does not register a service worker
    5. Is not configured for a custom splash screen.
  • 対応方針
    • 1, 4 → (1) Serviceworkerを導入し、offline時キャッシュされたオフライン画面を表示させて対応
    • 2, 5 → (2) manifest.jsonを適切に導入して対応
    • 3 → (3) HTTPS対応

(1)-1 Serviceworkerを導入 !

RailsでServiceworker簡単に導入するために、gem serviceworker-railsを使いました。

gemをインスト-ル

下記をGemfileに追加して bundle install を実行します。

gem 'serviceworker-rails'

rails generate

下記のrails generateコマンドを実行します。

rails g serviceworker:install

generateされたファイルの説明

ファイルが4つ作成されます。

  • app/assets/javascripts/serviceworker.js.erb - Serviceworkerのキャッシュの設定
  • app/assets/javascripts/serviceworker-companion.js - Serviceworker読み込むためのファイル
  • public/offline.html - serviceworker.js.erbを通してブラウザにキャッシュされて、ネットワークオフライン時表示されるhtml。
  • app/assets/javascripts/manifest.json.erb - web app manifest

作成されたファイルの編集

  • キャッシュされたoffline pageの設定はすでにされています。

servicewoker 完了 !

(1)-2 Serviceworkerが動いているか確認

  • Chromer Dev toolで offlineにして、リロードしてください。
  • offline.htmlが表示されていれば、Serviceworkerが無事導入されています！

(2)-1 manifest.jsonを導入

次にmanifest.jsonを導入します。
既に、serviceworker-railsを導入したときインストールされた。manifestファイルを適切に使うだけです。

　app/assets/javascripts/manifest.json.erb を編集します。

app/assets/javascripts/manifest.json.erb
<% icon_sizes = Rails.configuration.serviceworker.icon_sizes %>
{
  "name": "Dokode App", # アプリ名
  "short_name": "Dokode", # 短い名前 12文字以内
  "start_url": "/",
  "icons": [
  <% icon_sizes.map { |s| "#{s}x#{s}" }.each.with_index do |dim, i| %>
    {
      "src": "<%= asset_path "serviceworker-rails/icon-#{dim}.png" %>", # アイコンファイル作成して保存する（後述）
      "sizes": "<%= dim %>",
      "type": "image/png"
    }<%= i == (icon_sizes.length - 1) ? '' : ',' %>
  <% end %>
  ],
  "theme_color": "#ffffff",
  "background_color": "#FFFFFF", # スプラッシュスクリーンの背景色
  "display": "fullscreen",
  "orientation": "portrait"
}

アイコンファイル用意

serviceworker-railsは icon sizeは %w[36 48 60 72 76 96 120 152 180 192 512] と定義されています 。
これらすべてのサイズのファイルを用意して、 app/assets/images/serviceworker-rails にコピーします。

  • （参考までにですが、アイコンは App Icon Resizer を使って作成しまいました。）
  • assets/images/serviceworker-rails配下に配置しました。

manifest.json 完了!

(2)-2 manifest.jsonが動いているか確認

  • Androidでlocalhost.jsonにアクセスして ホーム画面に追加して、アイコンが表示去ればOK

(3) HTTPS 対応

下記3点おこないました

  • Server
    • Herokuのhobby planはHTTPS対応なのでserverの対応は不要
  • HTTPからHTTPSへのリダイレクトの設定
config/environments/production.rb
  # Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies.
  config.force_ssl = true # これを追加

HTTPS対応完了 !

対応後チェック

Lighthouse PWAスコア 100点 !

chromeでもPWAと見なされてアプリのインストールも促される ！


まとめ

  • PWAの対応するならまずLighthouseでチェック！
  • Railsで PWA check listのservice worker項目に対応するだけならserviceworker-railsで楽ちん
  • PWA対応すれば、chromeで「にゅっと」でて、アプリっぽくなります！

参考