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

Akira

福岡在住の Web デザイナー。Web サイト制作に役立つ情報を紹介しています。AMP が大好き。

FacebookTwitter で記事の更新をお知らせしています。

Google が推進しているのが、PWA 。

PWA とは、Web サイトをアプリにする仕組みです。

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

今日 WordPress を始めたばかりの方も、わずか数分で PWA の「ホーム画面への追加機能」「キャッシュ機能」「オフライン機能」を実装できます。

非常に素晴らしい「Super Progressive Web Apps」の使い方をご紹介します。

Super Progressive Web Apps とは?

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

リリース後に頻繁にアップデートがなされており、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 の動作)。

公式サイトでは、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 を検索します。

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

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

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

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

プラグインの設定

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

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

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

Application Name

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

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

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

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

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}

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

コメント

  1. これで全て成功したのですが、ショートタイトルを間違えたので、スマホのアプリを削除し、タイトルを直したのですが、再びスマホのホームにアプリを出すにはどのようにすればいいのでしょうか?サイトにはホームに追加ボタンは現れませんでした。

  2. すみません、自己解決しました。

    • 解決されたようで良かったです。

      一応、解決方法を書いておきます。

      ① 5 分以上待つ
      ② 待っても出ない場合には、ブラウザのキャッシュを削除する

      2 回以上のアクセスがあり、前回のアクセスより 5 分以上が経過していることが、ホームに追加ボタン(ミニ情報バー)が表れる条件の 1 つです。

      おそらく、ショートタイトルを変更されたことで、この条件をもう 1 度満たさないといけなかったのだと思います。

  3. お世話になります。
    現在、私のサイトをWPA化させようかと検討中なのですが一つ伺いことあがあります。
    リファラの計測はどうなるのでしょうか?調べたところによると、アナリティクスなどは計測されるようですが、WPAサイトから通常サイトへ流れたユーザーのリファラは相手サイト側は把握できるのでしょうか?

    よろしくお願いいたします。

    • パラメータのある start_url( Super Progressive Web Apps であれば Start Page )からのアクセスであれば、リクエストヘッダーのリファラで PWA からの流入だと分かります。

      それ以外のページからのアクセスは、何かしらされないとリクエストヘッダーのリファラで PWA からの流入だとは分かりません。

      Google Analytics での計測であれば、下記のページはご参考になるでしょうか。

      PWAでホーム画面から来たユーザーをgoogle analyticsで追跡したい

  4. お世話になっております。
    申し訳ありませんがお知恵をお貸し下さい。

    SPWAを実装したのですが記事を更新しても最新記事が表示されませんでした。
    androidは持っていないので確認はしていないのですが、iPhoneだと最新情報が反映されません。PCのchrome環境のPWAだとリロードすれば最新記事が表示されます。

    LiteSpeed Cacheでキャッシュを削除してみましたが変化はありませんでした。
    設定方法を間違っていると思い、SPWAを一度削除し再インストールも試してみましたが同様でした。

    ・Manifest
    ・Service Worker
    ・HTTPS
    以上3つの項目は緑の✔マークも付いてしますし、難しい設定もないですしどこが間違っているのか見当もつきません。

    以下が私のサイトの情報になります。
    ———————————————-
    サイト名:PS4ProNEWS
    サイトURL:https://psneolog.com
    ホームURL:https://psneolog.com
    コンテンツURL:/wp-content
    インクルードURL:/wp-includes/
    テンプレートURL:/wp-content/themes/cocoon-master
    スタイルシートURL:/wp-content/themes/cocoon-child-master
    使用スキンURL:
    Wordpressバージョン:4.9.8
    PHPバージョン:7.0.28
    ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:63.0) Gecko/20100101 Firefox/63.0
    サーバーソフト:LiteSpeed
    サーバープロトコル:HTTP/1.1
    エンコーディング:gzip, deflate, br
    言語:ja,en-US;q=0.7,en;q=0.3
    ———————————————-
    テーマ名:Cocoon
    バージョン:1.4.3
    カテゴリ数:109
    タグ数:1278
    ユーザー数:1
    ———————————————-
    子テーマ名:Cocoon Child
    バージョン:0.0.2
    ———————————————-
    利用中のプラグイン:
    AddQuicktag 2.5.3
    Akismet Anti-Spam 4.0.8
    bbPress 2.5.14
    Better Delete Revision 1.6.1
    Broken Link Checker 1.11.5
    Clean Options 1.3.2
    EWWW Image Optimizer 4.5.0
    Expander 0.3.3
    Google XML Sitemaps 4.0.9
    Jetpack by WordPress.com 6.4.2
    LiteSpeed Cache 2.7.3
    Master Post Advert 1.0.2
    NextScripts: Social Networks Auto-Poster 4.2.8
    plugin load filter 3.0.4
    Really Simple SSL 3.1.2
    Rucy 0.4.4
    Simple Tags 2.4.7
    SNS Count Cache 0.11.1
    Super Progressive Web Apps 1.9
    Throws SPAM Away 2.9
    Ultimate Nofollow 1.4.7
    WebSub/PubSubHubbub 3.0.1
    WordPress Ping Optimizer 2.35.0.1.3
    WordPress Popular Posts 4.0.13
    WP-Optimize 2.2.6
    WP Crontrol 1.6.2
    WP Multibyte Patch 2.8.1
    ———————————————-
    分かる範囲で結構ですので助言をいただけると幸いです。
    よろしくお願いいたします。

    • 私が持っている Android では、更新されています。

      iPhone でお使いのブラウザのキャッシュを削除されると、どうなるでしょうか。

  5. Akira様、ご連絡ありがとうございます。

    iPhoneのブラウザのキャッシュしたところ最新記事が表示されました。
    元のブラウザの情報に依存しているという事でしょうか。完全に独立しているものと思いこんでいました。
    ありがとうございます!!

  6. Akira様
    PS4ProNEWS管理人でございます。何度も申し訳ございません。

    その後ですが、PWAで初回アクセス時は毎回古い情報しか表示されず、サイト名やホームボタンをクリックしても同様に古い記事しか表示されませんでした。
    ただ、iPhoneの場合だとsafariのキャッシュを削除、PCのchromeだとF5でリロードすれば最新記事が表示されます。
    ユーザーに毎回この手順を踏ませるはどうかと思うのですが、何か良い改善策はないでしょうか。
    お忙しいところ恐縮ですがよろしくお願いいたします。

    • このブログでも SuperPWA プラグインを使っていますが、いつも自動的に最新の記事一覧が表示されます。

      また、サイトを拝見しても PWA に関しての問題は発生していません。

      なので、申し訳ありませんが、何が原因で古い記事しか表示されないのか分かりません。

      私であれば、他のプラグインを全て停止して調べてみます。

      特に LiteSpeed Cache は真っ先に疑います。停止やキャッシュ削除で最新記事が表示されないか、念入りに調べます。

      下記のフォーラムでは、サイトが更新されない場合には WP Fastest Cache のキャッシュを削除してねと開発者さんがおっしゃっていますし。

      Not Working on iOS

      他には、plugin load filter をお使いなので、念のため SuperPWA が「通常ロード」に選択されているかのご確認が必要かもしれません。

  7. Akira様
    ご連絡ありがとうございます。PS4ProNEWS管理人でございます。

    読書からのコメントで、デバイスに寄って表示される場合と、表示されない場合が混在してるようでした。
    SuperPWAの問題ではないのかもしれません。
    一度プラグインを全て停止し問題点を切り分けてみたいと思います。
    お騒がせして申し訳ございませんでした。

  8. Akira様
    PS4ProNEWS管理人でございます。

    その後ですが自己解決しました!
    cocoonの高速化設定のブラウザキャッシュの有効化を停止したところ通常通り表示されるようになりました。
    お騒がせして申し訳ございませんでした。

    • よかったです。ホッとしました。

      その方法で解決されたのなら、LiteSpeed Cache のブラウザキャッシュが有効になっていたのかな?とふと頭をよぎりました。

送信に失敗しました

ボットと判定された可能性があります。

大変お手数をおかけしますが、以下の内容をご確認の上、再度のコメントの送信をお願い申し上げます。