ワードプレスでのPWA対応にはプラグイン「Super Progressive Web Apps」

著者 Nora

日付 2019年4月20日

カテゴリーコラム

AMPもSSLもそうですが、簡易的なPWAもリポジトリからインストールできるプラグインで対応させてしまうことができます。

Service WorkerというJavaScriptのAPIを使用することが前提条件ですので、PWA対応させるにはウェブサイトがSSL対応している必要があります。

何故かというと、PWAに必要なService Workerという要素は、SSL対応している状態でないと正常に機能しないAPIだからです。

localhostは利用可能だった筈ですのでテスト環境で試す場合はlocalhostを起用してください。

PWAとは？

PWAはプラグイン名にもあるように「Progressive Web Apps」の略ですが、オフラインでもキャッシュされた状態をロード可能な状態で、モバイル端末のアプリとして、スタンドアローンな形で起動できるようになります。

ざっくり言うとモバイル端末でのアイコンをタップすると起動するようなアプリにできちゃいます。

ブラウザでwebページを閲覧した後、オフラインでもそのページを閲覧することができる場合があると思いますが、ブラウザによりキャッシュされて一時的に保存されているページを再現している状態ですよね。

これをブラウザ無しで実現するのにService Workerを使用してキャッシュすることができ、ブラウザ上ではなく、お気に入りしたいサイトをアプリ化して個別のウィンドウで閲覧することができるんです。

プラグインを有効化してから、複雑な設定が一切ないのが魅力的で、最初のページとオフライン時の最初のページを選択するだけで十分です。

デメリットとして唯一感じることは、キャッシュが強いので、変更がテーマの更新などに伴って更新された最新版のJavaScriptなどがうまく反映されないことがあることでしょうか。

キャッシュなどが影響しないように、ブラウザのシークレットモードなどで新しくロードすると最新版のスクリプトがちゃんとロードされます。

それ以外については特に通常通りに機能してくれますし、他の機能を阻害するといった現象も見当たりませんでした。

標準的にマルチサイト対応もしていますし、このプラグイン便利ですよ〜。

日本語訳がまだ充実していないようですが、特に問題はないでしょう。

モバイル端末のアプリのように、アイコンや表示名などをセットアップしていきます。

名前などは入力するだけですし、他の設定項目も選択するだけですので、複雑な設定項目が一切ありません。

また、余談かもしれませんが、プラグインのアドオンが用意されておりトラッキング機能もあります。

アドオン「UTM Tracking」などは無料で提供されているので非常にありがたいです。

将来的にはJavaScriptの更新も正しく行えるように、テーマにも実装しようとは思っていますが、今の所は満足しています。

テーマにPWAを実装するとなると、編集する環境をセットアップし直さなくちゃいけないため面倒で、僕は暫くはテーマに実装は考えていません。

もうちょっと更新に伴ってキャッシュが削除されるようにして欲しい気もしますが、特に不満もありませんのでこのまま行こうかと。