釣りとキャンプとコーヒーが好きなサラリーマンの趣味サイト。釣り場やキャンプ場とかの見てきたことや、Webの仕事で困ったことを記録していきます。

WordPressでホームアイコンの追加(PWA)機能を実装してみた!


PWA?ホームアイコンの追加?

最近Safariが対応することになったPWA(Progressive Wev Apps)。
そもそもなに?って話ですが、一言で言ってしまうと、Webでアプリのようにエンゲージメントの高い体験を提供しようというGoogleが取り組んでいる概念です。
アプリでできて、Webではできなかった、例えば以下のような機能をWebで提供しようというものです。

  1. スマホの画面にホームアイコンを追加
  2. PUSH通知の送信
  3. オフラインでの利用/li>


上記の中でも、①のホームアイコンを追加する機能は、初心者の人でも簡単に自分のWebサイト上で実装することができます。
自分のスマホ端末に、自分のWebサイトにアクセスするアイコンが設置できて、しかもブラウザで開くよりも早く動作して、ブラウザのようにURLが表示がなくアプリっぽく動作してくれたらかっこよくないですか?
<追記>
PWAの機能をプラグインで簡単に実装できるようになりました。

「PWA for WordPress」というプラグインでWordPressをPWA化してみた
このページで書いてあることを知らなくてもかなり楽に実装できます・・・

自分でがんばって実装すると、サイトに訪問したユーザーがホームアイコンを追加<したかどうかをGAで把握する実装もだいぶハードルが下がります。やり方はこちらの記事にまとめています。
⇒PWAでホームアイコンが追加されたかをGA/GTMで計測する!

HTTPS対応(さくらサーバのhttps化)

①さくらのレンタルサーバ 簡単SSL化プラグインとWPの検索窓に入力してインストールしてください。
②プラグイン一覧の中に「SAKURA RS WP SSL」が出てくるので有効化してください。

さくらのレンタルサーバで「初期ドメイン」を利用している方はこれでhttps化は完了です。
ほんとはこのサイトもドメインを変更したいと思っていて、サブドメインを取得して別サイトを作ろうとしていたのですが、
https化はできませんでした。さくらサーバ側に問い合わせると以下のような回答でした。

*****************
さくらのサブドメインでは、無料SSLや独自SSLをご利用いただくことができかねます。

そのため、「登録」のリンクも表示されておりません。

恐れ入りますが、無料のSSLをご利用になりたい、有償の独自SSLをご利用
になりたい場合は、独自ドメインを取得して運用していただきますよう、
お願いいたします。

※独自ドメインの取得は有償でございます。

▼ 独自ドメイン管理・取得
http://www.sakura.ne.jp/domain/
*****************

どうしてもドメインを変更したい人は、独自ドメインを取得しましょう。
その他、プラグインを使ったhttps化の詳細はこちら

manifest.jsonの設置

