【コピペでOK】PWA Builderを使用しウェブサイトを速攻でPWAにする

- Advertisement -

僕はスマートフォンアプリの開発はできないのだが、どうにかして既存のウェブサイトをアプリっぽくしたかった。

理由としては、ユーザーとの接触回数を手軽に増やし、高速で動作させ、審査というものを回避したかったからだ。

もともとPWAについては知っていたが、そう簡単には実装できないと思っていたため半ば諦めていた。

が、調べてみると意外と簡単にできるようだったため、早速実装してみることにした。今回使った方法で、僕のウェブサイト（https://keisukekuribara.com/）も勿論PWA化させている。

PWAとは

そもそもPWAとは何かというところだが、『Progressive Web Apps』の略称であり、ウェブサイトをGooglePlay StoreやAppStoreにあるようなスマートフォン向けアプリのように使える仕組み。

詳細は、Google DEVが公開している『はじめてのプログレッシブウェブアプリ』を見てもらえれば良い。ここでは、PWAによる天気予報アプリの実装方法を解説している。

メリット

GooglePlay StoreやAppStoreではそれぞれの仕様に合うよう別途開発しなければならないが（React Nativeなどを使えば楽になる）、PWAはウェブサイトをインストールできるようにするだけなのでコストがかからず、かつ訪問者のユーザービリティーとリテンションレートを上げることができる。

また、アプリの審査がないことも大きなメリットだ。特に僕が運営している大麻観光を手軽にするというコンセプトの『HempOceans Tour』などは、大麻に関連しているのでアプリの審査は通らない。

PWAにすることのメリットをいくつか上げてみよう。

サイトの高速化
オフライン対応
通知

などなど、最低限のアプリっぽさを演出するのには十分。PWAを利用し良い効果が得られた例は以下の通り。

TwitterLite

通信速度の遅い地域でも利用できるよう、非常に軽量な仕様で作られたTwitterLiteはPWAにより実装されている。

セッションあたりのページビューが65％増加
ツイートが75％増加
離脱率が20％減少

日経電子版

皆さんご存知の日経電子版も速度改善のためPWA化されている。

モバイルに比べパフォーマンスが2倍に改善
PC版と比べるとSpeed IndexとStart Renderが3分の1に短縮

SUUMO

物件検索サイトのSUUMO。多くの利用者がモバイルだという。

読み込み時間が75%減少
プッシュ通知の開封率は31％

Instagram

多くの人が利用している画像共有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が「exapmle.com/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