WordPress 5.0 リリース

12月6日(日本時間26時ぐらい?)に、WordPress 5.0 がリリースされました。
さーて、このエントリーも Gutenberg で書いてみるよ!
以前プラグイン版の Gutenberg でトライして挫折したことがあり・・・ちゃんと最後まで書けるかな?

PWA for WordPress は WordPress のコアとはあまり干渉しないので、新バージョンでもまったく影響なく動くのですが、便乗して少し継ぎ足していた機能をのせて、アップデートをリリースしました。
新バージョンは 1.1.2 です。
前夜に 1.1.0 を出すよ!なんて Facebook に書いちゃってたのですが、いざ出す段になってからちょろちょろ修正が入り、1.1.2 になっちゃいました。
0.0.1 は修正の分、そして 0.0.1 は公式にアップしたときに Subversion のリポジトリにスクリプトを乗せ忘れるという間抜けな失敗で上げ直しになって、予告していたより 0.0.2 上がっちゃいました(笑)
最近は IDE 使ってるとファイル追加しても自動でリポジトリに追加されるのに慣れちゃってることが多いので、油断するとこんなことになるんですね。
気をつけよう。。。便利な環境に甘えすぎてました。

PWA for WordPress

そういえば PWA for WordPress ( PWA4WP ) について、作るのに一生懸命になっちゃって、使い方とか説明するエントリーをぜんぜん書いていないということに今ごろになって気付きましたorz
既に僕が書くより(公式のマニュアルより)はるかにわかりやすく使い方を解説していただいた記事がいくつかありますので、ここはそれを紹介させていただいてお茶を濁すというか、ご勘弁をいただきたいと思います。

こちらは僕がちょくちょく参加させていただいてる WordPress の勉強会で仲良くしていただいてる村重さんのブログ「猫でもわかる!WordPressレッスン」でPWA for WordPress をご紹介いただいている記事です。
初心者にもとてもわかりやすく書いていただいてますので、PWA ってなんだ?っていう方でもすんなり実装までいけると思います。

猫でもわかる!WordPressレッスン
WordPressブログがアプリになる!PWA for WordPress」

そしてこちらはバシャログさんの記事です。
ABC 2018 Spring での PWA の講演をご覧いただいていたようで、これまたとてもわかりやすくて感謝感激です。

http://bashalog.c-brains.jp/18/10/03-090000.php
( うまく埋め込み作れませんでした、リンクでご容赦を)

ちょっとやってみようかな、と思われた方はぜひご参考にしてみてください。

PWA4WP アップデート v1.1.2 の機能追加

さて、本題に入ります。
今回実装した新機能が2つあります。

1.マルチサイト対応
2.インストールポップアップのコントロール

このエントリーでは、これらの機能の使い方について解説します。

マルチサイト対応

このブログをご覧になっていればわかるかもしれませんが、このサイトもマルチサイトです。
ずっと以前、もともと仕事と切り離してブログを書いてた経緯もあって、そのなごりみたいな感じです。
少し技術的な話になりますが、WordPress をマルチサイト化すると、データベースに格納される設定情報なんかも子サイトごとに親サイトから切り離されて管理されます。
それぞれに個別のテーマを設定したり、個別の設定値を持たせたりすることが簡単にできてとても便利なのですが、こと PWA に関しては、用途によって全部のサイトで同じ PWA にしたかったり、サブドメイン型のマルチサイトだったら個別に設定を持たせたかったり、環境によってやりたいことが変わってきます。

これまでも PWA4WP ではそれぞれのサイトごとに ServiceWorker と Manifest ファイルを生成するので個別設定には対応できていましたが、今回のアップデートで全部の子サイトの PWA を一元化できるようになりました。
ServiceWorker? Manifest? という方はこちらをご一読ください。
これがいわゆる PWA の基礎となる技術です。

ServiceWorker と Manifest

さて、そんなマルチサイト時の設定ですが、メインサイト(親サイト)の設定画面で設定します。

