New Article

PWAをワードプレスで実装してみて感じた事。それは「嬉しい」

スポンサーリンク

スマホ等のモバイル向けウェブサイトを、スマホ用のアプリの様に使えるようにするPWA(プログレッシブウェブアプリ)について、実装した感想やアレコレをご紹介。

具体的なにどんなの?というと、モバイル向けウェブサイトを開いて、「ホーム画面に追加」するというダイアログが表示されれば、それPWAの可能性大ですよ!

PWAに興味を持った理由

  • ワードプレスの有料テーマなどでもPWAに対応している物が出てきている。
  • いろんな企業のモバイル向けWEBサイトでも、対応しているサイトが増えてきた。
  • とりあえず、アプリ化したいやん。

上記の理由で興味を持ち、Googleさん推奨ならSEOにもちょびっと影響されるんじゃない?もしくは、いつかSEOに絡んでくるんじゃない?という浅はかな考えです。

PWAに対応している有名なところでは、TwitterやSUUMO、最近ではYahoo!も対応し始めました。

PWAのメリット

  • アプリなインターフェイス(アドレスバーを消せる)
  • プッシュ通知ができる(※2018年11月、iOSは未対応)
  • インストール不要
  • キャッシュを利用して、電波が繋がらない場所(オフライン)でも閲覧可能。表示速度も速くなる。

上記の事から、サイト利用者のストレス軽減、レスポンス向上などが期待できる、いやサイトによっては最高のパフォーマンスを発揮できますね。

PWAのデメリット

  • iOSがサファリだけしか対応していないし機能も一部だけ(※2018年11月)
  • カスタマイズできない箇所もまだまだ多い(ホーム画面に追加の表示のタイミング等)
  • プッシュ通知はできるが、バッジ表示はできない
  • まだまだ知名度が低い

なんかデメリットというよりは、まだまだ発展途上な感じがします。
「ホーム画面に追加」のダイアログが表示するタイミングも、「サイトへの訪問回数が2回以上で、更に5分以上の間隔を空けないといけない」という仕様みたいなので、そういったカスタマイズ性もこれからという感じがします。

iOSに関しては2018年になってサファリだけ対応して他のブラウザでは使えない状態です。
その他、iOSはプッシュ通知が使えないのが一番痛く感じます。
通知用のアプリ等を使えば通知できるみたいですが、面倒ですし本末転倒ですよね。

あと、iOSは戻るボタン付けてあげないと前ページに戻れない場合があるので、戻る進むボタンを追加してあげなければいけません。
もう、iOSでの対応はほぼアカンやん状態ですね。

そもそもPWAという機能を知っている人が少ないと思いますし、一般の方からしたら名前が世界機関的な、又はプロレス的な感じで馴染みにくい名前ですよね。

スポンサーリンク

PWAの実装方法

実装に関してはワードプレスに関してはプラグインもあるので、プッシュ通知なしなら簡単に実装できます。
直接、コードを実装する場合でもそんなに難しくありませんでしたが、キャッシュの設定を間違えると、ワードプレスにログインできにくくなる(cookie削除でログイン可能)事態が発生しますので、注意が必要です。

ワードプレスプラグイン

HTTPSさえ対応していれば、とりあえず、PWAをプラグインで対応できます。

リリース元にGoogleも入ってるプラグイン。

PWA
WordPress feature plugin to bring Progressive Web App (PWA) capabilities to Core

僕が使用したのは下記のプラグイン「Super Progressive Web App」
(現在はワードプレスのテーマでPWAを使ってます)

Super Progressive Web Apps
SuperPWA helps you convert your WordPress website into a Progressive Web App instantly.


Twitterでも書き込んだように、参考にさせていただきました。

AMPの対応もしているなら、連携もできます。
連携というかなんですが、検索でAMPページ→トップページ等のリンク押してPWA起動。
事前にPWA登録しといてもらわなあかんやん。。

下記はCocoonテーマを使って、AMPページから「SuperPWA」で実装したPWAを起動する方法が記載されています。

【 Cocoon 】AMP で SuperPWA で実装した PWA を事前に読み込み
AMP to PWA を WordPress テーマ「 Cocoon 」で導入するカスタマイズのご紹介です。高速表示の AMP を入り口とし、プラグインの Super Progressive Web Apps で実装した PWA を高速で起動できます。 Google が推奨するユーザーエクスペリエンスを高める手法です。
現在、CocoonテーマでPWAは実装されており、Cocoonテーマ内でAMPとPWAを実装した場合は上記の連携の対応内容を修正してください。
私はAMP化がうまく動かず、サーチコンソールのエラーが発生しました。。。

PWA機能付きワードプレステーマ

PWAに対応したワードプレステーマも増えてきました。
当ブログ(東田ダダーン)でも、プラグインを使ってPWAを実装してましたが、CocoonテーマがPWAに対応した為、プラグインはやめて、テーマで実装してます。
ちなみにPWAはキャッシュを使う仕組みなので、コロコロ変えると正常に動かなくなる可能性があります。

