web-dev-qa-db-ja.com

HTML5オフライン「アプリケーションキャッシュエラーイベント：マニフェストフェッチに失敗しました（-1）」

HTML5オフラインアプリケーションを作成しようとしていますが、Chromeでキャッシュマニフェストファイルを受け入れることができません。

Chromeは、アプリケーションの読み込み中に次の出力をコンソールに記録します。

Creating Application Cache with manifest http://localhost/cache.manifest
Application Cache Checking event
Application Cache Error event: Manifest fetch failed (-1) http://localhost/cache.manifest

ただし、最初の行を除くすべての行をマニフェストファイルから削除すると（つまり、「CACHE MANIFEST」）、Chromeはマニフェストを受け入れます。

Creating Application Cache with manifest http://localhost/cache.manifest
Application Cache Checking event
Application Cache Downloading event
Application Cache Progress event (0 of 0)
Application Cache Cached event

しかし、マニフェストに新しい行を追加するとすぐに（次の行が空であっても）Chromeは、フェッチが失敗したという不平に戻ります。

すべてのファイルは、Windows 7 PCからローカルにPythonポート80でSimpleHTTPServerを使用して提供されます。％PYTHON％/ Lib/mimetypes.pyのtypes_mapを次の行で更新しました：

    '.manifest': 'text/cache-manifest',

マニフェストには次のものが含まれている必要があります。

CACHE MANIFEST 
scripts/africa.js
scripts/main.js
scripts/offline.js
scripts/libs/raphael-min.js
favicon.ico
Apple-touch-icon.png
htmlmanifestoffline
16
Craig McDonnell

これらのファイルを提供するためにCherryPyに切り替えることで、この問題を解決しました:)

他の誰かが同様に行き詰まってサーバーの部分をシンプルにしたい場合は、次のPythonで開始できます。

import cherrypy


class SimpleStaticServer:

    @cherrypy.expose
    def index(self):
        return '<html><body><a href="index.html">Go to the static index page</a></body></html>'


cherrypy.config.update({
        # global
        'server.socket_Host': '192.168.0.3',
        'server.socket_port': 80,

        # /static
        'tools.staticdir.on': True,
        'tools.staticdir.dir': "(directory where static files are stored)",
    })
cherrypy.quickstart(SimpleStaticServer())

別のデバイスから「サイト」にアクセスする場合は、外部IPアドレスを使用する必要があります（私にとっては192.168.0.3でした）。それ以外の場合は、「server.socket_Host」の値に「127.0.0.1」を使用できます。次に、ブラウザーで http://192.168.0.3/index.html を指定して、静的なインデックスページを取得します。

0
Craig McDonnell

Webサイトをオフラインでキャッシュ（HTML5）するには、実行に必要なすべてのファイルを指定する必要があります。つまり、必要なサイトの主要コンポーネントを指定します。

マニフェストを作成する簡単な方法はメモ帳です。

注：キャッシュマニフェストは最初の行である必要があり、ファイルは次のように行スペースの後に続きます。

CACHE MANIFEST

Scripts/script.js
Content/Site.css
Scripts/jquery-ui-1.8.20.min.js
Scripts/modernizr-2.5.3.js
SESOL.png
Scripts/jquery.formatCurrency-1.4.0.min.js
http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css
http://code.jquery.com/jquery-1.8.2.min.js
http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js
Content/themes/images/icons-18-white.png
Controllers/AccountController
Controllers/HomeController
Models/AccountModels
Account/Login
Home/CheckOut

注2：各行の後のすべてのスペースを削除します。注：3 FOLDER/FileまたはFOLDER/FOLDER/FILEなどの正確な形式に従う必要があります。

マニフェストファイルがあるからといって、ロードされるわけではありません。以下をタグに追加する必要があります。

<html manifest="~/cache.manifest" type="text/cache-manifest">

これを追加した後、ページが初めて読み込まれたときにキャッシュされることを忘れないでください。したがって、「mobileinit」イベントにキャッシュイベントを登録する必要があります。

$(document).on("mobileinit", function () {
  //register event to cache site for offline use
cache = window.applicationCache;
cache.addEventListener('updateready', cacheUpdatereadyListener, false);
cache.addEventListener('error', cacheErrorListener, false);
function cacheUpdatereadyListener (){
    window.applicationCache.update();
    window.applicationCache.swapCache();
    }
    function cacheErrorListener() {
        alert('site not availble offline')
    }
}

Safariをダウンロードし、Webインスペクタを使用してエラーを見つけます。 http://developer.Apple.com/library/safari/#documentation/appleapplications/Conceptual/Safari_Developer_Guide/1Introduction/Introduction.html#//Apple_ref/doc/uid/TP40007874-CH1-SW1

ヒント：Chromeの開発者ツール「F12」を使用すると、マニフェストロードのエラーが表示されます。つまり、まだ追加する必要があるファイル。

これが役立つことを願って、プロセス全体をカバーします。私はあなたが開発のこの段階にあるなら、これらをモバイル初期化に追加するのが新しいと仮定します：

$.mobile.allowCrossDomainPages = true; // cross domain page loading
$.mobile.phonegapNavigationEnabled = true; //Android enabled mobile
$.mobile.page.prototype.options.domCache = true; //page caching prefech rendering
$.support.touchOverflow = true; //Android enhanced scrolling
$.mobile.touchOverflowEnabled = true; // enhanced scrolling transition availible in iOS 5

Safari開発者ガイド： https://developer.Apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/Client-SideStorage/Client-SideStorage.html#//Apple_ref/doc/uid/TP40002051 -CH4-SW4

15
Paul Styles

マニフェストを検証するために https://manifest-validator.appspot.com/ のようなものを試しましたか？

私はマニフェストファイルにかなり苦労してきましたが、何が問題なのかを特定するのは非常に困難です。先頭の余分な改行に対する誤ったエンコーディングのような単純なものである可能性があります。

9
gnur

今日、私はまったく同じ問題を経験しました。何時間も働いた後、重要なポイントであるマニフェストファイルの形式がわかりました。つまり、ファイルはascii（0D）やascii（0D + 0A）ではなく、ascii（0A）でのみ新しい行を開始する必要があります。この方法でのみChromeと共存できます。そうしないと、空白のページが表示され、コンソールウィンドウにエラー情報が表示されます。

W3c（http://www.w3.org/TR/html5/offline.html）によると、「5.6.3.2キャッシュマニフェストの書き込み」では、0A、0D、0D + 0Aの両方がすべて受け入れられます。だから、私の意見は：Chromeはw3cと互換性がありません。

さらに、たとえば、myapp.jsをキャッシュする場合は、同じルールに従う必要があります。ascii（0A）でのみ新しい行を開始するか、Chromeは同じ情報をコンソールウィンドウ。

私のChromeは13.0.782.107です

5
bobdong

私はこのリンクに出くわしました：

http://www.kaspertidemann.com/regarding-the-manifest-fetch-failed-error-in-chrome/

1
Chris

MVCアプリケーションのビジュアルスタジオでこの問題を解決しました。以下の手順に従ってください：

  1. メモ帳で.appcacheファイルを作成し、マニフェストファイルの内容をコピーしました。 （.Manifestファイルを作成する必要はありませんOR not create Manifest.cshtml view。not create .appcache file in notepad。）

  2. ビューで<html manifest="~/example.appcache">として参照を提供し、問題は解決されます

0
Bharat