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

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

もともと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化させている。

PWA

Startを押すと、自動的に「manifest.json」と「pwabuilder-sw.js」という2種のファイルが生成される。

各パラメーターに、自身の設定を入れてあげれば良い。

PWA

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クライアントで指定のフォルダにアップロードしてあげれば良い。

Web App Manifest Generator

WordPressの場合、manifest.json、ICON、pwabuilder-sw.jsを置くのは、ドメイン直下の「wp-admin」「wp-content」「wp-includes」があるディレクトリ。

右クリックで新規ファイルの生成をおこない、manifest.jsonとpwabuilder-sw.jsを作る。

manifest.jsonは先程生成されていたので、そのままコピペするだけ。

PWA

PWA Builderで生成されたpwabuilder-sw.jsをコピーし、FTPクライアントで作成したpwabuilder-sw.jsにペーストする。勿論、ダウンロードしてローカルからサーバーにドラッグ&ドロップする形式でもOKだ。

PWA

manifest.jsonとpwabuilder-sw.jsをドメインディレクトリにおいたので、もう完了みたいなもの。あとは、それらのファイルをヘッダーで読み込むだけ。

ServiceWorkerページで生成される、上部に記述されたJavaScriptコードをコピーしよう。

PWA

コピーしたら、以下のように<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”」の部分を、「”/”」に変更してあげよう。

↓のようにインストールできる。

PWA

Offline copy of pagesは、以下のような機能を提供してくれる。

アプリケーションのオフライン機能を拡張するソリューション。各ページのコピーがキャッシュに保存され、ビジターに表示されます。これにより、ビジターはオフライン中でも以前表示したページをロードできます。

Offline copy of pages


株式会社Propagation代表取締役。興味対象は、ビットコイン、大麻、ウェブ、金融、生物、心理など。金融から健康、テック、音楽など様々な事について執筆しており、このブログは月間10万PV程度となっております。自身のアウトプットや知的好奇心を満たすことが主な目的です。お仕事の依頼や相談などお気軽にお問い合わせください。

— Previous arcticle

オプションと先物の違い

Next arcticle —

アダルトのディープフェイク（フェイクポルノ）が凄かった

You May Also Like
TheNewst Design
続きを読む
ウウェブ

ブックマークはこれ1つでOK。開発者、デザイナー、ブロガー向けの無料サービスをまとめて管理できるサイト”TheNewst Design”

フリーフォト、フリームービー、フリーアイコン、フリーイラスト、フリーオーディオ。。。 これらは、ソフトウェア開発やウェブサイトを運営する際によく使う。ブロガー、開発者、デザイナー、クリエイターなどは、良い素材を探すのに苦…