2018/10/12 35 Shares

WordPressをPWA化できる「Super Progressive Web Apps」の使い方・設定方法

Apps

WordPress はプラグインを使うことで簡単に PWA 化できます。

PWA 用のプラグインは複数あり、いろいろ試してみましたがどれも使い勝手はさほど変わりませんでした。

ここでは 2018 年 10 月時点でレビュー評価数が最も高く、必要最低限の設定で簡単に扱える「Super Progressive Web Apps（Super PWA）」の使い方と設定方法をご紹介します。個人ブログならこれで十分です。

Headline

PWA（Progressive Web Apps）とは

この記事をご覧いただいている時点で PWA についてある程度ご存知だと思いますが、ざっくり概要を挙げておきます。

実のところブログだと Chrome などで見てもらうのと大きな違いはないですし、日本のようにどこでも高速でインターネットにつながる環境であれば表示速度の恩恵もあまりないかもしれません。

ただ、プッシュ通知も使えますし、今後主流になるかもということで今のうちに対応検討しておくのもよいかと思います。

「Super Progressive Web Apps」は単体でプッシュ通知に対応していませんが、別プラグインを併用することで対応できます。

プラグインを使えば PWA 化自体は 1 分もかかりません。インストールする前に以下のものを準備しておくとスムーズです。

なお、常時 SSL 化（HTTPS）していないと PWA 化できないのでご注意ください。

画像はアプリアイコンと、アプリを開いた直後の起動画面（スプラッシュスクリーン）で使用します。

「Super Progressive Web Apps」では、192px 四方と 512px 四方の正方形画像が指定されています。png 形式で用意しておきましょう。

サイトアイコン（ファビコン）と同じものでよいと思います。

「アプリを開いた直後のフロントページ」「オフライン時につながるページ」は固定ページを用意しておくことで個別に設定できます。

ブログの場合はどちらも通常のトップページで問題ないかと思います。スマホアプリ限定コンテンツを用意するなど、いろいろ考えてみるのも面白そうですけどね。

それでは設定方法を見ていきましょう。今回 PWA 化するのは、Naifix のデモサイトです。

プラグインのインストール方法は他のプラグインと同じです。

プラグイン新規追加画面で「Super Progressive Web Apps」を検索。たんに「PWA」と検索しても出てきます。

有効化後、設定画面に移りましょう。

サイドバーの「SuperPWA」またはプラグイン一覧の「Settings」から入れます。

設定画面全体はこのようになっています。英語ですが、とくに難しいことはありません。

Application Name	アプリの名前。サイト名と同じで OK 。
Application Short Name	アプリのショートネーム。フルネームで表示しきれないときに使われる。
Description	アプリの説明。meta description と同じで OK 。
Application Icon	アプリアイコン用画像。192px 四方。
Splash Screen Icon	スプラッシュスクリーン用画像。512px 四方。
Background Color	スプラッシュスクリーンの背景色。ブログのテーマカラーに合わせておけば OK 。
Theme Color	テーマカラー。背景色と同じにしておけば OK 。
Start Page	アプリ起動後のページ。固定ページを指定できる。
Offline Page	ネット未接続時にアプリを開いたときのページ。固定ページを指定できる。
Orientation	アプリの向きを指定できる。