PWA対応、無料テーマ

Cocoon
最強の無料ワードプレスのテーマですね。

PWA設定を行ってモバイル環境の高速化を行う方法
Cocoonを「PWA(Progressive Web Apps)」に対応させて、よりスマホからのアクセスをしやすくする方法の紹介です。

Luxeritas Theme
こちらも、最強の無料ワードプレスのテーマですね。
カスタマイズ性や設定画面はCocoonより見やすくてスッキリしてると思います。

Luxeritas Theme | SEO最適化、レスポンシブ、高カスタマイズ性、とにかく速い、無料の WordPress テーマ
Luxeritas はSEO最適化済み、レスポンシブデザイン、高カスタマイズ性にも関わらず、Webページを高速に表示するための仕組みを満載した、無料の WordPress テーマです。

Webma!UNLEASH
テーマとしてはシンプルで悪くない気もしますが、カスタマイズ性は微妙でした。

無料WordPressテーマ-高速表示、音声入力・PWA対応のWebma!UNLEASH | Web集客・マーケティングを学ぼう|Webma!オンライン
SEOそしてページスピード、すべてに高パフォーマンス Webma!Unleashは、SEOにも優れ高速な表示を実現した軽量テーマです。様々な計測ツールでその速度が実証されています。 Google提供、Lighthouse:パフォーマンス96ポイント、SEOおよびPWA1...

PWA対応、有料テーマ

THE THOR(ザ・トール)
無料WPテーマ「ライオンブログ・ライオンメディア」の有料版という感じですね。
私自身、ライオンブログしか使った事ないですが、使いやすい印象でデザインもいいので、THE THORもいいんじゃないでしょうか?という予想。

直接PWAのソースを実装する方法

プラグインは増やしたくないって方なら、直接実装してみてはいかがでしょうか。
そんなにハードルは高く感じませんでした。
ただ、キャッシュを残す仕組みですので、管理画面はキャッシュを使用しないという設定が必要です。
じゃないと、上記でも書いたように、ログインできにくくなるという状態が発生します。

そこで、参考になったのが、下記の記事で紹介されているPWAの実装方法です。

【コピペでOK】WordPressをPWA対応させる方法(プラグインなし) | SimoSimo
コピペで動く、WordPressをPWA対応させる方法を書きました。プラグインは使用しません。

非常に為になりました。ありがとうございます!

キャッシュさせないの反対で、キャッシュさせる又は保存させるページも記載していないと、オフラインの時、閲覧することができません。
閲覧数が多いページ等はキャッシュに残す又は保存するように設定しても、いいかもしれません。

プッシュ通知は別サービスで対応するのが無難

上記の方法のプラグインでPWA設定、テーマでPWAの設定だと機能的には「ホーム画面に追加」のみという感じです。
プッシュ通知を対応させるなら別に対応が必要です。

直接PWAを実装してもなかなか面倒でしたので、いっそのこと通知は別サービス使う方が手っ取り早くていいかもしれないです。

当ブログは「Push7」を使って、プッシュ通知を行っているので、同じように別のサービス等でプッシュ通知を行っている方は、画面追加の機能だけ良いかもしれないですね。

ワードプレスでプッシュ通知【コピペOK、Push7カスタマイズ方法】
数年前からよく目にするようになった、WEBサイトからの通知、いわゆるプッシュ通知。当ブログでもプッシュ通知ができるサービス・プラグイン「Push7」を使ってみました。

PWA実装した感想

ということで、当ブログもPWAに対応させたのですが、「WEBサイト以上、アプリ未満」という都合のいい男女の関係の例えぽいのが感想です。
アプリのようなインターフェイスは触ってて正直、嬉しいです。

まだまだ発展の途中という感じがしますが、chromeのデベロッパーツールでもPWAのスコアの確認ができるので、いつしかSEOにも関わってくるんじゃないの?とか思っています。

PWAがもし一般的になれば、WEBサイトの在り方が変わる時じゃないのかなと思います。

PWA運用してからの感想

追記:2018年11月29日

PWAを運用して思ったのはとにかくキャッシュとの闘いだと思いました。
自分が無知だというのもありましたが、キャッシュありきのシステムという事に関して、理解が足りてませんでした。

便利な分、当たり前ですが、最初の設定をしっかりしないと、思った動きにならない、更新の反映がされないという事になるかもしれません。
最悪、ユーザーに再度ホーム画面に登録しなおしてもらわないといけない事態。

もちろんキャッシュの対処方法もあるのですが、まずはどこをキャッシュに残すか、オフラインにどのページを残すかなど、設計をしっかりしないとキャッシュにずっとやられるかもしれないです。

コメント

タイトルとURLをコピーしました