FirstLayout

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

Super Progressive Web Apps とは?

Google が推進しているのが PWA 。PWA とは、Web サイトをアプリにする仕組みです。

この PWA を簡単に WordPress に実装するできるのが、プラグインの Super Progressive Web Apps 。WordPress に PWA を実装するための最高のプラグインです。

PWA のホーム画面への追加機能・キャッシュ機能・オフライン機能と、欲しい機能に全て対応。また、プラグインの OneSignal – Free Web Push Notifications との連携で、PWA の Push 通知まで可能です。

さらに、設定が極めて簡単なことも特徴です。今日 WordPress を始めた方も、迷わず設定できるはずです。その上、PWA への対応が不完全な iOS 向けに、自動的に対策をしてくれます。

執筆時点のアクティブインストール数は、30,000 以上。評価は、5 点満点中の 4.9 点。すでにお使いの方から、絶大な評価を得ています。

実際の動作

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

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

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

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

尚、「OneSignal – Free Web Push Notifications」と連携した Push 通知の方法は、Setup OneSignal with SuperPWA WordPress Plugin にて説明があります。

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

PWA を実装するには、HTTPS への対応が必須です。HTTPS に対応している場合は、Super Progressive Web Apps をインストールします。

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

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

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

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

プラグインの設定

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

プラグインの設定は、このメニューの「Settings」より行います。Settings の設定項目を 1 つずつ説明します。

Application Name

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

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

ホーム画面に表示される Web アプリの名前。画像は PWA 版 Instagram 。

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

Application Short Name

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

サイト名が長い時に、ホーム画面で使われます。文字数の目安は、半角で 12 文字以内、全角で 6 文字以内です。

サイト名が長い場合は、略称を設定します。一般的な文字数のサイト名は、そのままサイト名を設定します。

Description

Web アプリの説明です。

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

通常は変更は不要です。

Application Icon

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

PWA 版 Instagram の例

サイズは、必ず 192 x 192px です。また、PNG 形式が推奨です。

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

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

Splash Screen Icon

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

PWA 版 Instagram の例

サイズは、必ず 512 x 512px です。サイト検証ツールの Lighthouse が、必須と指摘するサイズです。また、PNG 形式が推奨です。

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

Background Color

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

PWA 版 Instagram の例

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

Theme Color

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

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

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

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

Start Page

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

通常は、サイトのトップページを設定します。デフォルトでトップページが設定されているため、変更は不要です。

Offline Page

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

デフォルトでは、トップページが設定されています。

ユーザーの端末がオフラインである旨を明確に伝えたい場合は、「インターネットに接続していないためページを表示できません。」などと書いた固定ページを設定するといいかもしれません。

尚、AMP 公式サイトは、オフラインである旨を明確に伝えます。

オフライン時の AMP 公式サイトの表示

Orientation

Web アプリの画面の向きを設定します。

選択肢は 3 つです。

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

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

Display

Web アプリの表示モードを設定します。

選択肢は 4 つです。

Display の一覧
表示モード 説明
Full Screen 端末画面の利用可能な表示エリアがすべて使用されます(つまり全画面)。ゲームアプリに適しています。
Standalone ステータスバーやナビゲーションバー(Android のホームボタン・戻るボタンなど)は表示されますが、ブラウザの UI は表示されません。
Minimal UI Standalone に最低限のブラウザの UI が追加されます。ただし、追加される UI はブラウザによって異なります。
Browser ブラウザと全く同じです。

一般的なサイトは、Standalone か Minimal UI の 2 択だと思います。

動作の検証

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

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

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

アクセス解析

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

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

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

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

UTM Tracking では、Google Analytics などで計測するためのパラメータを設定できます。パラメータを設定すると、Start Page で設定した URL の後にパラメータが追加されます。

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

フックを使いカスタマイズ

Super Progressive Web Apps は、そのままで十分に機能します。

しかし、フックが用意されており、サイトに合わせて高度なカスタマイズが可能です。このフックを簡単にまとめました。

尚、フックによる変更が反映しない場合は、プラグインを一旦停止後に再度有効にすると変更が反映します。

start_url の変更 : superpwa_manifest_start_url

superpwa_manifest_start_url の概要
関数
apply_filters( 'superpwa_manifest_start_url', $start_url )
記載ファイル
functions / common.php
公式ドキュメント
superpwa_manifest_start_url

プラグイン設定の「Start Page」を変更するフィルターフックです。

マニフェストに記載する start_url を変更できます。アドオンを使わずに、パラメータを付けたい時などに便利です。

例:start_url を https://example.com/?utm_source=home-screen&utm_medium=pwa にする。
add_filter( 'superpwa_manifest_start_url', function( $start_url ) {
  return $start_url = 'https://example.com/?utm_source=home-screen&utm_medium=pwa';
});

準備の可否の表示 : superpwa_is_pwa_ready

superpwa_is_pwa_ready の概要
関数
apply_filters( 'superpwa_is_pwa_ready', true )
記載ファイル
functions / common.php
公式ドキュメント
superpwa_is_pwa_ready

デフォルトではプラグインを有効にした際に、PWA の準備が整っているかをプラグインの管理画面で知らせてくれます。この表示が不要な場合に使うフィルターフックです。

