PWA(ServiceWorker)で「ホーム画面に追加」を実装する方法！

2019.06.182020.04.26

先日の記事でNetaGearやDuelLinks.netでも「ホーム画面に追加」を実装して、WEBサイトをアプリのようにスマホのホーム画面に簡単に追加可能な「ホーム画面に追加」ボタンを実装しましたという記事を書きました。そこで今回は実際にPWA(ServiceWorker)で「ホーム画面に追加」を実装する方法について紹介したいと思います。

「ホーム画面に追加」ボタンの表示は一定期間内に2回以上サイトにアクセスすると自動的に表示されるものです。PWAで「ホーム画面に追加」の追加自体は比較的簡単にできるのでおすすめです。

PWAとは！？

PWA（Progressive Web Apps）とはWEBサイトを一般的なモバイルアプリのように使えるようにする仕組みのことを指します。PWA自体はHTTPSでレスポンシブデザインのWEBサイトに、ServiceWorkerなどを使ってオフライン機能やプッシュ通知などの機能を追加してネイティブアプリのように扱えるようにしているものです。

PWAを使うメリットとしてはWEBサイトをアプリのように端末にインストールが可能であり、キャッシュの設定を行うことでオフラインでも扱うことができます。また、アドレスバーの非表示やフルスクリーン化もできるほか、プッシュ通知など一般的なアプリと同様の処理を行うことができるようになります。

用意するもの

httpsのサイト
アイコン(512x512)
ServiceWorker.js
manifest.json

用意するものは以上の4つです。PWAを実装するには、まずhttpsのサイトである必要があります。もしまだhttpsでない場合には先にSSLの証明書を取得しましょう。次にスマホのホーム画面に追加するためにアイコンが必要になります。ServiceWorker.js、manifest.jsonは手順を進めながら作っていきたいと思います。

PWAで「ホーム画面に追加」を実装する方法！

Web App Manifest Generatorにアクセスします。このサイトでは512x512のアイコンをアップロードすると、様々なデバイス向けに色々なサイズのアイコンに変換してくれます。それ以外にも簡単にmanifest.jsonを作成することができます。

Web App Manifest Generator https://app-manifest.firebaseapp.com/

manifest.jsonの内容を入力していきます。

App Name

アプリ名です。起動時に表示されます。

Short Name

ホーム画面に追加されるアプリの下に表示されるアプリ名です。

Theme Color

テーマカラーです。ツールバーの色

Background Color

バックグラウンドカラーです。起動時のバックグラウンドカラーの色です。

Display Mode

ディスプレイモードです。Browser、Standalone、Minimal UI、Fullscreenから選択します。Browserは通常と同じブラウザ表示、Minimal UIはアドレスバーでURLの変更ができない状態、Standaloneはアドレスバーがなし、Fullscreenはアドレスバーおよび上部ツールバーと下部の戻るボタンなども一切表示されません。

Orientation

画面の向きを設定できます。landscapeは横向き、portraitは縦向き、Anyはどちらもとなります。

Application Scope

アプリケーションの場所を指定します。通常は"/"で大丈夫です。

Start URL

スタートURLです。起動時に表示されるURLなので、サイトのURLを入力すればOKです。

「ICON」を押して、アイコンファイルをアップロードします。アイコンは512x512サイズでアップロードすると様々なデバイス用のアイコンにリサイズしてくれます。最後に「GENERATE.ZIP」を押すとZIPファイルがダウンロードされます。

serviceWorker.jsを作ります。中身は以下の通りです。「ホームに追加」を表示させたいだけならこれだけでOKです。

self.addEventListener('fetch', function(event) {

});

先ほどダウンロードしたzipファイル内にあるアイコンファイルのimagesフォルダとmanifest.json、そして先程作ったserviceWorker.jsをサーバーにアップロードします。serviceWorker.jsはWEBサイトの同一ドメインのアプリのルート直下に置く必要があります。アイコンとmanifest.jsonは外部サーバーでも大丈夫ですが、serviceWorker.jsだけは仕様による制約で別ドメインのサーバーに置くということができないため注意してください。下記コードをhtmlのhead内に加えます。

<link rel="manifest" href="./manifest.json" />
    <script>
        window.addEventListener('load', function () {
            if ('serviceWorker' in navigator) {
                navigator.serviceWorker.register("./serviceWorker.js")
                    .then(function (registration) {
                        console.log("serviceWorker registed.");
                    }).catch(function (error) {
                        console.warn("serviceWorker error.", error);
                    });
            }
        });
    </script>
    <link rel="apple-touch-icon" sizes="180x180" href="./images/icon-192x192.png"&g

