Chromeで1つのHTML Webページをオフラインで使用できるようにするにはどうすればよいですか？

Question

私は自分のウェブサーバー上に単一のHTML Webページ（.htmlファイルに含まれるすべてのデザイン要素）をホストしています。オフラインのときにそのユーザーを利用できるようにしたいと考えています。これは次のように動作するはずです。ユーザーがオンラインになると、彼は私のWebページにアクセスし、Chromeは.htmlファイルをローカルに保存します。ユーザーがオフラインで自分のウェブページにアクセスしようとすると、Chromeは代わりにローカルの.htmlファイルを使用しています。 JavaScriptはオフラインモードでもWebページ上で動作する必要があります。ユーザーはを見たことがありません。私のページにアクセスするとオフラインエラーメッセージが表示され、保存したページのコピーが少なくとも2週間はブラウザのキャッシュから期限切れにならないようにしてください。 Chromeの設定を変更する必要はなく、Chrome拡張機能をインストールする必要はありません。これは可能ですか？

付属のJavaScriptは、スマートで、ユーザーがオンラインになるとすぐにデータを保存し、サーバーと同期させるのに、window.localStorageを使用するのに適しています。

Answer 1

私はこれを自分でやったことはありませんが、キャッシュAPI（サービスワーカーAPIの一部）を使用してURLアドレス可能なリソース（htmlファイルなど）を格納できます。

HTTPヘッダーは、2週間以上経過すると期限切れになるように設定できます。しかし、誰かが自分のキャッシュをクリアした場合（ブラウザーの履歴を削除した場合など）は消えます。ここで

https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/offline-for-pwa

ガイドです--->https://davidwalsh.name/cache

Answer 2

このページには、それをやっているようだ：https://chris.bolin.co/offline/。 FirefoxとChromeで動作します。 Chromeでは、サービスワーカーを使用しているようです。 Firefox 55はサービスワーカーも使用できます。

サービスワーカーは、キャッシュAPIを使用してページをダウンロードできます。キャッシュAPIはFirefoxでユーザーのCookieを使用しないため、キャッシュされる内容はユーザーに表示される内容と異なる場合があります。

Firefoxでは、ファイル/オフライン作業でオフラインモードを有効（強制）にすることができます。

Chromeでは、デベロッパーツールの現在のタブ（Ctrl-Shift- J）でオフラインモードを有効（強制）にすることができます。[ネットワーク]タブでオフラインを有効にします。

Firefox 55では、オフラインキャッシュがデフォルトで機能するようです（manifest.jsonは不要です）。 Chromeでページをオフラインで利用できるようにするには、サービスワーカーが必要です。ここで

はJavaScriptでオフラインモードを検出する方法である：

<script>document.write('navigator.onLine=' + navigator.onLine);</script>