WordPress を数分で PWA 化するプラグイン Super Progressive Web Apps

サイトにPWAを実装するWordPressプラグインSuper Progressive Web Apps

Akira

福岡在住ウェブデザイナー。 WordPress のカスタマイズを、「見やすさ」と「使いやすさ」にこだわり紹介しています。

以前「 WordPress を PWA に!ホーム画面への追加機能を実装」という記事を書きました。

この記事で紹介している内容は、 PWA の主要機能であるキャッシュ機能やオフライン機能には対応していません。

自前で実装するには面倒な部分なので、何か良い WordPress プラグインはないかと探してみました。

すると、ありました!

その名は「 Super Progressive Web Apps 」。

この Super Progressive Web Apps を使えば、ホーム画面への追加機能・キャッシュ機能・オフライン機能を簡単に実装できます。

実際に当サイトにインストールしてみて、素晴らしいプラグインでした。

今日 WordPress を始めたばかりの方も、ものの数分でサイトを PWA に対応できます。

Super Progressive Web Apps の概要

「 Super Progressive Web Apps 」は、 2018 年 2 月 22 日にリリースされたプラグインです。

リリース後に頻繁にアップデートがなされており、 WordPress に PWA を実装するための最高のプラグインです。

PWA のホーム画面への追加機能・キャッシュ機能・オフライン機能と、欲しい機能に全て対応。

また、「 OneSignal – Free Web Push Notifications 」と連携することで、 PWA の Push 通知まで可能です。

さらに、設定が極めて簡単なことも特徴です。今日 WordPress を始めた方も、迷わず設定できるはずです。

さらにさらに、 PWA への対応が不完全な iOS 向けに、自動的に対策をしてくれます。

執筆時点のインストール数は、 6000 以上。

評価は、 5 点満点中の 5 点。

すでにお使いの方から、絶大な評価を得ています。

公式サイトで実際の動作を確認

Super Progressive Web Apps のインストール後の動作は、公式サイトの SuperPWA.com にアクセスすると確認できます。

ホーム画面への追加に対応したブラウザ( Android 版 Chrome ・ Firefox ・Edge )でアクセスすると、 Web アプリをホーム画面に追加するためのインフォバーが表示されます。

SuperPWA.comで確認できるホーム画面への追加インフォバー

ホーム画面への追加に未対応のブラウザは、ブラウザのメニューよりホーム画面に追加可能です。

また、 YouTube でも確認できます(動画は Chrome 68 の動作)。

SuperPWA.com では、 PWA の検証方法やプラグインのアップデート情報が提供されています。

「 OneSignal – Free Web Push Notifications 」と連携した Push 通知の方法は、「 Setup OneSignal with SuperPWA WordPress Plugin 」をご覧ください。

また、問い合わせやニュースレターの申し込みもできます。

プラグインのインストール

PWA を実装するには、 HTTPS への対応が必須です。

HTTPS に対応している場合は、 Super Progressive Web Apps をインストールします。

WordPress 管理画面 → プラグイン → 新規追加より、 Super Progressive Web Apps を検索します。

Super Progressive Web Apps のインストール

検索後は、インストールし有効化します。

ちなみに、有効にすると、ドメインディレクトリ直下に superpwa-manifest.json と superpwa-sw.js の 2 つのファイルが自動的に作成されます。

有効化後に作成される2つのファイル

この 2 つのファイルは、 PWA に必須のファイルです。

プラグインを削除すると、この 2 つのファイルも自動的に削除されます。

プラグインの設定

プラグインを有効にすると、 WordPress 管理画面の左のメニューに「 SuperPWA 」が追加されます。

Super Progressive Web AppsのSettings

プラグインの設定は、このメニューの「 Settings 」より行います。

Settings の設定項目を 1 つずつご説明します。

Application Name

Web アプリの名前を設定します。

この名前は、ホーム画面やスプラッシュ画面などで使われます。

Webアプリの名前PWA 版 Instagram の例

通常はサイト名にします。

デフォルトでサイト名が設定されているため、変更は不要です。

Application Short Name

Web アプリの略称を設定します。

サイト名が長い時に、ホーム画面で使われます。

文字数の目安は、半角で 12 文字以内、全角で 6 文字以内です。

