今回は、PWAを使って超漫画アンテナというまとめブログをまとめたいわゆるアンテナサイトをアプリのようにしてみました。
導入することで、ホーム画面からユーザーを呼び込めたり、キャッシュ機能でオフラインでも動作するなど様々なメリットがあるPWA
Twitterではセッション毎のページ閲覧が65%アップ、投稿数が75%アップ、直帰率が20%ダウン、SUUMOでは、ページ読み込み時間が75%減、プッシュ通知の開封率が31%になるなど、成功事例だけが取り上げられている感はありますがまだまだiphoneではできないことが多そうです。
PWA化
国内ではiphoneのシェアが高いことから見送ってきたwebサイトのPWA化ですがいよいよiphoneでも少しずつ対応してきたり王手サイトが次々と導入していることから相性の良さそうなアンテナサイトに導入してみました。
実際にアクセスしてみる
実際のアンテナサイトが上記の通りです。複数サイトのRSSを読み込んで時系列ごとに表示しています。今回はフルスクリーンを選んでいるので、電池マークやアドレスバーは消えていかにもネイティブアプリっぽくなっています。
アンテナサイトから外部サイトへ
アンテナサイトといえば自サイトに来たユーザーを他サイトに流すことが主目的ですが、外部サイトにアクセスすると上記のようになります。以前、試しに他サイトで導入した時に比べ嬉しい変化がありました。それは例えばアンテナサイトから外部サイトへアクセスするとPWAのページから離れ通常のブラウザに切り替わっていたんですが、現在は外部サイトもPWA化されたサイトの一部であるかのように動作しています。
次にどのようにしてPWA化をしたかについて書いて行きたいと思います。
WordPressへの対応
WordPressでサイトを作成している場合プラグインがあるので、導入は非常に簡単です。今回は、日本語で使いやすそうな「PWA for WordPress」というプラグインを使わせてもらいました。
サイトのHTTPS化さえされていれば5分程度でPWA化は終わると思います。
インストールが終わると、上記のように「PWA for WordPress」というメニューが管理画面のサイドバーに現れ3つの設定項目があります。
1.PWA for WordPress
プラグインを使わずにPWA化する場合、稼働中かどうか確かめるのにも一目ではわかりにくかったりしますが、プラグインでは一目で稼働しているかどうかがわかります。
2.Manifest
ここではマニュフェストの設定ができます。特に好みが無くとりあえずPWA化してみるなら、アイコンぐらいしか設定するところはなさそうです。
3.ServiceWorker
ここではServiceWorkerの設定をすることが出来ます。アンテナサイトは鮮度が大事なのであまりキャッシュ長いことキャッシュしたくないので基本キャッシュ計画をOnline firstにキャッシュ有効期限を、1時間に設定しました。
設定では分単位が使われるので1時間の場合60分ですね。
PWA化した場合キャッシュ系のプラグインを入れていると、プラグインの設定が反映され更新が上手くいかないことがあるようなのでキャッシュプラグインの時間も短くするかプラグインを削除するなりしなければならないようです。
iphoneへの対応
気になっていたiphoneへの対応ですが、Andoroidでは一定期間開けて数回アクセスすることでインストールを促すバルーンが現れますが、iphoneでは未対応です。実機で確認したところホーム画面へ追加するとしっかりアイコンが設定されていてAndroidと同じ動作でした。
パソコンからUAを変更してメタタグを確認したんですが、パソコンからは確認できませんでした( ;∀;)
まとめ
以上のように簡単にWordPressのブログをPWA化することが出来る便利なプラグイン、自分でマニュフェストを書いたりして導入するよりかなり手軽に導入できます。
今後WebサイトのPWA化は進んで行くのか非常に気になるところですね。
また新しい便利な技術が現れて淘汰されそうな気もしますが、生温かく見守っていきましょう!
コメント