PWA（Progressive Web Apps）という技術をご存知でしょうか？
これまでWebブラウザを介してのみ表示できていたWebページですが、PWAを導入することでアプリとして気軽に使いやすくすることができます。
今回は、 PWAの基本から導入方法までわかりやすく解説します。
PWAって何？
PWAとは Progressive Web Apps（プログレッシブ・ウェブ・アプリ） の略で、「Webサイトをアプリのように使えるようにする技術」です。
たとえば、スマホでよく見るサイトを思い出してください。
- ブラウザを開いてURLを入力してアクセスする
使うたびに通信が必要
こんな動作が普通ですが、PWAに対応すると……
- ホーム画面にアプリのようにアイコンを置ける
通信がなくてもある程度ページが表示される
起動が速く、アプリっぽい操作感
というメリットが得られます。
PWAを導入すると何ができるの？
PWAを導入することで得られる主なメリットは以下の通りです。
- ホーム画面から一発アクセス
→ ブラウザを開かなくてもOK - オフラインでも使える
→ 電波が弱い場所でもページが表示できる - プッシュ通知（応用機能）
→ 新着情報をスマホに通知できる - インストール不要
→ アプリストアからダウンロードしなくても利用できる
特にブログや店舗サイトの場合、「一度見てくれた人に便利な機能を提供したり、またアクセスしてもらいやすくなる」のが大きな強みです。
PWAに必要な要素をざっくりと解説
PWAの導入にはいくつか仕組みがあります。
- HTTPS対応（SSL）
URLが「http」ではなく「https」になっていること。わたらぼのサイトもhttpsに対応していますね。
https://wataro-garden.com/watarabo/ - Web App Manifest（マニフェストファイル）
「このサイトをアプリとしてどう表示するか」を定義する設定ファイルです。こちらをサイト内に設定しておきます。
例：アプリ名・アイコン・背景色などの仕様を網羅しています。 - Service Worker（サービスワーカー）
裏で動くJavaScript。キャッシュを保存してオフラインでも表示できるようにしたり、通知を処理したりする役割があります。
これだけ聞くと複雑に見えますが、WordPressを使用している場合はプラグインを入れるだけで簡単に実装できてしまいます！
WordPressでPWAを導入する方法
WordPressでPWAを導入するには、以下の手順でOKです。
（1）プラグインをインストール
代表的なものは次の2つ。
- Super Progressive Web Apps
- PWA for WP & AMP
どちらも無料で使えます。
（2）プラグインを有効化して設定
設定画面で以下を指定します。
- アプリ名（例：Watarabo Photo）
- アイコン画像（192px・512px推奨）
- テーマカラー（アプリの背景色）
- 起動時のURL（通常はトップページ /）
設定方法はセオリコ様の以下のページが参考になりました！
僕も自分のサイトで実装してみましたが、15分もかからずに対応できてしまいました…！あっさりしていて驚きました！
（3）スマホで確認
実際にスマホでアクセスすると、画像のように「ホーム画面に追加」ボタンが表示されます。
これをタップするとホーム画面にアプリボタンが配置され、ワンタッチで起動できるようになります。
アイコンの作成/背景の色アプリ起動時の背景の色は
実際に使ってみた感想
これまではandroid用のアプリ、ios用のアプリをそれぞれ開発する手法を学ぶ必要があったのですが、フロントエンドの知識を使ってアプリが作成できるのは驚きです！
例えば、javascriptを使ってイベントの出品管理アプリや撮影時のヒアリングアプリなども作成できてしまいます。今後も夢が膨らみますね！
まとめ
今回は「PWAって何？」から「WordPressでの導入方法」まで紹介しました。
- PWAは「Webサイトをアプリのように使える仕組み」
- HTTPS、マニフェスト、Service Workerが必要
- WordPressならプラグインで簡単に導入できる
- リピーター対策や集客アップに効果的
もしブログや店舗サイトを持っているなら、試しに導入してみる価値は大きいです。
「難しいプログラムはちょっと…」という方でも、WordPressなら本当に数クリックでできるので、ぜひチャレンジしてみてくださいね！