metaタグでスマホのアドレスバーの色を変更する方法！

Theme Color

スマホのアドレスバーの色を変更するには以下のmetaタグをhtmlのhead内に入れてあげると変更できます。contentで色を指定してあげてください。この方法はChrome/Firefox/Operaなどのブラウザがサポートしているようです。

<meta name="theme-color" content="#F90">

PWAの「ホーム画面に追加」の表示について

実装が完了してから、一定期間内に2回以上アクセスがあると上記画像のように、下から「ホーム画面にNetaGearを追加」といったダイアログが表示されるようになります。これをクリックすると右側のようにスマホアプリのようにアイコンが追加されます。先日公開したDuelLinks.net、NetaGear、ShopDDのアイコンが表示されています。

表示についてはStandaloneを選択しており、アドレスバーが表示されないようになっているため非常にすっきりとした表示になっています。Standaloneが見やすくて気に入っています。

FC2ブログで「ホーム画面に追加」を表示できるのか？

このブログ(shopdd.jp)は独自ドメインを取得していますが、中身はFC2ブログを使用しています。FC2ブログで「ホーム画面に追加」をやりたいと思ったのですが、serviceWorker.jsはドメイン直下に置く必要があり、現状のFC2ブログではその位置にserviceWorker.jsを術がないため「ホーム画面に追加」の表示は実装できません。FC2ブログユーザーがServiceWorkerを使えるように運営にたくさんリクエストを送ればそのうち実装されるかもしれませんが、現在では望みは薄そうです。とりあえず望みは薄そうではありますが、行動しないよりはマシということでFC2に実装してくれるようにリクエストを送ってみました。FC2ブログユーザーのみなさんはよろしければ賛成票を入れていただけると幸いです。

Service Workerを使えるようにして欲しい - FC2リクエスト
https://request.fc2.com/ja/request/9803

ちなみに以前話題になっていたFC2の爆速テンプレートにはServiceWorkerが実装されているので、可能性がないわけではなさそうです。現にURLの後ろにservice-worker.jsをつけたアドレスにアクセスすると、service-worker.js自体はすでに存在しているので、これがユーザー向けに編集が可能になれば実現は可能です。

http://shopdd.jp/service-worker.js

爆速テンプレートで使われているservice-worker.jsは、head内に下記コードを加えればFC2ブログでも動かすことはできます。動かしたところで中身がほぼないですし、自分で編集できないので特に意味はないのですけどね・・・。

<script type="text/javascript">
    window.addEventListener('load', function () {
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register("./service-worker.js")
                .then(function (registration) {
                    console.log("serviceWorker registed.");
                }).catch(function (error) {
                    console.warn("serviceWorker error.", error);
                });
        }
    });
</script>

とりあえず「ホーム画面に追加」画面は出なくてもいいから、ホームに追加した時のアイコンなどを設定したいのであればテンプレートに先程上の手順で作成したアイコンとアイコンのURLを変更したmanifest.jsonをアップロードすれば、ダイアログは出ませんが、手動でChromeの「ホーム画面に追加」を押せばアプリのようなアイコンだけは表示させることが可能です。様々なデバイス向けのFaviconを作りたい場合は以下の記事を参照してください。

様々なデバイスに対応したFaviconに一括変換してくれる「Real Favicon Generator」が便利！

今回の個人的感想＆まとめ

今回紹介したのはServiceWorkerで「ホーム画面に追加」ボタンを表示する方法でした。簡単に作れるのでおすすめですね。ホームに追加すること自体はChromeのメニューからもできますが、意外に知らない人も多いので、こういう風に表示してあげることで少しでも見てくれる人が増えるといいのですけどね。ホームに追加するとアクセスが簡単になるのがいいですね。よく見るサイトはホーム画面に追加しておくと便利です。

PWAは画期的ですし、非常に便利な機能ではあるのですが、私の使っているFC2ブログでは残念ながらservice-worker.jsを編集できないのが残念ですね。これが編集できるようになれば色々とできることが増えてありがたいのですけど・・・。こういう新しい機能を使いたい場合はどうしてもFC2ブログなどのプラットフォームを使用していると難しい点も多いです。やはりサーバーを借りてWordPressなどに移行したほうが自分で色々できて便利なのですが、13年もFC2ブログを使っている身としては、移行はあまりしたくないという気持ちもあるんですよね。なんとか実装してくれないかなー。

サイトを持っている人はぜひ試してみてはいかがでしょうか？