目的

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 # これを追加

httpを使っているリソースをhttpsへ変更する
- サムネイルの作成を wordpressの API http://s.wordpress.com/mshots/v1 を使って動的に行っていた。これを、事前にサムネイルを作成してS3に保存してhttpsで取得するように変更（関連拙記事. Herokuのrailsアプリでheadless chromeを使ってwebページのスクリーンショットをとる）

HTTPS対応完了 !

対応後チェック

Lighthouse PWAスコア 100点 !

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

まとめ

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

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

目的