PWA化しちゃうわん

ごきげんよう

牛筋の土手にを作ったわん🐶

暫く作っていなかったのでレシピを思い出すために

牛筋を湯がいては洗うの繰り返しで手間はかかる

けど、この手間が仕上がりに繋がるからねー

レシピの確認とか言いながら、調味料は目分量なので適当

なのに美味しくできるなんて僕天才👻

明日が味がなじんで超美味しくなるかも

楽しみだわん🐶

さて、そんな土手に作りしながら

今日は、このブログの修正をした

ブログをPWA化するためのテスト

ブログを毎回ブラウザから開くのではなく、スマホのホーム画面に登録して

そこからアクセスできるようにする

んで、新着投稿があったら通知で知らせる

これを実装していこうと思い、スマホからブログにアクセスしたら

めっちゃ重い！👻

デザインを作った時はスマホからもアクセスして確認してたけど

ずっとスマホ閲覧していなかったので

あんなに重くなっていたとは！

知らない間にウィジェットに色んなパーツが出力されてて重くなっていた

というわけで、スマホでのアクセスが軽くなるように修正

んで、WordPressブログをPWA化してくれるプラグインを作成

その概要をチャッピーに作文してもらったので、以下は僕の頑張りです

---

# WordPressサイトをPWA化する自作プラグインを作りました

このブログをスマホから少しでも使いやすくするために、WordPressサイトをPWA化する自作プラグインを作りました。

PWAとは、かんたんに言うと、Webサイトをスマホのホーム画面に追加して、アプリのように開ける仕組みです。

通常のWebサイトとしてアクセスできるのはそのままに、ホーム画面からすぐに開けるようにしたり、必要に応じて通知を受け取れるようにしたりできます。

今回作ったプラグインでは、ブログや通販サイトなどでも使えるように、できるだけテーマに依存しない形で作っています。

---

## 主な機能

このプラグインでは、主に以下の機能を実装しています。

* PWA用のマニフェスト出力
* Service Workerの生成
* ホーム画面に追加するための案内表示
* iPhone / Android向けの案内文の出し分け
* ホーム画面から起動した時の通知ボタン表示
* Web Push通知の購読
* 新規投稿公開時の通知送信
* WooCommerce商品の新規公開時の通知送信
* 通知対象の選択
* 通知文言のカスタマイズ
* テスト通知送信
* Service Worker再生成
* PWAキャッシュ削除の指示

---

## ホーム画面に追加できるようにしました

スマホでブログを見た時に、「ホーム画面に追加」ボタンを表示できるようにしています。

ボタンを押すと、端末に応じた案内が表示されます。

iPhoneの場合は、Safariの共有ボタンから「ホーム画面に追加」を選ぶ案内を表示します。

Androidの場合は、Chromeのメニューから「ホーム画面に追加」または「アプリをインストール」を選ぶ案内を表示します。

最初は大きな案内を自動で出していましたが、読みやすさを優先して、現在はボタンを押した時だけ案内を表示する形にしています。

---

## ホーム画面から開いた時は通知ボタンに変わります

通常のブラウザで見ている時は、

```text
ホーム画面に追加
```

というボタンを表示します。

ホーム画面に追加したあと、ホーム画面のアイコンから開くと、

```text
ブログの新着投稿を通知で受け取る
```

というボタンに変わります。

このボタンを押すと、スマホ側で通知の許可が求められます。

許可すると、

```text
通知受け取り中
```

という表示に変わります。

解除したい場合は、同じボタンから通知購読を解除できるようにしています。

---

## 新規投稿だけ通知します

通知が多すぎると、見ている人の負担になります。

そのため、通知は基本的に「新しく公開された時」だけ送るようにしています。

ブログの場合は、通常投稿が新規公開された時だけ通知します。

通知する例はこちらです。

* 下書きから公開
* 予約投稿が公開時刻になって公開
* 非公開から公開

逆に、以下の場合は通知しません。

* 公開済み記事の編集
* 誤字修正
* 固定ページの更新
* 自動保存
* リビジョン

「ちょっと修正しただけで通知が飛ぶ」ということがないようにしています。

---

## WooCommerceの商品通知にも対応

ブログだけでなく、通販サイトでも使えるように、WooCommerceの商品通知にも対応しました。

管理画面では、通知対象を選べます。

```text
□ ブログの新規投稿
□ WooCommerceの新商品
```

ブログだけのサイトなら「ブログの新規投稿」だけ。

通販サイトなら「WooCommerceの新商品」だけ。

通販サイトでブログも運営している場合は、両方にチェックを入れることで、ブログ記事と新商品の両方を通知できます。

商品通知も、公開済み商品の価格変更や説明文の修正では通知しません。

新商品として初めて公開された時だけ通知する方針です。

---

## 通知文言も変更できます

通知の文言は、管理画面から変更できます。

たとえばブログの場合は、

```text
新着投稿のお知らせ
{site_name}が新着投稿「{title}」を公開しました。
```

商品の場合は、

```text
新商品のお知らせ
{site_name}が新商品「{title}」を公開しました。
```

のように設定できます。

`{site_name}` にはサイト名、`{title}` には投稿タイトルや商品名が入ります。

通知をタップすると、該当する投稿ページや商品ページを開くようにしています。

---

## テーマに依存しにくい形にしています

今回のプラグインは、特定のテーマ専用ではなく、できるだけ汎用的に使えるように作っています。

ボタンの表示、通知購読、Service Worker、マニフェスト出力などは、プラグイン側で完結するようにしています。

そのため、ブログ系サイトでも、WooCommerceを使った通販サイトでも、基本的には同じプラグインで使える構成を目指しています。

---

## 今後の予定

今後は、実際の運用で動作を確認しながら、必要に応じて機能を追加していく予定です。

たとえば、今後の候補としては、

* 通知ログの見やすい表示
* 通知失敗端末の整理
* 商品カテゴリごとの通知
* 管理者向け通知
* コメント通知

などが考えられます。

ただし、通知は多ければ良いというものではないので、まずは「新規投稿」と「新商品」に絞って、必要な情報だけを届ける形にしています。

---

## まとめ

今回作ったPWAプラグインによって、WordPressサイトをスマホのホーム画面から開けるようにし、新規投稿や新商品の通知も受け取れるようになりました。

ブログとして使う場合は、新着投稿のお知らせ。

通販サイトとして使う場合は、新商品の案内。

その両方にも対応できるようにしています。

まだ検証しながら育てている段階ですが、WordPressサイトを少しアプリっぽく使えるようにする、自作PWAプラグインとして整えていく予定です。

---

今後の方針まで作文してくれたけど

もう機能拡張はしないわん🐶

通知は最低限だけで十分だし

このプラグインがあればクライアントから「通知できるようにしたい」と依頼があってもすぐに対応できる

業務効率化やで！

あとは、この投稿を公開して僕のスマホに通知が飛べば完成

飛ばなかったらまたひんだれます👻