サイト名が長い場合には、略称を設定します。

一般的な文字数のサイト名は、そのままサイト名を設定します。

Description

Web アプリの説明です。

デフォルトでは、 WordPress 管理画面 → 設定 → 一般の「キャッチフレーズ」が設定されています。

通常は変更不要です。

Application Icon

ホーム画面やスプラッシュ画面などで使われるアイコンを設定します。

ホーム画面のWebアプリのアイコンPWA 版 Instagram の例

サイズは、必ず 192 x 192px です。

また、 PNG 形式が推奨です。

アイコンを作成後に WordPress のメディアにアップロードし、そのアイコンを設定します。

この 192 x 192px のアイコンは、 PWA のマニフェストに必須です。

Splash Screen Icon

こちらもアイコンの設定です。主にスプラッシュ画面に使われます。

スプラッシュ画面のWebアプリのアイコンPWA 版 Instagram の例

サイズは、必ず 512 x 512px です。

サイトパフォーマンス計測ツールの Lighthouse が、必須と指摘するサイズです。

また、 PNG 形式が推奨です。

アイコンを作成後に WordPress のメディアにアップロードし、そのアイコンを設定します。

Background Color

スプラッシュ画面の背景色を設定します。

スプラッシュ画面の背景色PWA 版 Instagram の例

Google の推奨は、サイトの背景色と同じ色です。

スプラッシュ画面とサイトの背景色が同じだと、スムーズな遷移を表現できます。

Theme Color

Web アプリの基本色を設定します。

この基本色は、ステータスバーに使われます。

ステータスバーに使われるWebアプリの基本色

また、 meta タグにも使われます。

<meta name="theme-color" content="#D5E0EB">

Start Page

ホーム画面から起動した時に、最初にアクセスする URL です。

通常は、サイトのトップページを設定します。

デフォルトでトップページが設定されているため、変更は不要です。

Offline Page

Web アプリ利用者の端末がオフライン時、かつ表示しようとしたページのキャッシュがない時にアクセスする URL を設定します。

通常は、サイトのトップページを設定します。

デフォルトでトップページが設定されているため、変更は不要です。

Orientation

Web アプリのオリエンテーション(画面の向き)を設定します。

選択肢は 3 つです。

  • Follow Device Orientation : Web アプリは端末の向きに応じて、縦・横に回転します。
  • Portrait : Web アプリは縦画面で表示されます。
  • Landscape : Web アプリは横画面で表示されます。

一般的なサイトは、 Follow Device Orientation か Portrait の 2 択です。

動作の検証

設定項目の下に、「 Status 」があります。

PWAの動作を確認できるStatus

この Status の「 Manifest 」「 Service Worker 」「 HTTPS 」の 3 つに全て緑色のチェックが入っていれば、正常に動作しています。

また、 Chrome のデベロッパーツールの Application タブでも、動作を検証できます。

アクセス解析

Super Progressive Web Apps には、 PWA からのアクセスを計測するためのアドオンが用意されています。

WordPress 管理画面のメニューの SuperPWA より、「 Add-Ons 」をクリックします。

Super Progressive Web AppsのAdd Ons

すると「 UTM Tracking 」があるため、「 Activate 」をクリックし有効にします。

Super Progressive Web AppsのUTM Tracking

有効にすると、メニューに UTM Tracking が追加されます。

WordPressメニューに追加されたUTM Tracking

UTM Tracking では、 Google Analytics などで計測するためのパラメータを設定できます。

パラメータを設定すると、 Start Page で設定した URL の後にパラメータが追加されます。

パラメータに関しては、下記のサイトをご参考ください。


Super Progressive Web Apps を使えば、 PWA にすごく簡単に対応できます。

これ以上に簡単にはできないほど。

手間は一切かけたくないとお考えであれば、試してみてはいかがでしょうか。

試す価値は、大いにあると思います。

当サイトでは、インストールしました。

JavaScript を全く書かずに、キャッシュ機能とオフライン機能を実装できるのは魅力的です。

また、 PWA の仕様変更への対応を、プラグインに丸投げできることにも惹かれました。

Chrome 68 で PWA の動作が変わったし、自前でついていくのは結構大変。