PWA for WordPress メインサイト設定画面
「マルチサイト設定」

あらら、なんか日本語出てないところが・・・翻訳漏れたかな(^^;)
(※バージョン1.1.4で修正しました)
この設定は、メインサイト側でのみ表示されます。

「Unify all multi site into one PWA. 」
「すべてのマルチサイトのPWAをひとつのPWAとして統合する」を選択していただくと、全サイトで共通の PWA が出来上がります。
サブディレクトリ型で全体を統合した PWA を作るときはこちらを選びます。

「Make PWAs for each multi sites individually. 」
「マルチサイトごとのPWAを分離して構成する」を選択していただくと、各サイトで個別の設定ができるようになります。
サブドメイン型のマルチサイトで、それぞれのサイトに個別の設定を持たせたい場合や、サブディレクトリ型で特定のサイトだけ PWA をアクティブにしたい場合はこちらを選択します。

ちなみにサブディレクトリの複数のサイトに複数の PWA をセットした場合は、検証している限りではそれぞれのサイト毎に ServiceWorker が個別に切り替わって動く、ちょっと気持ち悪い状態になります。
はたしてちゃんと別個にインストールできるのか・・・ごめんなさいそこまで検証追いついてないです。
ちょっと興味あるのでいずれ時間のあるときに試してみようと思います。
キャッシュやキャッシュデータを記録する領域は個別に分けられているので、理論的にはそれぞれ動けそうな感じではありますが・・・。

ちなみにここで全サイトで統合された PWA を選択した場合は、子サイトの設定画面は無効化されます。

PWA 統合状態での子サイトの設定画面

メニューからも ServiceWorker / Manifest の表示がなくなり、ステータス表示だけになります。

PWA インストールの保留

なんのこっちゃ?と思われそうですが、この機能はけっこう画期的です。
通常、Chrome のデフォルトの挙動では PWA が有効なサイトにアクセスした場合、2回目以降のアクセスで、かつ初回アクセスから5分以上の間隔を空けたタイミングでインストールを促すポップアップが表示されます。
いわゆるインストールイベントの「発火」というやつです。

ホーム画面への追加を促すポップアップ表示

デフォルトのままだと時期尚早な感じがしますよね。
しかもポップアップしてくるのでユーザーにしてみるとつい×ボタン押して閉じちゃいますよね。

そこでインストールの保留です。
この機能はインストールのポップアップが発生したイベントを保留しておく機能なのですが、簡単に説明すると、その保留しておいたイベントをボタンなどに割り付けることができるんです。
設定は簡単です。
「PWA インストールを保留」の設定項目を「Defer PWA install」「PWAインストールを保留する」に設定するだけでOKです。
なんか設定の画面がところどころ日本語になってない・・・ごめんなさい後日対策調べます(バージョン1.1.4で修正しました)
インストールポップアップを抑止したいだけならこれだけで完了です。
ボタンの設置をしたい場合は、この先のサンプルコードを参考に、ボタンの設置をしてみてください。

PWA for WordPress メインサイト設定画面
「PWA インストールを保留

インストールしないPWA?

ここでひとつ、疑問に思われたかもしれません。

インストールを抑止しちゃったら PWA の意味なくない?

はい、ごもっともです。
でも、インストールしなくても機能する魅力的な利点もあるんです。
インストールすることによって、
・ホーム画面にアイコンができる
・スプラッシュ画面
・アドレスバーのないアプリライクな見た目
などの利点があります。
しかし、インストールしなくても、
・ServiceWorker によるキャッシュ制御
・Manifest に設定されたテーマカラー等のブラウザ背景への適用
などは動いています。
つまり、独立したアプリとしては存在しないけど、ブラウザの中ではちゃんとPWAとして動いている、という状態なんです。
キャッシュ機能を活用したパフォーマンス向上などを目的とするのなら、必ずしもインストールは必須ではありません。

オリジナルの PWA インストールボタンを設置する(ここから上級者向け)

