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

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

More than 1 year has passed since last update.

目的

Google Lighthouse PWAスコアで100点とる

やったこと

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

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

  • dokode

    • 個人で作成している研究者向けイベント紹介サイトです!
    • image.png
  • アプリ環境

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

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


対応前の把握 :cry:

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

対応 :muscle:

  • 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が無事導入されています!

image.png


(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 を使って作成しまいました:wink:。) image.png
  • assets/images/serviceworker-rails配下に配置しました。 image.png

manifest.json 完了!


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

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

image.png


(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対応完了 !


対応後チェック :relaxed:


Lighthouse PWAスコア 100点 !

image.png


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

image.gif
Screenshot_20180807-091907_Photos.jpg


まとめ

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

参考

junara
10年間医療の研究していたが、Webサービス作りたくて、エンジニアへ。 Rails, Javascritptのエンジニアとして働きながら、生命科学学会検索サービスを作りました。 https://www.dokode.work
bldt
"Your growth, Improve the world" をビジョンに掲げ、自社事業やシステム開発サービスを提供しています
https://bldt.jp
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