この記事は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
このアプリは、ランダムで２枚のアイコンが切り替わるようになっています。
実装
Rails.application.routes.draw do
root 'home#index'
get 'manifest.json', to: 'json#manifest'
end
class JsonController < ApplicationController
def manifest
end
end
<!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>
<h1>Dynamic Icon App</h1>
<% 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の動きに注目ですね。