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はゲームの基本的な情報を記載します
{
"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のパッケージを作りましたのでこちらを使用すると、1つのコマンドで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のダウンロードをしていたファイルをキャッシュすることで、2回目以降の読み込みを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開発で参考になりそうな記事の一覧です。
入門
- PlayCanvas入門- モデルの作成~ゲームに入れ込むまで
- JavaScriptでスロットを実装する。【PlayCanvas】
PlayCanvas Editorに外部スクリプトを読み込む新機能が追加されたので開発方法を考える。- Reduxを組み込む
その他の記事はこちらになります。
その他関連
- PlayCanvasタグの付いた記事一覧
PlayCanvasのユーザー会のSlackを作りました!
少しでも興味がありましたら、ユーザー同士で解決・PlayCanvasを推進するためのSlackを作りましたので、もしよろしければご参加ください!
Author And Source
この問題について(PlayCanvasで作成したゲームをPWAにしてAndroid端末へインストールする), 我々は、より多くの情報をここで見つけました https://qiita.com/yushimatenjin/items/ace8f78f8878326417fb著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .