目的
Google Lighthouse PWAスコアで100点とる
やったこと
- 対応前の把握 → PWA 56点
- 対応
- 対応後のチェック → PWA 100点
(宣伝） PWA対応したサイトの紹介
-
- 個人で作成している研究者向けイベント紹介サイトです！
-
アプリ環境
- Rails 5.2
- Bootstrap 4
- Heroku (Hobby plan)
- Postgresql 10.0
このアプリをPWA対応してゆきます
対応前の把握
- Google Lighthouseでチェックします
- Progressive Web App は 56/100点 です。
対応
-
Google Lighthouseからの指摘
- Does not respond with a 200 when offline.
- User will not be prompted to install the Web App.
- Does not redirect HTTP traffic to HTTPS
- Does not register a service worker
- 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ページのスクリーンショットをとる ）
- サムネイルの作成を wordpressの API
HTTPS対応完了 !
対応後チェック
Lighthouse PWAスコア 100点 !
chromeでもPWAと見なされてアプリのインストールも促される ！
まとめ
- PWAの対応するならまずLighthouseでチェック！
- Railsで PWA check listのservice worker項目に対応するだけならserviceworker-railsで楽ちん
- PWA対応すれば、chromeで「にゅっと」でて、アプリっぽくなります！