例:PWA の準備の可否を表示しない。
add_filter( 'superpwa_is_pwa_ready', '__return_false' );

マニフェスト変更 : superpwa_manifest

superpwa_manifest の概要
関数
apply_filters( 'superpwa_manifest', $manifest )
記載ファイル
public / manifest.php
公式ドキュメント
superpwa_manifest

マニフェストに記載する項目を変更するフィルターフックです。

マニフェストへの記載項目は、ウェブアプリマニフェスト – メンバーをご参考ください。

例:プラグイン設定にはない lang を追加。
add_filter( 'superpwa_manifest', function( $manifest ) {
  $manifest['lang'] = 'ja_JP';

  return $manifest;
});

theme-color タグ : superpwa_add_theme_color

superpwa_add_theme_color の概要
関数
apply_filters( 'superpwa_add_theme_color', true )
記載ファイル
public / manifest.php
公式ドキュメント
superpwa_add_theme_color

meta タグの theme-color の出力を変更するフィルターフックです。

デフォルトでは、プラグイン設定の「Theme Color」で指定した色で <head> 内に meta タグの theme-color が出力されます。

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

使用中のテーマが meta タグの theme-color を出力する場合は、出力の停止がおすすめです。

例:meta タグの theme-color を出力しない。
add_filter( 'superpwa_add_theme_color', '__return_false' );

head 内の HTML : superpwa_wp_head_tags

superpwa_wp_head_tags の概要
関数
apply_filters( 'superpwa_wp_head_tags', $tags )
記載ファイル
public / manifest.php
公式ドキュメント
superpwa_wp_head_tags

<head> 内で出力する HTML を変更するフィルターフックです。

デフォルトでは、下記のような HTML が出力されます。

<!-- Manifest added by SuperPWA - Progressive Web Apps Plugin For WordPress -->
<link rel="manifest" href="マニフェストのパス">
<meta name="theme-color" content="#D5E0EB">

この HTML を全て変更できます。

ただし、マニフェストのパスを指定した <link> タグは必須のため注意が必要です。なければ PWA が動作しません。

例:コメントと theme-color タグを出力しない。
add_filter( 'superpwa_wp_head_tags', function( $tags ) {
  return $tags = '<link rel="manifest" href="'. parse_url( superpwa_manifest( 'src' ), PHP_URL_PATH ) . '">';
});

Service Worker のファイル名 : superpwa_sw_filename

superpwa_sw_filename の概要
関数
apply_filters( 'superpwa_sw_filename', 'superpwa-sw' . superpwa_multisite_filename_postfix() . '.js' )
記載ファイル
public / sw.php
公式ドキュメント
superpwa_sw_filename

プラグインが作成する Service Worker のファイル名を変更するフィルターフックです。

マルチサイトを除き、デフォルトで作成されるファイル名は superpwa-sw.js です。

参考 Can you make

キャッシュするリソース : superpwa_sw_files_to_cache

superpwa_sw_files_to_cache の概要
関数
apply_filters( 'superpwa_sw_files_to_cache', 'startPage, offlinePage' )
記載ファイル
public / sw.php
公式ドキュメント
superpwa_sw_files_to_cache

Service Worker のインストール時にキャッシュしたいリソースを変更するフィルターフックです。

デフォルトでは、プラグイン設定の「Start Page」と「Offline Page」に指定したページが Service Worker のインストール時にキャッシュされます。

キャッシュしないリソース : superpwa_sw_never_cache_urls

superpwa_sw_never_cache_urls の概要
関数
apply_filters( 'superpwa_sw_never_cache_urls', '/\/wp-admin/,/\/wp-login/,/preview=true/' )
記載ファイル
public / sw.php
公式ドキュメント
superpwa_sw_never_cache_urls

Service Worker にキャッシュさせたくないリソースを変更するフィルターフックです。

デフォルトでは、管理画面の wp-admin、ログイン画面の wp-login、プレビュー画面の preview=true の 3 つのページが指定されています。

参考 Exclude URLs from cache?

Service Worker の変更 : superpwa_sw_template

superpwa_sw_template の概要
関数
apply_filters( 'superpwa_sw_template', ob_get_clean() )
記載ファイル
public / sw.php
公式ドキュメント
superpwa_sw_template

Service Worker を変更するフィルターフックです。

Service Worker の全ての書き換えも可能です。

参考 Add Extra URL for Caching

アドオンの起動 : superpwa_addon_activated_{$slug}

superpwa_addon_activated_{$slug} の概要
関数
do_action( 'superpwa_addon_activated_' . $slug )
記載ファイル
admin / admin-ui-render-addons.php
公式ドキュメント
superpwa_addon_activated_{$slug}

アドオンファイルで定義されている関数の起動をコントロールするアクションフックです。

アドオンの無効化 : superpwa_addon_deactivated_{$slug}

superpwa_addon_deactivated_{$slug} の概要
関数
do_action( 'superpwa_addon_deactivated_' . $slug )
記載ファイル
admin / admin-ui-render-addons.php
公式ドキュメント
superpwa_addon_deactivated_{$slug}

アドオンを無効化するアクションフックです。

メニュー 閉じる 検索 記事を読む Facebook Twitter はてなブックマーク Pocket LINE ダウンロード 全ての記事 Web制作 便利ツール