スマホ等のモバイル向けウェブサイトを、スマホ用のアプリの様に使えるようにする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も入ってるプラグイン。
僕が使用したのは下記のプラグイン「Super Progressive Web App」。
（現在はワードプレスのテーマでPWAを使ってます）
PWA難しいけど、プラグイン楽やったー！参考になりました、ありがとうございます！https://t.co/0Zzx2aDbqS
— 東田ダダーン (@Higashidadan) 2018年10月17日
Twitterでも書き込んだように、参考にさせていただきました。
AMPの対応もしているなら、連携もできます。
連携というかなんですが、検索でAMPページ→トップページ等のリンク押してPWA起動。
事前にPWA登録しといてもらわなあかんやん。。
下記はCocoonテーマを使って、AMPページから「SuperPWA」で実装したPWAを起動する方法が記載されています。
私はAMP化がうまく動かず、サーチコンソールのエラーが発生しました。。。
PWA機能付きワードプレステーマ
PWAに対応したワードプレステーマも増えてきました。
当ブログでも、プラグインを使ってPWAを実装してましたが、CocoonテーマがPWAに対応した為、プラグインはやめて、テーマで実装してます。
ちなみにPWAはキャッシュを使う仕組みなので、コロコロ変えると正常に動かなくなる可能性があります。
PWA対応、無料テーマ
Cocoon
最強の無料ワードプレスのテーマですね。
Luxeritas Theme
こちらも、最強の無料ワードプレスのテーマですね。
カスタマイズ性や設定画面はCocoonより見やすくてスッキリしてると思います。
Webma!UNLEASH
テーマとしてはシンプルで悪くない気もしますが、カスタマイズ性は微妙でした。
PWA対応、有料テーマ
THE THOR（ザ・トール）
無料WPテーマ「ライオンブログ・ライオンメディア」の有料版という感じですね。
私自身、ライオンブログしか使った事ないですが、使いやすい印象でデザインもいいので、THE THORもいいんじゃないでしょうか？という予想。
直接PWAのソースを実装する方法
プラグインは増やしたくないって方なら、直接実装してみてはいかがでしょうか。
そんなにハードルは高く感じませんでした。
ただ、キャッシュを残す仕組みですので、管理画面はキャッシュを使用しないという設定が必要です。
じゃないと、上記でも書いたように、ログインできにくくなるという状態が発生します。
そこで、参考になったのが、下記の記事で紹介されているPWAの実装方法です。
非常に為になりました。ありがとうございます！
キャッシュさせないの反対で、キャッシュさせる又は保存させるページも記載していないと、オフラインの時、閲覧することができません。
閲覧数が多いページ等はキャッシュに残す又は保存するように設定しても、いいかもしれません。
プッシュ通知は別サービスで対応するのが無難
上記の方法のプラグインでPWA設定、テーマでPWAの設定だと機能的には「ホーム画面に追加」のみという感じです。
プッシュ通知を対応させるなら別に対応が必要です。
直接PWAを実装してもなかなか面倒でしたので、いっそのこと通知は別サービス使う方が手っ取り早くていいかもしれないです。
当ブログは「Push7」を使って、プッシュ通知を行っているので、同じように別のサービス等でプッシュ通知を行っている方は、画面追加の機能だけ良いかもしれないですね。
PWA実装した感想
ということで、当ブログもPWAに対応させたのですが、「WEBサイト以上、アプリ未満」という都合のいい男女の関係の例えぽいのが感想です。
アプリのようなインターフェイスは触ってて正直、嬉しいです。
まだまだ発展の途中という感じがしますが、chromeのデベロッパーツールでもPWAのスコアの確認ができるので、いつしかSEOにも関わってくるんじゃないの？とか思っています。
PWAがもし一般的になれば、WEBサイトの在り方が変わる時じゃないのかなと思います。
PWA運用してからの感想
追記：2018年11月29日
PWAを運用して思ったのはとにかくキャッシュとの闘いだと思いました。
自分が無知だというのもありましたが、キャッシュありきのシステムという事に関して、理解が足りてませんでした。
便利な分、当たり前ですが、最初の設定をしっかりしないと、思った動きにならない、更新の反映がされないという事になるかもしれません。
最悪、ユーザーに再度ホーム画面に登録しなおしてもらわないといけない事態。
もちろんキャッシュの対処方法もあるのですが、まずはどこをキャッシュに残すか、オフラインにどのページを残すかなど、設計をしっかりしないとキャッシュにずっとやられるかもしれないです。
コメント