こんにちは。このシリーズは、PWAでtodoアプリっぽいものを作った備忘録のようなものです。人によって役に立つ部分とそうでない部分があると思いますので、見繕って読んでいただければ幸いです。

ちなみに、作ったアプリは以下です。ぜひお試しを。

今までの記事はこちらを

さて、今回はwebサイトがPWAとなるために必要な

・serviceWorker.js
・manifest.json

という2つのファイルの設定について書いていきます。

内容は

・webサイトをとりあえずPWAにするのは、特に難しい作業ではない

というような話です。

対象読者はこちら

・どうすればサイトをPWAにするのか知らない
・manifest.jsonの設定方法を知らない
・serviceWorkerの設定方法を知らない

環境はシリーズの記事②で設定したとおり、

create-react-appで作ったreactのプロジェクトをfirebaseでhostingする

という前提です。

とりあえずこれでPWA

webサイトをPWAにするにはいくつか条件があります。

・HTTPSで配信されていること
firebaseを利用するため、考えなくてOK。localhost環境は例外なのでOKです。

・レスポンシブ対応をすること
スマホアプリを念頭につくるので、これもOK。

・オフラインでも読み込みができること
serviceWorkerを設定することによって可能になります。

・ホーム画面に追加するためののデータがあること
manifest.jsonのことです。

・3G環境でも高速なアクセスができること
あんまり気にしなくてもよさそう。少なくとも今回はちょっとしたアプリなので尚更。

・クロスブラウザで動作すること
とりあえず今回はsafari、chromeで動けばヨシって感じでOKにします。

・ネットワークに依存しないページ遷移をすること
SPA実装でクリアできる（らしい）。とりあえず今回はReactを使うし、ページ遷移をしないので考えなくてOK。

・すべてのページにURLが存在する
ちょっと何言ってるかわからない。どういう状況？とりあえず今回は考えなくてOK。かな。

要は、単純なアプリを作るなら

serviceWorkerとmanifestをきちんと設定すればOK

な感じ。

なので、この2つをやっつけていきましょう。

：参考サイト

serviceWorkerを設定する

とは言ったものの、create-react-appの場合はすでに用意されています。

ただ、初期設定では無効になっているので、ちょっといじってあげる必要があります。

srcディレクトリの中のindex.jsを開いてください。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

となっていると思います。

英語でコメントしてある通り

ここの最終行のunregisterをregisterにしてください。unを消すだけです。

serviceWorker.register();

OK。おしまいです。create-react-app万歳。

このあと、serviceWorker.jsをいじることによってアプリのアップデートを検知させて自動更新なんてこともやりますが、今はまだ大丈夫です。それはまた後日書きたいと思います。serviceWorkerで一体なにをやっているかなどなど解説できれば。

workboxというライブラリを入れて、キャッシュの仕方を設定できたりしますが、今はまだ大丈夫です。というか、僕の作ったアプリには必要なかったです。ただ、create-react-appのプロジェクトにworkboxを入れるのは、日本語のドキュメントがなくて結構詰まりどころだったので、後日書きたいと思います。

manifest.jsonを設定する

これも複雑に思えるかもしれませんが、大したことはありません。

必要な情報を一問一答で記入していくだけです。

次のサイトを使ってmanifest.jsonを作ってしまいましょう。

まあ大したことはありません。各要素を解説しますので、好きなように記入してください。

・App Name
アプリの名前です。どこに表示されるかは…忘れました。でもちゃんと書きましょう。45 文字以内。

・Short Name
ホーム画面に追加したときに出る名前です。日本語でもOK。12 文字以内。

・Theme Color
アプリの上部（時間とか表示されるところ）とかの色になる。はず。iPhoneだと黒いけど、最近PCのchromeだとメニューバーがこの色になるようになった。ちゃんと設定しましょう。

・Background Color
アプリのバックグラウンドカラー。スプラッシュ画面（アプリを起動した時の表示）での背景になる。はず。

・Display Mode
アプリっぽい表示をつくるにはこれが大事。とりあえずアプリっぽくするには"standalone"を選びましょう。どう変わるかというと、ブラウザのURL表示や、その他のボタンなどの表示がなくなり、ネイティブアプリっぽくなります。

・Orientation
これは、画面の向きを指定するときに使うようです。例えば、ゲームアプリで横方向指定したい場合は"landscape"にするとできる。はず。今回の場合は特に気にしないので"any"で結構です。

・Application Scope
アプリURLの範囲を設定します。このここで指定したディレクトリの外に遷移すると、通常のwebページになります。今回は"/"のままでOK。

