WordPressサイトをPWA化する方法＋戻るボタンの実装【おすすめ】

先に一部だけ回答しておきます、サイトをPWA化させることでPVや収益は上がります、理由は利便性が上がるからです。

本記事では、サイト（WordPress）をPWA化させる方法について解説しつつ、一部のブラウザで起こる問題点について解決策を提案しております（←ここ重要）

この記事におすすめな人

そもそもPWAって何？【導入サイト紹介】

PWAとは「Progressive Web Apps」の略でして、簡単に言うとWEB（アプリ）とネイティブアプリ（スマホアプリ）の良い部分をいいとこどりする仕組みのことです。

• ネイティブアプリ
• メリット１：読み込みが早い
• メリット２：オフラインでも使える
• デメリット：使用するためにはインストールしないといけない

• WEBサイト（WEBアプリ）
• メリット：インストールが不要（アクセスするだけで使える）
• デメリット１：ネット回線によって読み込み時間が左右される
• デメリット２：オフラインで使えない（機内モード等）

上記はほんの一部ですが、それぞれ良い所と悪いところがあることが分かります、そこで、「それぞれのメリットだけを合わせ持ったものは最強じゃない？」ってのがPWAの考え方なわけです。

導入例の紹介

百聞は一見に如かずってことで実際にPWA化されたサイトをホーム画面に追加して体験してみましょう。

このサイト（MacoBlog）でお試しいただくことが可能です。

Androidユーザーの方は問題ありませんが、iOSの場合PWA化が中途半端な状態なので一部使えない機能がございます、これはApple側（Safari）の対応待ちであり私たちのせいではありません（逃げ、でも事実）

ホーム画面に追加したらそこからこのサイトにアクセスしてみましょう、全画面表示＋読み込み速度が上がっていると思います、あたかもスマホアプリかのような使い心地をWEBで提供する、これがPWAです（ドヤ）

上記はホーム画面に追加後、iPhoneXからアプリ経由でアクセスした時の画面（アドレスバーが消えているのが分かる）

PWA化の動きが加速しない理由

国内で一番使われているスマホは圧倒的にiPhoneなわけで、そのiPhoneでPWAが不完全（Appleの対応がてきとう）となると別にしなくても現状大きく問題はないってのがだいたいの見解です。

ただ、Appleが[iOS11.3～]から不完全ながらもPWAに対応させたことから分かるように、その重要性を理解しているからこそPWAを採用したわけで、今後新たに更新される可能性は高いです、なので完全対応の日は近いと私は考えています。

iOS版PWAで早く対応してほしい機能（使えない機能）

• バックグラウンド同期
• プッシュ通知
• Splash screen（ローディング画面）
• バックボタン機能

PWAが流行らない理由も頷ける、、、ただ、バックボタン機能（前の画面に戻る）がないのは致命的なので、これについては最後の方で私から解決策を提案させて頂いております。

WordPressサイトをPWA化させるには【導入方法】

PWA化させる前に１つだけ注意

PWA化の前提条件としてサイトのSSL化は必須です、下記のようにサイトアドレスが[https]から始まっていることを確認しましょう（じゃないとPWA化はできません）

問題なければ進みます、WordPressサイトをPWA化させる方法は２つ、下記のとおりです。

• プラグインで設定する方法
• 手動で設定する方法

前者ならプラグインを使う事で簡単にPWA化させることができます、後者は完全自作なのでちょっとだけ手間がかかります、自作の場合はWordPress以外のサイトでも使えるメリットがあります。

自身のスキルと相談して好きな方を選んでください、個人的には自作がオススメです、理由は勉強になるから（引き出しが増える）

とりあえず、プラグインで設定する方法から見ていきましょう。

プラグインで設定する方法【WordPressのみ】

WordPressサイトの場合、「Super Progressive Web Apps」というプラグインを使うことで簡単にPWA化させる事ができます、新規追加からインストールして有効化しておきましょう。

各項目を設定する

有効化したら設定をするだけです、全て英語表記なので翻訳機能を使うか下に対応表を用意しましたので、それを見ながら設定しましょう。

管理画面 > SuperPWA > Setting

各オプション対応表

最後に、一番下の項目３つに緑色のチェックが入っていれば特に問題なし、「Save Setting」をクリックすればPWA化完了です、超簡単でしたね。

PWA化されているかチェックする方法

おまけ：アドオンの追加

PWA化に必須ではありませんがアドオンが用意されています、必要に応じて有効化しておくと便利です。

管理画面 > SuperPWA > Add-Ons

• UTM Tracking：アプリ起動時に専用のトラッキングコードを付与するかどうか
• Apple Touch Icons：設定したアプリアイコン画像をiOSアプリ側の画像として利用するか

手動で設定する方法【全サイト対応】

WordPressサイトをプラグインに頼らずPWA化する方法についても解説しておきます、と思ったんですがこれについては良記事がありましたので下記記事を参考にしてください。

読めば分かると思いますが、WordPress絡みの処理はパス出力くらいなので、そこを変えるだけで他の普通のサイトでも導入可能です。

おまけ：iOS（Safari）だと戻るボタンが消える問題

私のサイトをホーム画面に追加して使ってみると、iPhoneユーザーの方はお気付きの通り「戻るボタン」がないんですよね、戻るためにサイトロゴをタップして最初に戻るとかやってられないでしょ。笑

でもそれを実装しようとすると手間もかかるし、プログラミング知識がない方は多分無理ですよね、１行コピペするだけで簡単に実装したい、、、となるとこれしかない。

「必殺、history.back！」

下記のコードをファイルのどこかに設置しましょう、私はheader.phpのナビ部分に置いています、スマホでメニューをタップすると一番下ちゃっかりいますよね（即席感ヤバイ。笑）

<a href="javascript: history.back()">前のページに戻る</a>

スマホ・タブレットだけに表示させたい場合

PWAってスマホユーザーに向けたものなのでPCでサイトを開いた時に「戻るボタン」があると意味不明なので、下記のようにすればPCでは表示させないようにすることができます。

<?php if ( wp_is_mobile() ) : ?>
<a href="javascript: history.back()" itemprop="name">前のページに戻る</a>
<?php endif; ?>

コピペするだけなので簡単ですね。

「戻るボタン」に関しては時間がある時に改良しようかなと思います、Safariのツールバーみたいに下で追尾するタイプの方が使いやすいですよね、我ながらメニューに戻るボタンは使い勝手悪すぎ(;^ω^)

そのついでにスムーススクロールも実装しておきますので、その時はまた読みに来てください、ってことで最後に一言だけ置いて終わりにしたいと思います。

「まだPWA化させてないの？」

他の人が読んでいる記事