簡単な設定を行うだけでサイトをPWA化することができるWordPressプラグイン「PWA for WordPress」

簡単な設定を行うだけでサイトをPWA化することができるWordPressプラグイン「PWA for WordPress」

簡単な設定を行うだけでサイトをPWA化することができるWordPressプラグイン「PWA for WordPress」

PWA for WordPressは、管理画面上で簡単な設定を行うだけで、サイトをPWA化することができるWordPressプラグインです。

PWAとは、Progressive Web Appsの略称で、Webサイトをアプリのように扱えるようにする仕組みのことです。スマートフォンのホーム画面にアイコンを保存することができ、オフラインやプッシュ通知に対応するための技術を利用しているWebサイトをPWAと呼びます。

PWAの導入はなかなかハードルが高そうですが、PWA for WordPressを使えば簡単にサイトをPWA化することができちゃいます。

PWA for WordPressのインストール

インストール手順は以下の通りです。

  1. PWA for WordPressをダウンロードします。
  2. ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。
  3. 管理画面の[プラグイン]ページで、PWA for WordPressを有効化します。

PWA for WordPressの設定

PWAを有効化するには、「Manifest」と「ServiceWorker」を生成する必要があります。

Manifestファイルは Webアプリケーションの構成を保持するjson形式のファイルで、ServiceWorkerはPWAの機能を制御するJavaScriptファイルです。

Manifestの生成

[PWA for WordPress] – [Manifest]にアクセスして、各種項目を設定していきます。

Manifest(manifest.json)の生成

Site Name サイト名
Short Name 短縮名
description サイトの説明
start_url スタートページ
scope ServiceWorkerの設置ディレクトリ
Icons アイコン(512*512px以上のpng)
theme_color テーマカラー
background_color 背景色
display 表示モード
orientation 画面の向き

ServiceWorkerの生成

[PWA for WordPress] – [ServiceWorker]にアクセスして各種項目を設定します。

ServiceWorker(service-worker.js)の生成

基本キャッシュ計画 キャッシュの利用方法
オフラインページURL オフライン時に表示するページ
キャッシュ有効時間 キャッシュの有効期限
キャッシュ除外URL キャッシュを除外するページ
初期キャッシュ インストールと同時にキャッシュするページ
デバッグモード デバッグモードの切り替え

設定完了後ルートディレクトリを確認してみると、「pwa4wp-manifest-1.json」と「pwa4wp-sw-1.js」というファイルが生成されていました。

ManifestとServiceWorkerの設定が完了したら、[PWA for WordPress] – [PWA for WordPress]にアクセスしてPWAの状態を確認しましょう。「HTTPS」「Manifest」「ServiceWorker」「PWA status」のすべてが”稼働中”になっていれば、PWA化の完了です。

PWA化の確認

「PWAインストールを保留」は、PWAのインストールボタンやポップアップについての設定です。

あとがき

スマートフォンでサイトにアクセスし、ホーム画面に追加してあげれば、PWAとして操作できるようになります。

オフラインに対応できたり、キャッシュの利用で表示速度を高速化するため、まるでネイティブアプリを使用しているような感覚でWebサイトを閲覧することが可能です。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です