・Start URL
アプリがホーム画面に追加されたあと、最初に表示されるページを指定します。今回は"/"でOK。

記入すると、右側にmanifest.jsonの中身ができているので、copyしてプロジェクトのpublic/manifest.jsonと置き換えます。

それに、"description"要素も加えておきます。アプリの説明で、最大132文字。日本語OKです。

現時点で、manifest.jsonはこんな感じになると思います。

{
  "name": "demoForNote",
  "short_name": "DFNote",
  "description": "note用に作ったデモページです。",
  "theme_color": "#276da4",
  "background_color": "#ffffff",
  "display": "standalone",
  "scope": "/",
  "start_url": "/"
}

あとはiconの設定です。

512px四方のアイコン用の画像を用意します。

用意するのが面倒なら以下を使って試してみてください。

またさっきのサイトを使います。

Generate IconsのところのICONボタンをクリックして、画像をアップロードしてください。

アップできたら、GENERATE.ZIPボタンでアイコン用にリサイズされた画像をダウンロードします。

ダウンロードしたiconsフォルダを、publicの中に移動させます。

画像の準備ができたので、manifest.jsonに指定を付け加えます。

そしたらこんな感じに。

{
  "name": "demoForNote",
  "short_name": "DFNote",
  "description": "note用に作ったデモページです。",
  "theme_color": "#276da4",
  "background_color": "#ffffff",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "/icons/icon-72x72.png",
      "type": "image/png",
      "sizes": "72x72"
    },
    {
      "src": "/icons/icon-96x96.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "/icons/icon-128x128.png",
      "type": "image/png",
      "sizes": "128x128"
    },
    {
      "src": "/icons/icon-144x144.png",
      "type": "image/png",
      "sizes": "144x144"
    },
    {
      "src": "/icons/icon-152x152.png",
      "type": "image/png",
      "sizes": "152x152"
    },
    {
      "src": "/icons/icon-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/icons/icon-384x384.png",
      "type": "image/png",
      "sizes": "384x384"
    },
    {
      "src": "/icons/icon-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

これでOK。なはず。

：参考サイト

安心するにはちょっと早い

アイコンを設定しました。android機なら問題なくこのアイコンが設定されますが、iPhoneはこれで十分ではありません。別にアイコンを設定する必要があります。

public/index.htmlの<head>の中に一行足します。

<link rel="apple-touch-icon" href="%PUBLIC_URL%/icons/icon-192x192.png" sizes="192x192"/>

もちろんそれ用に画像を作って指定してもOKです。

manifest.jsonに関する注意

manifest.jsonに関してなんですが、ひとつ肝に命じておかなければならないことが。

実はこのファイルは、ユーザーがホームスクリーンに追加した後は上書きができません。

もちろん、web上にあるものは更新していけるのですが、ホームスクリーンに追加した時点で、そのアプリでは固定です。

なので、本番リリース前には必ず仕様を固めるようにしましょう。開発中はいろいろ試して全然OKです。

ちゃんとできてるか確かめよう

設定が済んだので、うまくいっているか確かめましょう。

まずは、localhostで。

$npm run start をしてlocalhostを起動して、chromeのdev toolを開きます。

applicationのタブを選択します。

こんなかんじ。

うまくいっていれば、設定したものが反映されて、Add to homescreenと表示されるはず。

実機でも確かめてみます。

$ npm run build して、$ firebase deploy します。

アプリのURLにアクセスして、ホーム画面に追加します。

こんな感じで指定通りになってたらオールOK。webサイトが晴れてPWAとなりました。うぇい。

まとめ

create-react-appを使えば、serviceWorkerの設定は2文字消すだけだし、manifest.jsonは一問一答に好きなように答えていくだけで、特段難しいことはなく、とりあえずPWAにできました。

あとでserviceWorkerに付け加えたりしますけど、とりあえずなのでOKです。

おつかれさまでした。

これだけ覚えて帰ってください

・PWA対応するのはべつに難しくない。
・create-react-appなら、serviceWorkerは2文字消すだけ。
・manifest.jsonは一問一答に好きに答えるだけ。
・manifest.json作成に便利なジェネレーターがある。
・manifest.jsonの内容はリリース前にしっかり固める。
・iPhoneのために、アイコンはhtmlの<head>内で指定しないといけない。

多いけど、内容はそんな大したこと言っていないですね。

参考文献

PWAに関しての概要もろもろが書かれている書籍です。大変お世話になりました。皆さんもお手元にいかがか。

ではまた次回。

わからないことや、ご指摘などありましたらこちらにお願いします。