PWAでホーム画面に追加するアイコンをランダムにしてみた #Rails

この記事はPWA Advent Calendar 2018の記事です。

実現したいこと

PWAとして、ホーム画面にアイコンを追加する際、自分の好きなアイコンが設定できたり、ランダムにアイコンが設定できるようにしたい。

どんな場面で使う？

先日、よめなう！というサービスをリリースしました。
リリース記事：https://qiita.com/minakawa-daiki/items/add42dfceec54a0583fa

これは、２次元の正妻を記録したり、毎クール変わるアニメの嫁のヒストリを残せるようにしたいというコンセプトのもと作ったサービスなのですが、例えばこういったサービスの時に、正妻に登録した画像をアイコンにしたくないですか？僕はしたいです。

また、同じURLで配信しているサービスで、例えばチーム毎にアイコンを変えたいだとか、ゲームだとしたら自分の作ったキャラクタやチームのアイコンが指定できるだとか、色々な場面で使えそうな気はします。

イメージ

実装してみた

今回は Ruby on Rails で実装してみました。他のフレームワークでも問題なく実装できる範囲だと思います。

リポジトリ: https://github.com/minakawa-daiki/dynamic-icon-app

実行方法

touch .env
docker-compose run --rm web bundle
docker-compose run --rm web rails db:create
docker-compose up

このアプリは、ランダムで２枚のアイコンが切り替わるようになっています。

実装

config/routes.rb

Rails.application.routes.draw do
  root 'home#index'
  get 'manifest.json', to: 'json#manifest'
end

app/controllers/json_controller.rb

class JsonController < ApplicationController
  def manifest
  end
end

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>App</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="manifest" href="/manifest.json">
  </head>

  <body>
    <%= yield %>
  </body>
</html>

app/views/home/index.html

<h1>Dynamic Icon App</h1>

app/views/json/manifest.json.erb

<% index = rand(2) + 1 %>
{
  "name": "DynamicIconApp",
  "short_name": "DIA",
  "start_url": "/",
  "icons": [
    {
      "src": "icon<%=index %>.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#fcd550",
  "background_color": "#ffb919",
  "display": "standalone",
  "orientation": "portrait"
}

特に変わった実装はしていなく、manifest.json.erbを作成することで、動的に manifest.jsonを作成しているのがミソです。

ここの動的生成する部分を、ログインしているユーザのアイコンにしたりなど、様々なやりようはあると思います。
また、アイコン以外の部分も動的に生成できるので、動的に様々なmanifest.jsonが作成可能です。

おわりに

今回の技術を用いて、よめなう！のPWA化を進めていこうと考えています。
また、ネイティブアプリには実現できないような部分がPWAでもできるのが面白さの一つだと思います。
今後のPWAの動きに注目ですね。