さて、ここからは少し難しい話になってきます。
自分でサイト内にPWAのインストールボタンを設置する方法です。
PWA4WP は、保留したインストールイベントを、javascript のグローバル変数「window.pwa4wp_installevent」に格納します。
そして、function 「pwa4wp_open_install 」をコールします。
みなさんはこの「pwa4wp_open_install」を作成して思い思いの PWA インストールを配置してください。

このサイトのトップページ一番下にサンプルとしてボタンを貼り付けています。

https://www.compin.jp/
画面に配置した PWA インストールボタン

これをクリックすると、インストールイベントが発生し、ポップアップ「ホームボタンに compin.jp を追加」をタップしたときと同じ動作になります。

インストールイベント発生

ちなみにこれはデスクトップ版のChromeでも機能します。
(Windowsでの挙動です)
デスクトップ版でやると、いきなりニョキっとアドレスバーのないウインドウが起動してきます。
また、デスクトップにはサイトアイコンのショートカットができてます。(ショートカットはChromeの中でPWAを起動する感じのものです)

PWAとしてWindows上で起動した画面

サンプルコードは gist に掲載していますので、こちらも参考にしてください。
https://gist.github.com/ryu-compin/f2eea606f6a3db7fe9681cf7695e3c08

htmlとcss

まずは html と css ですが、特別なことは何もありません。

<div id="pwainstall">
<button id="pwainstall_button" class="square_btn">Add to Home Screen</button>
</div>
#pwainstall {
display: none;
}

javascript

そして javascript ですが、このサイトでは以下のように書いてます。

var pwa4wp_open_install = function(){
console.log("install button show");
jQuery('#pwainstall').css('display','block');
};
document.getElementById("pwainstall_button").addEventListener("click",function(){
if(window.pwa4wp_installevent !== undefined ){
window.pwa4wp_installevent.prompt();
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");
}});

functions.php から埋め込み

そしてこれらを埋め込むためのコードをfunctions.phpに追記します。

// 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);
}
add_action( 'wp_enqueue_scripts', 'enque_pwa4wp_installaction' );

これで完成です!

ちょっと最後のほうのオリジナルボタンの実装は複雑で難しいかもしれませんが、かなり自由度が増すことはお分かりいただけたのではないかと思います。

(追記)

このサイトは「Nishiki」というテーマを使用しています。
Nishikiには専用プラグインに javascript をページ内に挿入する機能があり、このプラグインの機能を利用すれば functions.php を使用することなく直接 javascript を挿入できます。

詳しくはNishikiのサポートサイトを参照してください。
https://support.animagate.com/manual/wp-nishiki-gb-install/

Nishiki 専用プラグイン 「Nishki Growing Beauty」に javascript をセット

javascript をページ内に挿入できるようなプラグインもいくつかあるようですので、こうしたものを活用すればさらに簡単に PWA インストールボタンを設置できそうですね。

