PlayCanvasで作成したプログラムをPWAにしてリソースをキャッシュする
はがです。
PWAアドベントカレンダーの記事となります
今回のデモはこちらになります。
コインドーザー
https://yushimatenjin.github.io/
PlayCanvasからダウンロードします
まずPlayCanvasで作成したプロジェクトをダウンロードします。
ダウンロードされたファイルについて
PlayCanvasからダウンロードされたファイルは、index.htmlを始めとする静的なファイルが入っているものになります。
PWA対応のウェブサイトを作る
PlayCanvasで作ったゲームをPWAに対応させるために２つのファイルを追加します。
- serviceWorker.js
- 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にはキャッシュについてを記述します。
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のパッケージを作りましたのでこちらを使用すると、１つのコマンドでserviceWorker.jsを作ることができます。
ソース
https://github.com/yushimatenjin/playcanvas-cli
npm
npx
cd PlayCanvasのプロジェクトを解凍したフォルダ
npx playcanvas-tools sw --name キャッシュ名
PlayCanvas特有の問題
PlayCanvasはロードするたびにクエリーストリングを追加します。そのURLについてもキャッシュを適用させるためにcaches.match無視するオプションを追加します。
caches.match(event.request, {
ignoreSearch: true
})
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内にこちらのコードを追加します。
<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のダウンロードをしていたファイルをキャッシュすることで、２回目以降の読み込みを24.2KBまでにすることにできます。
インストールが可能になる
さらに下記の要件を満たすことでAndroidの端末へインストールすることができます。
- manifest.jsonに必要な要件を入れる
- short_nameかname
- icons 192pxか512px
- start_url
- display,fullscreen,standalone,minimal-uiのうちどれか
- HTTPSの設定
- fetchイベントハンドラをserviceWokerに追加する
Androidの表示
iOSの表示
Storeにも出せる
TWAと言われる形でビルドをすることでストアに出すこともできました。
- PlayCanvasのコードエディターでes6に対応する
- Gulpのプラグインを書いたらPlayCanvasでの開発がめちゃくちゃ便利になった
- PlayCanvas Editorに外部スクリプトを読み込む新機能が追加されたので開発方法を考える。- Reduxを組み込む
- React Native + PlayCanvasを使ってスマートフォンゲームを爆速で生み出す
- PlayCanvasのエディター上でHTML, CSSを組み込む方法
- 【iOS13】新しくなったWebVRの使い方
PlayCanvasのユーザー会のSlackを作りました！
少しでも興味がありましたら、ユーザー同士で解決・PlayCanvasを推進するためのSlackを作りましたので、もしよろしければご参加ください！