web-dev-qa-db-ja.com

オフラインiOS Webアプリ：マニフェストを読み込みますが、オフラインで動作しません

IOSでオフラインで使用するWebアプリを作成しています。マニフェストを作成し、text/cache-manifest、Safari内で実行する場合は通常正常に動作します。

ホーム画面にアプリとして追加し、機内モードをオンにすると、アプリをまったく開くことができません-エラーが表示され、アプリを閉じるように提案されます。 （これがオフラインアプリの全体的な目的だと思いました！）

  • オンライン時にアプリを初めて読み込むと、ログでマニフェストにリストされているすべてのページを要求していることがわかります。

  • 機内モードをオフにしてアプリをロードすると、リクエストしている最初のファイルがmain.htmlファイルであることがわかります（両方ともマニフェストにリストされ、manifest=...属性）。次に、マニフェストと他のすべてのファイルを要求し、すべてに対して200を取得します（このロード中に2回目の要求に対しては304を取得します）。

  • Chromeでページを読み込み、クリックすると、サーバー上で到達しようとしているのは「/favicon.ico」（404であり、iOS Safariが読み込もうとしないと思うログのみ）とにかく）。マニフェストにリストされているファイルはすべて有効であり、エラーなしで提供されます。

  • Chromeインスペクターは、「アプリケーションキャッシュ」の下に、リストされているすべてのキャッシュファイルをリストします。期待されるすべてのファイルセットは、オフラインリソースの制限の下で約50 KBです。見つけました。

これは機能するはずです、つまり、HTML/CSS/JSのみを使用してオフラインiOSアプリを作成できるはずですか？そして、オフラインで動作しない理由を理解するにはどこに行けばいいですか？

（関連しているが、スタンドアロンのアプリではなくSafariに関するものなので、私にはまったく同じようには聞こえません： " iPodでWebアプリをオフラインで動作させることはできません "）

html5iosios4mobile-safarioffline
73
Ken

「cache.manifest」という名前がIOS 4.3のオフラインキャッシュの問題を解決したことを確認します。他の名前は単に機能しませんでした。

22
Elvis Pfutzenreuter

HTML5オフラインアプリのデバッグは苦痛でした。この記事のコードは、アプリの何が問題なのかを理解するのに役立ちました。

http://jonathanstark.com/blog/2009/09/27/debugging-html-5-offline-application-cache/

Jonathan StarkによるHTML 5オフラインアプリケーションキャッシュのデバッグ

Webアプリへのオフラインアクセスを提供する場合、HTML5で使用可能なオフラインアプリケーションキャッシュは非常に優れています。ただし、特に頭を動かそうとしている場合は特に、デバッグするのは巨大なPITAです。

キャッシュマニフェストに苦労している場合は、次のJavaScriptをメインHTMLページに追加し、FirefoxのFirebugまたはSafariの[デバッグ]> [エラーコンソールの表示]を使用してコンソールで出力を表示します。

ご質問がある場合は、コメントにPLMKを記入してください。

HTH、
j

var cacheStatusValues = [];
cacheStatusValues[0] = 'uncached';
cacheStatusValues[1] = 'idle';
cacheStatusValues[2] = 'checking';
cacheStatusValues[3] = 'downloading';
cacheStatusValues[4] = 'updateready';
cacheStatusValues[5] = 'obsolete';

var cache = window.applicationCache;
cache.addEventListener('cached', logEvent, false);
cache.addEventListener('checking', logEvent, false);
cache.addEventListener('downloading', logEvent, false);
cache.addEventListener('error', logEvent, false);
cache.addEventListener('noupdate', logEvent, false);
cache.addEventListener('obsolete', logEvent, false);
cache.addEventListener('progress', logEvent, false);
cache.addEventListener('updateready', logEvent, false);

function logEvent(e) {
    var online, status, type, message;
    online = (navigator.onLine) ? 'yes' : 'no';
    status = cacheStatusValues[cache.status];
    type = e.type;
    message = 'online: ' + online;
    message+= ', event: ' + type;
    message+= ', status: ' + status;
    if (type == 'error' && navigator.onLine) {
        message+= ' (prolly a syntax error in manifest)';
    }
    console.log(message);
}

window.applicationCache.addEventListener(
    'updateready',
    function(){
        window.applicationCache.swapCache();
        console.log('swap cache has been called');
    },
    false
);

setInterval(function(){cache.update()}, 10000);
7
Bert F

MobileSafariでアプリケーションキャッシュグループが不適切な状態になる場合があります。キャッシュ内のすべてのアイテムをダウンロードし、最後に汎用キャッシュエラーイベントを発生させます。アプリケーションキャッシュグループは、仕様に従って、マニフェストの絶対URLに基​​づいています。このエラーが発生したときに、マニフェスト（cache2.manifestなど）へのパスを変更すると、新しいキャッシュグループが提供され、問題を回避できることがわかりました。 4.2および4.3では、すべてのWebアプリがフルスクリーンでオフラインで動作することを保証できます。

5
Joseph

機内モードを有効にした後にSafariキャッシュをクリアすると、アプリが実際にオフラインで機能しているかどうかを効果的にテストできることがわかりました。

私は時々、アプリケーションキャッシュが機能していなかったときに機能していたと思い込まされていました。

3
martypicco

Html headセクションで<meta name="Apple-mobile-web-app-capable" content="yes" />を使用している場合、オフラインWebアプリ（iOS 4.2の場合）はインターネット接続なしで実行できません（飛行機モードも意味します）。私はこれまでに見たすべての例と、Safariを使用してサイトをレンダリングする例でこれを検証しましたが、そのメタタグを挿入すると動作しません。それなしでアプリを試してみてください、あなたは私が何を意味するかを見るでしょう。

3
jsejcksn

IPadを4.2から4.3.1に更新してから、このiOS 4.3の「オフラインキャッシュなし」の問題に苦労していました。このサイトの別の投稿で、4.3.2で再び機能することを確認しました。そこで、iPadでiOS 4.3.3に更新しました。しかし、マニフェストファイルの名前を "cache.manifest"に変更するまで、オフラインキャッシュを機能させることはできませんでした。その後、キャッシュが再び機能し始め、ホーム画面からHTML5オフラインアプリを実行できました。キャッシュマニフェストにfavicon.icoを配置する必要はありませんでした。また、全画面表示（「Apple-mobile-web-app-capable」を「yes」に設定）しました。

2
CK Lee

開発中にこの問題に遭遇したので、私にとってはうまくいくと思われるこのソリューションを見つけました。この修正はこれまでのところ私とそれをテストするように頼んだ他の人々のためにうまく働きました、そして私はそれをオフラインで（飛行機モードで）走らせて、キャッシングなどでホーム画面をオフにすることができます。私は自分のサイトにそれについての記事を書きました：

http://www.offlinewebapp.com/solved-Apple-mobile-web-app-capable-manifest-error/

  1. ホーム画面で現在のWebアプリのアイコンを削除します。
  2. 設定に移動して、Safariブラウザーのキャッシュをクリアします。
  3. ホームボタンをダブルタップして、マルチタスクバーを開きます。 Safariを見つけて、指を押したままにして終了します。

これがあなたにも役立つかどうか教えてください！がんばろう！

1
Hellojeffy

WebserverのHTTP認証を使用して、iPhone/iPod TouchでオフラインWebアプリを動作させることに何日も悩まされた後、これらの有用なナゲットを発見しました。

  1. [ホーム画面に追加]をタップするときに、SafariがWebアプリのURLルートにあることを確認します。 jQuery Mobileを使用し、「/＃pageId」でリンクを追加することがありました。トラブルを引き起こしました。

  2. Ajax呼び出しをシリアルで実行します。これは、WebアプリがHTTP認証を使用している場合にのみ重要かもしれませんが、私のアプリはページの読み込み時に多数のAjax呼び出しを並行して実行し、「Apple-touch-startup-image」でハングしました。

  3. （少なくとも_Prototype.js_を使用して）オフラインの場合、Ajax呼び出しは「成功」します。 HTTPステータスだけでなく、Ajax応答の実際のデータをテストします。これを使用して、キャッシュ（SQL）またはライブデータの表示をテストしました。

  4. マニフェストで「NETWORK：\ n *\n」を使用します。私が召集できることからすると、これは「CACHE：」セクションで明示されていないものに対するキャッチオールステートメントです。 Chrome=を使用して、マニフェストが正しいことを確認します。Chromeのコンソールでエラーを確認します。

  5. 直接関係はありませんが、少し間違えましたが、openDatabase.transaction（）呼び出しは非同期です！つまり、トランザクション（execute()、error()、success()）の後のJSコードの行は、success()関数の前に実行されます。

がんばろう！

1
Chaz Meister Rock

今日、iOS 4.3で同じ問題に遭遇しました。 favicon.icoファイルを追加し、マニフェストに追加することで問題を修正できました。

1
Timo

4.2および4.2.1でも動作するように見えるオフラインアプリを作成しました。投稿は少し埃っぽいですが、コードはまだ実行されます：

http://kentbrewster.com/backchannel/

Remy Sharpには、ここでも機能するコードを含む新しい投稿があります。

http://remysharp.com/2011/01/31/simple-offline-application/

彼のアプリ：

http://rem.im/boggle/

1
Kent Brewster

アプリを作成しましたが、モバイルブラウザーで正常に機能しますが、デスクトップを追加するときに機能しません。 AppleはIOS4をあきらめ、すべての努力はOS5で行われています。

1
Graeme Leighfield

オフラインおよびオンライン/オフラインのWebアプリをいくつか使用しています。

空港モードをオフにすると、マニフェストと他のいくつかのファイルのリクエストを受け取ります。

画像、JavaScript、CSS、またはキャッシュされたAJAX=ファイル。

リソースに対するリクエストが表示された場合、IOS does n't）をキャッシュしてください。

一般に、Safariはマニフェストでよりうるさいです。

コンピューターでSafariを試すことをお勧めします。

1
JakeCigar