(このページは2022年5月30日に更新しました)
本記事の内容
「ＰＷＡ導入の案内をＷＥＢの表示中のみに表示させたい」
「特定のコメント、メッセージをＰＷＡ／ＷＥＢサイトで切り替えたい」
ＰＷＡは、ウェブの技術をフル活用して、スマートフォン上でネイティブアプリの様に動かす仕組みです。
ＰＷＡにすることで、Ｗｅｂブラウザから開いたり、ブラウザにお気に入り登録する必要もなくなり、アクセスが容易になります。
また、ＰＷＡはブラウザとは違い、アドレスバーが無くブラウザでは無い分、操作性が向上し、よりユーザーにとって快適な環境を提供することが出来ます。
今回は、そんなＰＷＡのトラッキングの設定についてみていきたいと思います。
なぜ必要なのか
特定のウィジェットの表示・非表示の切り替えであれば、表示メニューから選択することが出来ます。
この機能はデフォルトの機能ですので、特定のページ(ID)、フロントページ、様々な場面で表示と非表示を切り替えることが出来ます。
ただ、この機能にはＰＷＡは含まれておりません。
ですので、「ＰＷＡになった時」の切替の仕組みを作ります。
ＩＤの付与
まずは、切替たいコンテンツにＩＤを振ります。
ウィジェットであれば、作成すると自動的にＩＤが付与されます。
デベロッパーツール（開発ツール）でHTMLをすると出てきます。
カスタムhtmlでコンテンツを作ったのであれば、HTMLにIDを付けるのもアリです。
<div id="PWA_OFF">
<p>Ｗｅｂコンテンツ</p>
</div>
この様な形。
設定方法
ここて表示非表示を切り替える為に、javascriptとCSSを使います。
<script>
if(window.matchMedia('(display-mode: standalone)').matches){
}
</script>
このコードを使うことで、スタンドアロンアプリケーション表示されているかを条件に、分岐さることが出来ます。
スタンドアロンアプリケーションとは、ブラウザなどの中で動くアプリケーションでは無く、単体で動くアプリケーションのことを指します。
ＰＷＡを使うと、表示モードがスタンドアロンアプリケーションになります。
if文を使い、その表示モードであるかを検出します。
上記のコードに追加し、javascriptからCSSを操作します。
合体させると、下記の様になります。
<div id="PWA_OFF">
<p>Ｗｅｂコンテンツ</p>
</div>
<script>
if(window.matchMedia('(display-mode: standalone)').matches){
document.getElementById("PWA_OFF").style.display = "none";
}
</script>
こうすることで、ＰＷＡの時のみ、上段の「Ｗｅｂコンテンツ」が消える様になります。
まとめ
いかがでしたでしょうか？
WordPressでPWAに凝った作りをしているサイトは少ないかもしれませんが、PWAに対応する機能が少ないのも事実です。
PWAのアプリ構築の際にご活用いただければ幸いです。
最後までお読みいただきありがとうございました。
お勧めの記事・・・