15

明確にするために、Web アプリはキャッシュしており、モバイル Safari でオフラインで正常に動作しています。

問題は、iOS 6.0.1 を実行している iPhone 4s と iPad 2 のホーム画面に追加された場合です。オフラインでは機能せず、インターネットに接続するためのネットワーク エラーが発生します。つまり、「MYWEBAPP を開けません。インターネットに接続されていないため、MYWEBAPP を開けませんでした」などです。

これを数時間デバッグしてきましたが、解決策が見つからないようです。コンソールにエラーは表示されず、Jonathan Stark のデバッグ コードを実行しています。

デスクトップの Safari、Chrome、および Firefox の開発者ツールで、オンラインとオフラインの両方でアプリをテストしました。Safari のデバイスを使用した Web Inspector と同様に。結果はiPhoneでもiPadでも同じです。どちらも Web アプリをキャッシュし、モバイル Safari で動作しますが、ホーム画面に追加された場合は動作しません。オフラインでもオンラインでもエラーはありません。

私の知る限り、ベストプラクティスを使用しています：

  1. 追加された HTML ヘッダー: <html manifest="photo.appcache">

    また、マニフェスト ファイルに cache.manifest と offline.manifest などの異なる名前を使用して実験しましたが、違いがあることを読んでいますが、私のテストでは、拡張子が .マニフェストまたは .appcache に保存され、.htaccess ファイルで適切に提供されます。

  2. 正しい MIME タイプを追加しました: AddType text/cache-manifest appcache manifest

    私も試しました：AddType text/cache.manifest manifest、、 AddType text/cache.manifest .manifest manifestAddType text/cache-manifest .manifest

    これがうまくいっAddType text/cache.manifest たとは思いませんが、覚えていません。ほとんどの場合、それは問題ではなく、私は固執しました：

    AddType text/cache-manifest appcache マニフェスト

    それが HTML5 Mobile Boilerplate にあったものです。

  3. 追加した：

通信網： *

appcache ファイルに。これにより、すべてをダウンロードできるだけでなく、すべてのリンクを機能させることができると思います。

  1. 私はこの行を削除しようとしました: <meta name="apple-mobile-web-app-capable" content="yes"> SO でここを読んだので、私のものと同様の問題が解決されましたが、私のテストでは機能しないことを確認できます。この行を削除するか、ホーム画面のアイコンを押すときにコンテンツを「いいえ」に設定すると、Mobile Safari にリダイレクトされ、フルスクリーンで開かれなくなります。

iOS 6 のバグ (私は実際に iOS 6.0.1 を使用しています) にかなり絞り込みました。これは、ブラウザーの Web アプリとホーム画面に追加されたアプリのデータが分離されていることがわかっているためです。 . この問題をここに投稿して、他の開発者が同じ問題に遭遇したかどうかを確認します。

4

4 に答える 4

15

この問題は解決しました。iOS 6のホーム画面のWebアプリには、次のことをお勧めします。

テストの目的で、WebInspectorとJonathanStarkのような優れたJSスクリプトを使用して、アプリがMobileSafariにキャッシュされたことを確認します。

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

キャッシュが正常に完了したら、アプリをホーム画面に追加し、開いたままにして、ホーム画面のバージョンを個別にキャッシュできるようにします。オフラインで動作させるには、完全にキャッシュする必要があります。

私のアプリのキャッシュは22MBのデータであり、データのキャッシュはWebアプリでは個別であるため、ホーム画面アプリをキャッシュするのに十分な時間開いたままにしないことが問題でした。

これは、ユーザーエクスペリエンスに関してはひどいものですが、データが分離されていることも良いことです。SafariからWebサイトのデータを削除しても、ホーム画面のWebアプリは引き続き機能するため、これを確認できます。

私の知る限り、ホーム画面のWebアプリ用にキャッシュされたデータ、またはデータが保存されている場所をデバッグする方法はありません。

于 2012-11-09T18:43:55.850 に答える
1

上記の回答は非常に役に立ちました。@aul は、ホーム画面の Web アプリをデバッグする方法がわからないと言っていましたが、私は方法を見つけました。

iPad または iPhone をコンピューターに接続し、Safari で [開発] > [デバイス] に移動して、デバイスを選択します。ドロップダウンメニューに表示するには、ホームスクリーンアプリが開いている必要があります。アプリにアクセスしたら、エラー コンソールを開いて、Jonathan Stark のスクリプトが動作するのを確認できます。マニフェストがダウンロードされると、アプリをオフライン モードで使用できるようになります。

于 2013-01-23T22:15:40.773 に答える
1

このスクリプトにより、作業が楽になりました。@ポールに感謝！

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);
于 2013-08-20T18:32:38.123 に答える
0

私は2つの部分の問題を抱えていました。ASP.NET MVC/Razor を使用してキャッシュ マニフェストを生成していました。これは、仮想アプリケーションからサイトを簡単にホストし、パスを並べたままにしたかったためです。キャッシュ マニフェストでコンテンツ タイプが適切に設定されていなかったため、Internet Explorer と Safari (iOS) はそれを認識していませんでした (PC と Android の Chrome では認識されますが)。

この問題を解決しても、iOS Safari を使用して Azure でホストされているアプリにアクセスしようとすると、まだ機能しませんでした。Internet Explorer でアクセスしようとすると、使用しているフォントの MIME タイプが正しくないことがわかりました。

警告の言葉: マニフェストだけでなく、マニフェストが依存するすべてのファイルの MIME タイプを絶対に確認してください。

于 2015-05-08T18:36:29.237 に答える