PWAのホームアイコン追加機能をボタンクリックで発動する方法

Webディレクターのお勉強, WordPress

PWAのホームアイコンを追加する機能は、ユーザーからのリテンションを狙うには効果的な施策です。
しかしながらこのホームアイコンをユーザーに追加してもらうポップアップの表示条件は、
「２回目以降のアクセスで、かつ初回アクセスから５分以上の間隔を空けたアクセス」
です。
サービスによってはちょっとタイミングが早すぎたりしますし、
それ以降であってもやっぱり表示のタイミングは制御したい。

今回は、「２回目以降のアクセスで、かつ初回アクセスから５分以上の間隔を空けたアクセス」
で発動するホームアイコン追加のの表示を保留しいておいて、
別のタイミング(ボタンクリック）でそれを発動させる方法のご紹介です。

※この記事の作成に当たり、以下を参考にしています。
PWA4WP v1.1.2 の新機能 – PWA インストールをカスタマイズしよう

事前準備（PWAに対応する。※WordPressならプラグインでできます。）

サイト自体をPWAに対応しておく必要があります。
WordPressで簡単にPWA化させることができるプラグイン「PWA for WordPress」を使ってPWA化する方法はこちらでまとめています。
⇒「PWA for WordPress」というプラグインでWordPressをPWA化してみた

manifest.jsonやserviceworker.jsを自分で記述して設置することでPWA化する方法はこちらです。
⇒WordPressでホームアイコンの追加（PWA）機能を実装してみた！

この記事の説明では、PWA for WordPressプラグインを利用してPWA化したサイトでポップアップイベントをコントロールする方法を紹介しています。

PWAのインストールポップアップイベントを保留する

PWA for WordPressの設定画面で、「PWAインストールを保留する」を設定して「更新」ボタンを押すだけです。
とっても簡単ですね。このPWA for WordPressというプラグイン、さすがです。

PWA for WordPressでは、保留したインストールイベントを、javascript のグローバル変数「window.pwa4wp_installevent」に格納します。
そして、function 「pwa4wp_open_install」を呼び出すという仕様のようです。
なので、javascriptで「pwa4wp_open_install」が呼び出された時の動作を用意しておくことで好きなようにPWAインストール方法を設置することができます。

保留したポップアップイベントを発動させるボタンを設置する

ここでは説明用なので、テキストで「Add to Home Screen」というリンクを設置します。

※ホームアイコン追加イベントが発火している人はこの行の上に「Add to Home Screen」と表示されます。

こんな感じで表示されます。

ここでは、ホームアイコン追加イベントが発火していない（保留されていない場合は、下記のcssのように非表示の設定としています。

ボタン部分のHTML↓

<div id="pwainstall">
    <button id="pwainstall_button" class="square_btn">Add to Home Screen
</div>

ボタン部分に対するcss

#pwainstall {
    display: none; //→デフォルトはボタンを表示しない
}

保留していたイベントを発動させる（インストールイベントを発火する）

PWA for WordPressでは、インストールイベントを保留したあと、function 「pwa4wp_open_install」を呼び出すという仕様でした。
なので、保留したタイミングでインストールボタンを表示します。

↓javascriptでインストールボタンを表示

var pwa4wp_open_install = function(){
    console.log("install button show");
　　//pwa4wp_open_installが呼び出されたかを確認するためにconsoleに出力しておきます。

    jQuery('#pwainstall').css('display','block'); 
　　//→非表示にしていたインストールボタンを表示します。
};

続いて、表示したボタン（テキスト）がクリックされたときに、保留していたインストールイベントを発動させます。
PWA for WordPressでは、保留したインストールイベントを、javascript のグローバル変数「window.pwa4wp_installevent」に格納される仕様でした。

↓インストールボタンがクリックされたときの動作

document.getElementById("pwainstall_button").addEventListener("click",function(){ //ID:pwainstall_buttonがクリックされたときに発動
    if(window.pwa4wp_installevent !== undefined ){
        window.pwa4wp_installevent.prompt();     　　
　　　　//window.pwa4wp_installeventに格納されていればプロンプトを表示
       
　　　　 window.pwa4wp_installevent.userChoice.then(　
        function(choiceResult){　//ユーザーの選択ごとにコンソールへ出力。特に出力したいことがなければ記載不要
            if(choiceResult === 'accepted'){
                // insert actions for installation accepted here
                console.log('pwa installation accepted.');
            }else{
                // insert actions for installation refused here
                console.log('pwa installation refused.');
            }
        });
        window.pwa4wp_installevent = null;　//インストールイベントの初期化
    }else{
        console.log("install event is undefined");
    }});

以上で実装終了です。
WordPressで実装している場合、上記のjavascriptをすべてのページで読み込むように
「外観」⇒「テーマの編集」→「funstion.php」
内に以下の記述を追記することで「pwainstall.js」をリンクできます。
使っているテーマによってはjsへのリンクを貼る部分がまとまっているので、
そこに「wp_enqueue_script・・・」の部分を１行追記するだけでもOKです。

// add this code to functions.phpfunction
enque_pwa4wp_installaction(){
    wp_enqueue_script('pwa4wp_pwa_installer',get_stylesheet_directory_uri().'/js/pwainstall.js','','1.0',true);//function.php内でjsへのリンクを生成している場所があればそこにこの１行だけ追加してもOKです。
}
add_action( 'wp_enqueue_scripts', 'enque_pwa4wp_installaction' );

※上記では、サーバ上の「/wp-content/themes/テーマ名/js」の配下に、ホームアイコンを追加するボタンを表示するjsと、インストールボタンがクリックされたときに動作するjsを記述したファイルを
pwainstall.js
としてFTPで直接アップロードしています。

まとめ

今回は、PWAのホームアイコンを追加する機能を、ボタンクリックなどユーザー動作起因で実行する方法をご紹介させていただきました。
「pwainstall.js」というjsファイルの中に記載したので、複数画面にホームアイコン追加用の画像を設定する際は、１～４で紹介してきたソースの中の以下のソース部分を適宜編集して活用してください。

/*サイト中のホームアイコン追加ボタンのhtml*/
<div id="pwainstall">
    <button id="pwainstall_button" class="square_btn">Add to Home Screen
</div>

/*pwainstall.js内で、上記html情報を取得している部分*/
document.getElementById("pwainstall_button").addEventListener("click",function(){ //ID:pwainstall_buttonがクリックされたときに発動

これをやってみるだけでいろいろとやれることの発想が広がりそうですね。
ぜひお試しくださいませ。

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

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