Super Progressive Web Apps(SuperPWA)のフックのまとめ

WordPressプラグイン「SuperPWA」のフックの一覧

Akira

福岡在住ウェブデザイナー。Web サイト制作に役立つ情報を「見やすさ」と「使いやすさ」にこだわり紹介しています。

WordPress サイトを簡単に PWA に対応できるのが、プラグインの Super Progressive Web Apps(略称 SuperPWA)。

このプラグインのフックを簡単にまとめました。

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

マニフェストや Service Worker の変更時には、プラグインの再有効化がほぼ必要です。

尚、プラグインの基本的な設定は、下記のページをご覧ください。

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

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

関数
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

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

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

プラグイン設定では変更できない display の変更時に便利。

例:display をデフォルトの standalone から minimal-ui に変更し、かつプラグイン設定にはない lang を追加。

add_filter( 'superpwa_manifest', function( $manifest ) {
  $manifest['display'] = 'minimal-ui';
  $manifest['lang'] = 'ja_JP';
  
  return $manifest;
});

theme-color タグ : superpwa_add_theme_color

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

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

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

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

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

例:theme-color タグを出力しない。

add_filter( 'superpwa_add_theme_color', '__return_false' );

head 内の HTML : 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

関数
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

関数
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

関数
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

関数
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}

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

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

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

関数
do_action( ‘superpwa_addon_deactivated_’ . $_GET[‘addon’] )
記載ファイル
admin / admin-ui-render-addons.php
公式ドキュメント
superpwa_addon_deactivated_{$slug}

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