11 Comments

  1. 初めまして。
    PWA for WordPressプラグインを使わせていただいておりますNyuと申します。

    「PWA インストールを保留」について質問なのですが、現在「保留する」にチェックを入れてもインストールのポップアップが画面下に表示されます。
    うろ覚えですが、数日前は表示されなかったと思います。

    これはサイトによる問題なのか、それともその他に原因となる要因があるのか、お尋ねしたいため書き込みさせていただきました。
    よろしくお願いいたします。

    Nyu
    1. はじめまして。PWA4WPのご利用ありがとうございます!
      保留を有効にすると、ページのヘッダ部分に「pwa4wp-a2hs-controler.js」というJavaScriptへのリンクが生成されます。
      これが有効であれば、インストールは保留され、なんらかのインストールイベントを自分で実装しないと動かない、という状態になります。

      考えられる原因として、有効化する前のページ(上記jsが有効じゃない状態のもの)がキャッシュされていて、これが読み込まれた、などが考えられます。
      キャッシュを一旦削除するために、ServiceWorkerを一度更新されてみてはいかがでしょうか。

      もし解決しないようでしたら、サイトを一度見せていただけましたらと思いますので、お問い合わせフォーム(https://www.compin.jp/contact-pwa4wp/)やSNSなどからでも結構ですので、サイトURLをお知らせください。

      Ryu Shindo
      1. 掲示板で質問させていただきましたNyuです。

        ご返答いただきありがとうございます。
        他プラグインのキャッシュの削除、ブラウザのキャッシュの削除、PWA for WordPressの再インストール、マニフェスト等の再有効化を行いましたが、状況は変わりませんでした。

        ●ソース内で出力されているプラグインのコード(pwa4wpで検索)
        if (‘serviceWorker’ in navigator) {import(‘https://**********/wp-content/plugins/pwa4wp/public/js/pwa4wp-a2hs-controler.js?1.1.4.23’);}
        if (‘serviceWorker’ in navigator) {navigator.serviceWorker.register(‘/pwa4wp-sw-1.js’, {scope:’/’});}

        ●Chromeのコンソール情報
        pwa4wp-a2hs-controler.js?1.1.4.23:3 a2hs controller loaded
        pwa4wp-a2hs-controler.js?1.1.4.23:16 a2hs controller exit

        ※pwa4wp-a2hs-controler.jsのソースに記述されている「install event occured」等のログは出力されていませんでした。

        お問い合わせフォームから情報を送信しようとしたのですが、送信ボタンを押した後
        「メッセージの送信に失敗しました。後でまたお試しください。 Failed to send Message, try again later.」
        といったエラーメッセージが表示されましたので、再度こちらにて報告させていただきました。

        お手数をおかけしますが、よろしくお願いいたします。

        Nyu
        1. 詳細なご報告ありがとうございます!
          また、メールフォームの調子が悪くすみません・・・gmail経由配信にしたらときどきこうなっちゃって困ってます(^_^;)

          ログの出力からも、スクリプト自体は正常に読み込まれているようなのですが、考えられるシナリオとして、スクリプトのロードより先にインストールイベントが発火してしまっているのではないか、というところが思い当たります。
          これを解消するにはインストール保留のスクリプトを外部ファイルとして読ませるのではなく、直接該当ページソースのインラインに埋め込んでしまうしかなさそうな気がしています。
          もしこれが正解であれば、応急措置としてpwa4wp-a2hs-controler.jsの内容を直接ページのヘッダ内に埋め込んでしまうことで解消しそうです。

          僕の方でも少しテストをさせていただき、その方法でうまくいきそうでしたらプラグインのアップデートに乗せて、直接スクリプトを埋め込むようにした修正版を配信させていただきます。
          ご不便おかけしますが、こちらは少しお時間ください。

          Ryu Shindo
  2. 詳しくご説明いただきありがとうございます。
    私の方でも再度検証を行った結果、先日の報告に誤りがあった事を報告させていただきます。

    ■ 誤り
    「install event occured」のログが無いと書いたのですがありました。
    イベントリスナーの概念を把握しておらず、コードが上から順に実行されるものかと考えていたためです。
    申し訳ございませんでした。
    また、先日の書き込み内に表立って公開するつもりが無いサイトURLが掲載されていたため、お手数をおかけしますが削除していただければ幸いです。

    ■正しいログの順序
    (pwa4wp-a2hs-controler.jsの読み込み)→a2hs controller loaded→(イベントリスナーの登録)→a2hs controller exit
    (イベントリスナーの発火)→install event occured→install button show→call function – pwa4wp_open_install

    なおwp_head関数が実行されるより前にpwa4wp-a2hs-controler.jsの内容を直接実行したところ、結果は変わりませんでした(インストールポップアップが変わらず表示される状態です)

    Nyu
  3. Nyuさま
    ご報告ありがとうございます!
    URLが書かれていた投稿につきまして、URL以外の部分は他の方にも有用な情報かと思いましたので、該当するURL部分だけマスクさせていただきました。
    で、そのURLのサイトを少し見せていただいたのですが、
    document.getElementById(“pwa_install”).addEventListener
    の部分でUncaughtエラーが出ています。
    サンプルでインストールボタンに割り付けている、id=”pwa_install” のエレメントが存在しないために発生しているようです。
    インストールの一連の流れのjavascriptがここで止まってしまっている可能性もあるかと思いますので、もしボタンを割り付けないようでしたら、一度こちらの「pwainstall.js」の読み込みを外してみたら改善しませんでしょうか。
    ※pwa4wp_open_installの呼び出しはfunctionが存在するときだけ、と条件づけていますので、これがなくてもエラーにはなりません。

    Ryu Shindo
    1. ご回答いただきありがとうございます。
      URLのマスクについて、承知いたしました。

      >id=”pwa_install” のエレメントが存在しないため
      本来は一部のLPにのみこのスクリプトを実行するようにしており、そのLPでは専用のボタン(id=”pwa_install”)が存在しました。
      また、その時点でもポップアップが出ていました。
      (今はポップアップを抑制するテストのため試しにサイト全体に処理を適用していました)

      functions.phpにて「pwainstall.js」の読み込み部分を削除したところ、状況は変わらずポップアップが表示されます。

      Nyu
  4. PWA4WPのプラグインを削除し、ページキャッシュ、ブラウザキャッシュ等を削除しても、何故かPWA4WPのファイルを優先的に読み込んでおり困っています。
    具体的にはpwa4wp-sw-1.jsやpwa4wp-cache-manager.jsを読み込みにいき、その後キャッシュにあるファイルを読み込みにいっているようです。
    ※既存のファイルよりも優先的にキャッシュを読み込もうとする設定は一度も行った事はありません。

    こうした状況はどのようにすれば改善できるのでしょうか。

    Nyu
    1. ServiceWorkerは、ブラウザーにインストールされるとサイトから抜いても残ります。
      本稼働中のサイトから除去する場合は、まず動作モードをOnline firstに切り替えて、キャッシュの期限(デフォルトで2日)以上間を空けてから動作を無効化し、プラグインを除去してみてください。
      強制的にブラウザーからServiceWorkerを除去するには、ChromeでしたらDevToolsのApplicationタブからServiceWorkerをUnloadします。

      Ryu Shindo
      1. ご回答いただきありがとうございます。
        「PWAインストールを保留する」が有効にならない件も気になるのですが、OnlineFirstが効かない件(Cache firstを選んだこともないのにキャッシュの読み込みが優先となる)現象となっているので気になります。

        ひとまず再度プラグインをインストールし、キャッシュの有効期限を60に変更しました(正確には昨日この現象が発生後に60に変更)ので、これで様子を見たいと思います。

        また、プラグインをアンインストールしてもServiceWorkerの設定やManifestの設定が残っているのは、意図したものなのでしょうか?

        Nyu
  5. (Cache firstを選んだこともないのにキャッシュの読み込みが優先となる)
    というのは、DevToolsのNetworkのところに「from ServiceWorker」と出るあたりからでしょうか?
    Online firstであっても、ServiceWorkerが機能し、ServiceWorkerがOnlineコンテンツを優先して取得、出力しますので、表示上は「from ServiceWorker」となります。
    また、プラグインのアンインストール後もServiceWorkerとManifestファイルを残しているのは、今のところ意図的に残しています。
    これは、エンドユーザーのブラウザからServiceWorkerをアンロードするには、サイト内にアンロードのスクリプトを埋め込まないとServiceWorkerが残り続けるからで、プラグインが除去された状況でも手動でそのあたりの挙動を変更したりできるようにするためにはServiceWorkerが存在していないといけないからです。
    プラグインのアンインストールによって、サイトのヘッダからスクリプトへのリンクはされなくなりますので、新規のServiceWorkerのインストールはファイルが残っていてもされなくなります。
    アンロードの部分の実装はちょっと先送りになってしまっているところもありましたので、実装方法を検討してみます。

    Ryu Shindo

Nyu にコメントする コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください