PlayCanvasで作成したゲームをPWAにしてAndroid端末へインストールする


PlayCanvasで作成したプログラムをPWAにしてリソースをキャッシュする

はがです。

PWAアドベントカレンダーの記事となります

今回のデモはこちらになります。

コインドーザー
https://yushimatenjin.github.io/

PlayCanvasからダウンロードします

まずPlayCanvasで作成したプロジェクトをダウンロードします。

ダウンロードされたファイルについて

PlayCanvasからダウンロードされたファイルは、index.htmlを始めとする静的なファイルが入っているものになります。

PWA対応のウェブサイトを作る

PlayCanvasで作ったゲームをPWAに対応させるために2つのファイルを追加します。

  • serviceWorker.js
  • manifest.json

manifest.jsonはゲームの基本的な情報を記載します

manifest.json
{
  "name": "コインドーザー",
  "short_name": "コインドーザー",
  "icons": [
    {
      "src": "https://yushimatenjin.github.io/logo192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "https://yushimatenjin.github.io/",
  "display": "standalone",
  "background_color": "#f16625",
  "theme_color": "#f16625"
}

serviceWorker.jsにはキャッシュについてを記述します。

serviceWorker.js

    var CACHE_NAME = 'coin-dozer-version-1';
    var urlsToCache = [
    キャッシュするファイル....
    ];

    self.addEventListener("install", function(event) {
      event.waitUntil(
        caches.open(CACHE_NAME).then(function(cache) {
          return cache.addAll(urlsToCache);
        })
      );
    });

    self.addEventListener("fetch", function(event) {
      event.respondWith(
        caches.match(event.request, {
            ignoreSearch: true
        }).then(function(response) {
          if (response) {
            return response;
          }
          return fetch(event.request);
        })
      );
    });


serviceWorker.jsを一瞬で作る

playcanvas-toolsというnpmのパッケージを作りましたのでこちらを使用すると、1つのコマンドでserviceWorker.jsを作ることができます。

ソース
https://github.com/yushimatenjin/playcanvas-cli

npm

npx

cd PlayCanvasのプロジェクトを解凍したフォルダ
npx playcanvas-tools sw --name キャッシュ名

PlayCanvas特有の問題

PlayCanvasはロードするたびにクエリーストリングを追加します。そのURLについてもキャッシュを適用させるためにcaches.match無視するオプションを追加します。

serviceWorker.js
caches.match(event.request, {
        ignoreSearch: true
})
serviceWorker.js
self.addEventListener("fetch", function(event) {
  event.respondWith(
    caches.match(event.request, {
        ignoreSearch: true
    }).then(function(response) {
      if (response) {
        return response;
      }
      return fetch(event.request);
    })
  );
});

このオプションを追加することでキャッシュから呼び出されるようになります。

index.htmlからServiceWorkerを読み込むコードを追記する

index.htmlのHead内にこちらのコードを追加します。

index.html
<script>
    if ("serviceWorker" in navigator) {
      navigator.serviceWorker
        .register("./serviceWorker.js")
        .then(function(registration) {
          if (typeof registration.update == "function") {
            registration.update();
          }
        })
        .catch(function(error) {
          console.log("Error Log: " + error);
        });
    }
  </script>

キャッシュ無し

キャッシュ有り

キャッシュをしないと28.1MBのダウンロードをしていたファイルをキャッシュすることで、2回目以降の読み込みを24.2KBまでにすることにできます。

インストールが可能になる

さらに下記の要件を満たすことでAndroidの端末へインストールすることができます。

  1. manifest.jsonに必要な要件を入れる
    • short_nameかname
    • icons 192pxか512px
    • start_url
    • display,fullscreen,standalone,minimal-uiのうちどれか
  2. HTTPSの設定
  3. fetchイベントハンドラをserviceWokerに追加する

Androidの表示

iOSの表示

Storeにも出せる

TWAと言われる形でビルドをすることでストアに出すこともできました。


PlayCanvas開発で参考になりそうな記事の一覧です。


入門


その他関連
- PlayCanvasタグの付いた記事一覧

PlayCanvasのユーザー会のSlackを作りました!

少しでも興味がありましたら、ユーザー同士で解決・PlayCanvasを推進するためのSlackを作りましたので、もしよろしければご参加ください!

日本PlayCanvasユーザー会 - Slack