【コピペでOK】PWA Builderを使用し速攻でPWAにする
僕はスマートフォンアプリの開発はできないのですが、どうにかして既存のウェブサイトをアプリっぽくしたい、という状況にありました。
理由としては、ユーザーとの接触回数を手軽に増やし、高速で動作させ、審査というものを回避したかったからです。
もともとPWAについては知っていましたが、そう簡単には実装できないと思っていたため、半ば諦めていたのです。
が、調べてみると意外と簡単にできるようだったため、早速実装してみることにしました。
今回使った方法で、僕のウェブサイト（https://keisukekuribara.com/）も勿論PWA化させています。
PWAとは
そもそもPWAとは何かというところですが、『Progressive Web Apps』の略称であり、ウェブサイトをGooglePlay StoreやAppStoreにあるようなスマートフォン向けアプリのように使える仕組みです。
詳細は、Google DEVが公開している『はじめてのプログレッシブウェブアプリ』を見てもらえれば良いと思います。
ここでは、PWAによる天気予報アプリの実装方法を解説しています。
メリット
GooglePlay StoreやAppStoreではそれぞれの仕様に合うよう別途開発しなければなりませんが（React Nativeなどを使えば楽になる）、PWAはウェブサイトをインストールできるようにするだけなので、コストがかからず、かつ訪問者のユーザービリティーとリテンションレートを上げることができます。
また、アプリの審査がないことも大きなメリットです。
PWAにすることのメリットをいくつか上げてみましょう。
- サイトの高速化
- オフライン対応
- 通知
などなど、最低限のアプリっぽさを演出するのには十分です。
PWAを利用し良い効果が得られた例は以下の通りです。
TwitterLite
通信速度の遅い地域でも利用できるよう、非常に軽量な仕様で作られたTwitterLiteはPWAにより実装されています。
- セッションあたりのページビューが65％増加
- ツイートが75％増加
- 離脱率が20％減少
日経電子版
皆さんご存知の日経電子版も、速度改善のためPWA化されています。
- モバイルに比べパフォーマンスが2倍に改善
- PC版と比べるとSpeed IndexとStart Renderが3分の1に短縮
SUUMO
物件検索サイトのSUUMOです。
多くの利用者がモバイルだそうです。
- 読み込み時間が75%減少
- プッシュ通知の開封率は31％
多くの人が利用している画像共有SNSのInstagramもPWA化されています。
余談ですが、PWA版のInstagramには広告が出ないので、UXはPWA版の方が圧倒的に良いです。
僕はアカウント切り替え機能だけアプリを使っています。
デメリット
デメリットというか、どこを妥協するかという論点です。
AppStoreやGoogle Play Storeには掲載されないので、アプリ検索による流入は生まれません。
そのため、偶然インストールされることは期待できません。
ほか、ios版SafariはAndroid版Chromeよりも対応が遅れています。
ただ、iosのアップデートで大きく改善されているので、Appleが本気でPWAに対応させようという意思を感じます。
僕は何かに大きく依存するのが嫌いなので、ほぼすべてのサービスやアプリがウェブで完結する世の中になって欲しいです。
もしくは、ウォレットからブラウザに繋げばアカウント認証がいらないとかとか。
実装
実装方法を見ていきます。
PWA化させるには、ウェブサイトが以下の条件に対応している必要があります。
これは絶対条件です。
- HTTPS接続であること
- 有効なJSONのマニフェストが含まれていること（Web App Manifest）
- 有効なサービスワーカーを登録させること（Service Workers）
つまり、Web App ManifestとService Workersはこれから導入していくので、スタート地点では有効なSSL証明書が発行されてさえいれば良いです。
Web App ManifestとService Workersを生成するにあたり、非常に便利なサービスを使用します。
Microsoft（マイクロソフト）が提供しているPWA Builderです。
PWA Builderは、ウェブ画面上から「manifest.json」と「serviceWorker.js（pwabuilder-sw.js）」ファイルを自動生成してくれるサービスです。
表示されるファイルを、ウェブサイトが表示されているサーバーに作ってあげるだけです。
「Start」ボタンがある部分に対象となるURLを入れます。画像では、転送代行マッチングサービスであるBoujeey.comをPWA化させています（ワーカー集めるのが大変すぎたので閉鎖しました）。
Startを押すと、自動的に「manifest.json」と「pwabuilder-sw.js」という2種のファイルが生成されます。
各パラメーターに、自身の設定を入れてあげれば良いです。
Boujeeyの場合は、以下のようなmanifest.jsonファイルとなります。
Boujeey.comは画像ファイルをS3に保存しCloudfrontで配信しているので、「ICON」がURLでキレイに生成されました。
しかし、たとえば普通のWordPressサイトは、画像ファイルのURLが「/wp-content/uploads/hogehoge.png」のようになるはずです。
したがって、別のサービスでICONだけを生成する必要があります。
↓は、Boujeey.comのmanifest.json。
{"dir" : "ltr",
"lang" : "Japanese",
"name" : "Boujeey",
"scope" : "/",
"display" : "standalone",
"start_url" : "https://boujeey.com/?utm_source=home-screen&utm_medium=pwa",
"short_name" : "Boujeey",
"theme_color" : "transparent",
"description" : "Boujeey（ブージー）は郵送依頼サービスです。住所変更や書類転送にあたり、受け取れない事象を経験したことはありませんか。Boujeeyのワーカーに郵送を依頼することで解決しましょう。",
"orientation" : "any",
"background_color" : "transparent",
"related_applications" : "",
"prefer_related_applications" : "false",
"generated" : "undefined",
"icons" : [
{
"src": "/path",
"sizes": "270x270"
},
{
"src": "/path",
"sizes": "32x32"
},
{
"src": "/path",
"sizes": "192x192"
},
{
"src": "/path",
"sizes": "180x180"
}
]}
manifest.jsonの各パラメーター解説
lang
〈言語の指定〉
name
〈アプリの名前〉
short_name
〈短い名前〉
display
〈fullscreen、standalone、minimal-ui、browserからUIを選択〉
standaloneがアプリっぽくなる
start_url
〈PWAの起動URL〉
『/?utm_source=home-screen&utm_medium=pwa』をつけることでアクセス解析をしやすくする
theme_color
〈テーマカラー〉
description
〈アプリの概要〉
orientation
〈landscape、 portrait、anyなどが利用可能〉
縦横気にしない場合はany
background_color
〈背景色〉
related_applications
〈関連するアプリケーションのURL〉
prefer_related_applications
〈related_applicationsで指定された関連するアプリケーションを推奨するか否か〉
true・falseで指定
generated
〈undefinedで良い〉
ICON生成
ICONを生成するにに役立つのが、Web App Manifest Generatorです。
「↑ICON」部にアイコン（ホーム画面に追加されたときのイメージ）画像をアップロードすると、わざわざPX数を調整することなく「270×270」「32×32」「192×192」「180×180」などを生成してくれます。
超スグレモノ。
ZIPファイルがダウンロードされるので解凍し、FTPクライアントで指定のフォルダにアップロードしてあげます。
WordPressの場合、manifest.json、ICON、pwabuilder-sw.jsを置くのは、ドメイン直下の「wp-admin」「wp-content」「wp-includes」があるディレクトリです。
右クリックで新規ファイルの生成をおこない、manifest.jsonとpwabuilder-sw.jsを作ります。
manifest.jsonは先程生成されていたので、そのままコピペするだけです。
PWA Builderで生成されたpwabuilder-sw.jsをコピーし、FTPクライアントで作成したpwabuilder-sw.jsにペーストします。
勿論、ダウンロードしてローカルからサーバーにドラッグ&ドロップする形式でもOKです。
manifest.jsonとpwabuilder-sw.jsをドメインディレクトリにおいたので、もう完了みたいなものです。
あとは、それらのファイルをヘッダーで読み込むだけ。
ServiceWorkerページで生成される、上部に記述されたJavaScriptコードをコピーします。
コピーしたら、以下のように<head>内に読み込むコードを入れます。
<link rel='manifest' href='/manifest.json'>
<script>
#<script> tag:に記載されているコード
</script>
以上で、ホーム画面に追加するとネイティブアプリのように動くウェブアプリが完成です。
試しに、僕のウェブサイトをホーム画面に追加して起動させてみてほしいです。
URLバーは表示されず、ウェブよりもサクサクと動くアプリケーションになっているはずです。
PWAとネイティブアプリを比較
| PWA | ネイティブアプリ | |
| 速度 | 遅め | 早い |
| インストール | ブラウザからワンタップ | Storeから検索が必要 |
| 開発コスト | 低い | 高い |
| リリースとアプデ | 双方が任意 | 申請。アプデはユーザーが手動 |
| オフラインで動作 | ○ | ○ |
| 通知 | ○（Android、iPhoneはまだ） | ○ |
| iOS、Android | ワンソースで完結 | OSごとに開発が必要 |
| 全画面 | ○ | ○ |
IOSは、インストールを促すポップアップがまだ表示されません。
追記
Pwa Builderで生成されるService Workerは全部で4種ありますが、「Offline copy of pages」が一番うまく行きました。
const offlineFallbackPage = "ToDo-replace-this-name.html";「”ToDo-replace-this-name.html”」の部分を、「”/”」に変更してあげます。
↓のようにインストールできます。
Offline copy of pagesは、以下のような機能を提供してくれます。
アプリケーションのオフライン機能を拡張するソリューション。各ページのコピーがキャッシュに保存され、ビジターに表示されます。これにより、ビジターはオフライン中でも以前表示したページをロードできます。
Offline copy of pages
追記（2020/01/30）
PWA Builderがめっちゃアップデートされたらしい
新しい「PWABuilder」はレスポンシブデザインへの移行が完了し、モバイル端末やタブレットでも快適に利用できる。また、「Llama Pack」の開発チームと協力し、同ツールがバックエンドに組み込まれた。「Android Studio」などを利用しなくても、「PWABuilder」単体でPWAアプリに署名を施し、“Google Play”へ登録可能なパッケージを生成できる。
とのこと。
