はい、meta タグapple-mobile-web-app-capable
と HTML5 Application Cache を使用してこれを行うことができます。発見したように、アプリをホーム画面に追加できます。この手法を使用すると、アプリもオフラインでフルスクリーンで実行されます。
これを HTML に追加します<head>
。
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
キャッシュを設定します。
に追加manifest="cache.manifest"
し<html>
ます。cache.manifest
何をキャッシュするかを定義するために使用するファイルの名前です。任意の名前を付けることができますが、実際には mine と呼んでいcache.manifest
ます。
<html lang="en" manifest="cache.manifest">
次に、Web サーバーの MIME タイプが次のように.manifest
設定されていることを確認します。
テキスト/キャッシュマニフェスト
次に、という名前のファイルを作成cache.manifest
し、アプリのルートに配置します。セクションの下に、CACHE
キャッシュするファイルを配置します (この場合はすべてのファイル)。*
「すべてのファイル」を意味するために使用することもできます。
リリースをプッシュするたびに、キャッシュ マニフェストのバージョン番号を変更します。ファイルの変更は機能しますが、バージョン番号はこれに最適なメカニズムです。
CACHE MANIFEST
#ver 1.0.0
CACHE:
app.html
app.css
app.js
次に、これをスクリプトの先頭onload
または同等のものに入れてください。
function updateVersion( event ) {
window.applicationCache.removeEventListener( 'updateready', updateVersion, false );
if ( window.applicationCache.status == window.applicationCache.UPDATEREADY ) {
//perhaps notify user here
window.applicationCache.swapCache();
window.location.reload();
};
};
if ( window.applicationCache ) {
window.applicationCache.addEventListener( 'updateready', updateVersion, false );
};