PWA対応のTipsをAMPと比較（投稿ページのみ）

2025年10月17日 最終更新日時 : 2025年10月24日 login_user
目次

この記事では、PWA（Progressive Web App） を導入する際のポイントを、AMP（Accelerated Mobile Pages）と比較しながら解説します。さらに、WordPressで投稿ページだけに反映し、固定ページ・お知らせ・アーカイブ・カテゴリーには影響しない設定方法も紹介します。

1 AMPとPWAの違い

項目 AMP PWA
目的 モバイルで高速表示 アプリのような体験を実現
オフライン対応 × 不可 ◎ 可能（キャッシュ機能）
通知機能 × 不可 ◎ プッシュ通知対応
SEO効果 △（以前は優遇） ◎ UX向上で間接的に効果
自由度 低い（制約あり） 高い（通常HTML＋JS）
主な構成 AMP HTML / AMP JS / AMP Cache manifest.json / Service Worker / HTTPS

2 投稿ページだけPWAを反映する方法

まず、PWAは「HTTPSサイト」「manifest.json」「service-worker.js」が必要です。
これをWordPressの投稿ページだけで読み込むように条件分岐します。

2.1 functions.php にコードを追加


//----------------------------------------------
// 投稿ページだけでPWA用ファイルを読み込む
//----------------------------------------------
add_action('wp_head', function() {
    if ( is_single() && !is_page() && !is_category() && !is_archive() ) {
        // manifest.json はサイトルートに設置
        echo '<link rel="manifest" href="/manifest.json">';
    }
});

add_action('wp_enqueue_scripts', function() {
    if ( is_single() && !is_page() && !is_category() && !is_archive() ) {
        wp_enqueue_script('pwa-register', get_stylesheet_directory_uri() . '/js/pwa-register.js', [], null, true);
        wp_enqueue_script('pwa-body', get_stylesheet_directory_uri() . '/js/pwa-body.js', [], null, true);
    }
});

// 投稿ページだけ body に pwa-active クラスを追加
add_filter('body_class', function($classes) {
    if (is_single()) {
        $classes[] = 'pwa-active';
    }
    return $classes;
});

3 Service Workerの登録スクリプト

js/pwa-register.js ファイルをテーマ直下に設置します。

ファイル名：pwa-register.js
保存先：wp-content/themes/child-theme/js/pwa-register.js


//-------------------------------------------
//Service Workerの登録スクリプト
//-------------------------------------------
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js')
      .then(function(reg) {
        console.log('ServiceWorker registered:', reg.scope);
      })
      .catch(function(err) {
        console.log('ServiceWorker registration failed:', err);
      });
  });
}

3.1 ディレクトリ構造

  • child-theme/
    • archive.php
    • category.php
    • functions.php
    • footer.php
    • header.php
    • style.css
    • js/
      • pwa-register.js

4 Service Worker の本体

service-worker.js はサイトルートに設置します。

ファイル名：service-worker.js
保存先：public_html/service-worker.js


//-------------------------------------------
// Service Worker の本体
//-------------------------------------------
const CACHE_NAME = 'pwa-cache-v1';
const urlsToCache = [
  '/',
  '/wp-content/themes/your-theme/style.css',
  '/wp-content/themes/your-theme/js/pwa-register.js'
];

// インストール
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => {
      return cache.addAll(urlsToCache);
    })
  );
});

// リクエスト時
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

3.1 ディレクトリ構造

  • public_html/
    • wp-admin/
    • wp-content/
    • wp-includes/
    • functions.php
    • wp-config.php
    • wp-login.php
    • service-worker.js

5 manifest.json の例

サイトルートに設置します。

JavaScript Object Notation（ジャバスクリプト・オブジェクト・ノーテーション）の略で、「データをやり取りするための軽量なテキスト形式」です。ジェイソン または ジーソンと呼びます。

ファイル名：manifest.json
保存先：public_html/manifest.json

保存方法：manifest.json　の保存方法は、javascriptと同じで、ファイル名を「manifest.json」、ファイルの種類「全てのファイル」、文字コード「UTF-8N（BONなし）」、改行コード「LF」です。


{
  "name": "My WordPress PWA",
  "short_name": "WP PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0073aa",
  "icons": [
    {
      "src": "/wp-content/themes/your-theme/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/wp-content/themes/your-theme/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

3.1 ディレクトリ構造

  • public_html/
    • wp-admin/
    • wp-content/
    • wp-includes/
    • functions.php
    • wp-config.php
    • wp-login.php
    • service-worker.js
    • manifest.json

6 投稿ページ限定でPWAを有効にするカスタムJS

「投稿ページのみ」でbodyタグに pwa-active クラスを追加します。

ファイル名：pwa-body.js
保存先：wp-content/themes/child-theme/js/pwa-body.js


//-------------------------------------------
//投稿ページ限定でPWAを有効にする
//-------------------------------------------
document.addEventListener('DOMContentLoaded', function() {
  if (document.body.classList.contains('single-post')) {
    document.body.classList.add('pwa-active');
  }
});

3.1 ディレクトリ構造

  • child-theme/
    • archive.php
    • category.php
    • functions.php
    • footer.php
    • header.php
    • style.css
    • js/
      • pwa-body.js
      • pwa-register.js

7 確認方法

WordPressの投稿ページだけでPWA（Progressive Web App）が正しく有効になっているかを確認します。

  1. 投稿ページをブラウザで開きます。
  2. HTMLの <head> 内を確認します。以下のタグが存在すれば、manifest.json が正しく読み込まれています。 
    <link rel="manifest" href="/manifest.json">
  3. body タグに pwa-active クラスが付与されているか確認します。投稿ページの場合、以下のようになっていればOKです。 
    <body class="single-post pwa-active">

    4. この2点を確認できれば、投稿ページ限定でPWAが有効になっていることが確認できます。

    補足:
    - 固定ページやアーカイブ、カテゴリーなどでは manifest.json は読み込まれず、body に pwa-active クラスも付かないことを確認してください。
    - もし body クラスや manifest リンクが表示されない場合は、functions.php や js ファイルの設置場所、条件分岐を再確認してください。

    8 ポイント：AMPとの住み分け

    • AMPは「読み込み速度最優先」、自由度は低い。
    • PWAは「UX（体験）最優先」、デザイン・機能の自由度が高い。
    • AMPが“瞬間表示”なら、PWAは“継続利用”に強い。

    WordPress投稿ページだけをPWA化することで、コーポレートサイトや固定ページを壊さず、ブログ読者にアプリのような快適な体験を提供できます。

    9 Googleの方針変更

    2021年、Googleはニュースコンテンツに関して「AMPでなくてもトップニュースに表示可能」と発表しました。これにより、AMP対応していないサイトでもSEO上の不利はほとんどなくなりました。

    
// 例: Googleの発表内容の要点
// ・AMP非対応でもニュースカルーセルに表示可能
// ・表示順位の評価にAMPは必須ではない

    10 AMPが廃止されつつある理由

    • AMP専用HTMLやJSの制約が多く、デザインや機能の自由度が低い。
    • メンテナンスコストが高い（テーマ・プラグイン対応が必要）。
    • PWAや高速レンダリング技術の普及により、AMPでなくても高速表示が可能。
    • Googleの公式方針変更でSEOメリットが減少。

    11 現状の運営者・開発者の動き

    • 既存のAMP対応サイトの廃止・非対応化
    • 通常のレスポンシブHTML＋PWAなどでUX向上を目指す
    • テーマやプラグインもAMP非対応で開発されるケースが増加

    12 代用プラグイン

    コードによる実装が難しい場合は、以下のPWA対応プラグインを使うことで、初心者でも簡単に導入できます。

    プラグイン名 主な機能・特徴
    Super Progressive Web Apps WordPressサイトを即座にPWA化できます。ホーム画面追加、オフライン閲覧、アイコン設定など基本機能を搭載。
    ▶ 公式プラグインページ
    PWA for WP & AMP AMP対応サイトでも利用可能。オフラインキャッシュ・プッシュ通知・Service Worker 自動生成など多機能。
    ▶ 公式プラグインページ
    PWA (Feature Plugin) WordPress公式チーム開発のベースプラグイン。manifest.json と Service Worker を標準的に扱えるため、開発者向け。
    ▶ 公式プラグインページ
    補足:
    - プラグイン導入後もサイトがHTTPS化されている必要があります。
    - manifest.json や service-worker.js を手動で上書きする際は、テーマやキャッシュの競合に注意してください。
    - AMP対応サイトでは PWA for WP & AMP を選ぶと互換性が高くおすすめです。

    PWAを導入することで、WordPressサイトに「オフライン閲覧」「ホーム画面追加」「プッシュ通知」などの機能を付与できます。
    投稿ページだけに限定すれば、固定ページやコーポレート部分へ影響を与えず、ブログ読者にアプリのような体験を提供可能です。

    コードによる実装は柔軟性に優れていますが、初心者の方はプラグインでの導入も十分実用的です。
    目的に合わせて「自作コード」か「プラグイン導入」を選択しましょう。

    13 まとめ

    現在、AMP対応は必須ではなく、多くの開発者・サイト運営者は廃止または非対応化する流れです。高速表示やSEOはAMP以外の技術でも十分実現可能なので、AMPに依存せずに柔軟なWeb運営を考えることが推奨されます。

    今後はPWA（Progressive Web App）や標準の高速レンダリング技術を活用し、ユーザー体験とサイト管理の両立を意識するのが現実的な方向性です。

13.1 関連記事

この記事を読んだ人はこちらも読んでいます

カテゴリー
便利Tips、SEO・サイト運営サポート
タグ
前の記事
CSSで作る！かわいい・おしゃれな枠デザイン集【コピペOK】
2025年10月17日
次の記事
サーバー負荷監視用ウィジェットを表示する方法
2025年10月18日