なんだかんだいろいろ調べましたが、Googleのこの記事が一番わかりやすいです。
ウェブアプリ マニフェスト
上記を見るだけではわかりづらいところを以下にメモします。

  • マニフェストを作成する意味

  • マニフェストでは、以下を設定しています。

    • 追加するホームアイコン(icons)
    •  ※192×192が1つあればよい。複数パターン設定することで、デバイスに応じて最適なものを表示してくれるようになる。

    • スマホに追加されたアイコンの名前を設定(Short_name)
    • スマホに追加されたアイコンから起動したときに表示されるサイト名(name)
    • PCに追加されたアイコンの名前を設定(name)
    • アイコンを起動したときの初期表示URL(start_url)
    • アイコンからどのように起動するのか(display)
    • ※standaloneとbrowserが設定できる。
       browserはPC起動時に利用できないとのこと(GoogleのポリシーとしてPCでもアプリライクに起動させたいらしい)
       standaloneで起動すると、ブラウザのURL入力欄等がない状態で起動され、アプリチックな見栄えになります。

    上記を踏まえて作成したこのサイトでのmanifest.jsonは下記の通り。

    {
        "name": "Web担当者の休日",        //PCに追加さされたアイコンの名前
        "short_name": "Web担当者の休日",   //スマホ追加さされたアイコンの名前
    
        "icons": [
            {
                "src": "/128128.png",    //ここではアイコンのpngファイルもドメイン直下に配置しています。
                "sizes": "128x128",
                "type": "image/png"
            },
            {
                "src": "/144144.png",
                "type": "image/png",
                "sizes": "144x144"
            },
            {
                "src": "/152152.png",
                "type": "image/png",
                "sizes": "152x152"
            },
            {
                "src": "/192192.png",
                "type": "image/png",
                "sizes": "192x192"
            },
            {
                "src": "/256256.png",
                "type": "image/png",
                "sizes": "256x256"
            }
        ],
        "start_url": "/?utm_source=homescreen&utm_campaign=a2hs", //ホームアイコンを立ち上げたときに起動するURL
        "display":"standalone",                                   //ホームアイコンの起動方法
        "theme_color": "#00aeef"                                  //ホームアイコン起動時のテーマカラー
    }
    

    manifest.jsonが正しく設置できているかはChromeのデベロッパーツールで確認することができます。
    Chromeのデベロッパーツールの「Application」を選択すると、左側に「Manifest」という欄がでてきます。
    このサイトの場合は以下のようになっています。※2018年12月11日現在

    こんな感じで記載内容が確認できます。
    表示されなければ正しくアップできていない等が考えられるのでmanifest.jsonへのパスの設定と、アップした先が正しいかを確認してください。

  • 作成したマニフェストを読み込ませる

  • headerの上の方に以下を記載する。

    <link rel="manifest" href="/manifest.json">
    
  • !重要!manifest.jsonはドメイン直下(/の下)に設置すること!

  • 通常、wordpressの管理画面上で操作するファイルは、利用しているテーマファイルがある/wp/wp-content/themesの中にテンプレートファイルが配置されています。
    しかしながら、PWAで必要となるmanifest.jsonおよびserviceWorker.jsについては、テンプレートファイルの配下ではなく、ドメイン直下(/のすぐ下)にFTPなどで設置する必要があります。

    企業のサイトなどで、サーバ構成上ドメイン直下に簡単にファイル設置できない場合もあると思いますのでご注意ください。
    サイトのmanifest.jsonを確認するには、Chrome developer toolで以下のように確認できます。

  • manifest.jsonの更新について

  • manifest.jsonに記載した内容は、次回以降の効率的なアクセスのためにユーザーの端末にキャッシュされます。
    このため、ユーザーの端末に一度ホームアイコンとして追加されてしまうと、その後の変更はユーザーが再度追加しなおさないと反映がされません。
    ※遷移先などは反映されるっぽいけど、アイコン画像とかは無理っぽい。

    Service Workerを有効にする

    serviceworkerは、今回取り組むホームアイコンへのPUSHを可能とするなど、PWAの取り組みの中で様々な機能を記述する重要な機能です。
    今回は、特に中身を記載する必要はなく、「serviceworker.js」がサイトに登録されていればOKです。

    「serviceworker.js」というファイル名のjsファイルを用意してください。
    ホームアイコンを追加するのみの場合、serviceworker.jsというファイルは以下を記述するのみでOKです。

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

    ※serviceworker.jsのファイルのみで中身を何も記述しないからファイルを設置しているとうまく登録できませんでした。なので、念のため上記を記載しています。もし、記述が必要な理由をご存知の方いたらコメントをお願いします。

    ファイルを作成したらFTPなどでドメイン直下にアップしましょう。

    次に、以下を「外観」⇒「テーマの編集」⇒「header.php」内のheadタグ内に記述します。

    <script>
    window.addEventListener('load', function() {
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register("/serviceWorker.js") //serviceworker.jsを登録
          .then(function(registration) {
            console.log("serviceWorker registed."); //consoleに結果を表示
          }).catch(function(error) {
            console.warn("serviceWorker error.", error); //consoleに結果を表示
          });
        }
      });
    
    

    うまくserviceworkerが登録されているかも、Chromeのデベロッパーツールで確認することができます。
    デベロッパーツールの「Application」タブを選択し、左側の「Service Workers」を選択します。
    「activated and is runnning」と表示されれば登録成功です。
    また、「console」タブで上記コードのconsole.logで出力させている「serviceWorker registed」が表示されても成功していることを確認することができます。

    さいごに

    サイトアクセス時にホームアイコンを追加させる実装(A2HS)方法についてご紹介しました。
    Chromeのデベロッパーツール「Application」タブ内の「Add to homescreen」を押すことでホームアイコンを追加するテストをすることができます。
    自然体でアイコン追加を表示させるには、上記の実装がすべてうまくいっている状態で、
    1ユーザーから2 回以上のアクセスがあり、そのアクセスに 5 分以上の間隔があるという条件を満たした場合に、ユーザーにホームアイコンの追加が促されます。

    どれくらいのユーザーが追加してくれてるのか?
    を計測するためにGAの設定が必要です。
    こちらであらためて説明しています。

    PWAについては、Webに断片的な情報は乗っていますが、体系的に学習しようとするとちょっとハードルがあると思います。
    英語ですが、たまたまちゃんと学習できるコンテンツがあったのでメモしておきます。
    プログレッシブWebアプリ(PWA) – 完全ガイド

    また、PWAのServiceWorkerを使いこなしていくにはJavaScriptの知識が必須になってきますので
    javascriptの基本から応用までいくつか利用している勉強法があるのでご紹介です。
    場所と時間に縛られないUdemyは特におすすめです。初心者向けの講座をリンクしておきましたが、玄人向けの講座もあるので一度見てみてください。
    いきなりスクールに通うのは勇気がいりますよね。
    人に直接教えてもらうなら、ストアカで一度トライしてみるのもありです。
    ちょっと知りたいことがあるだけ、とかならストアカの方が都合がよいです。
    ご都合に合わせてぜひ★

    1. Webで勉強してみたい人向け

    2. 実例でわかるJavaScript講座

    3. 講義を受けてみたい方

    4. 日本最大級のまなびのマーケット「ストアカ」

    5. スクールでしっかり勉強したい人向け

    6. キャリアチェンジを支援する・社会人のためのWebクリエイタースクール【デジタルハリウッド STUDIO by LIG】


コメントを残す

メールアドレスが公開されることはありません。