web-dev-qa-db-ja.com

（HTML5）ブラウザーでのオフラインモードアプリは可能ですか？

ブラウザでアプリケーションinsideを構築することは可能ですか？アプリケーションとは：

1ブラウザとリモートアプリケーションサーバーの間に接続（オンラインモード）がある場合：

  • アプリケーションは通常のWebベースモードで実行されます
  • アプリケーションは、オフラインモードで使用するために、オフラインストレージにnecessaryデータを格納します（2）
  • オフラインモードからオンラインモードに再開されたときに、アプリケーションの同期/プッシュデータ（オフラインモード中にキャプチャされた）がサーバーに戻る

2ブラウザとリモートアプリケーションサーバーの間に接続なし（オフラインモード）がある場合：

  • アプリケーションは引き続き実行されます（javascript？）
  • アプリケーションはデータ（オフラインで保存される）をユーザーに提示します
  • アプリケーションはユーザーからの入力を受け入れることができます（そしてオフラインストレージに保存/追加します）

これは可能ですか？答えが「はい」の場合、構築中の（Ruby/Python/PHP）フレームワークはありますか？

ありがとう

html5offline-mode
45
ohho

はい、可能です。

  • アプリケーションをJavascriptで記述し、ブラウザがオフラインモードになっているかどうかを何らかの方法で検出する必要があります（最も簡単なのは、サーバーを時々ポーリングすることです）。 （編集：オフラインモードを検出するより良い方法については、コメントを参照してください）

  • アプリケーションが静的なHTML、JS、CSSファイルのみで構成されていることを確認します（または、ブラウザでオフラインモードでそれらを記憶できるように、スクリプトでキャッシュポリシーを手動で設定します）。ページの更新は、サーバーではなくJS DOM操作によって行われます（ExtJS http://www.extjs.com などのフレームワークが役立ちます）。

  • ストレージには、PersistJS（ http://github.com/jeremydurham/persist-js ）などのモジュールを使用します。このモジュールは、ブラウザーのローカルストレージを使用してデータを追跡します。接続が復元されたら、サーバーと同期します。

  • 使用する画像やその他のアセットを事前にキャッシュする必要があります。そうしないと、以前にそれらを使用しなかった場合、オフラインモードで使用できなくなります。

  • 繰り返しますが、アプリの大部分はJavaScriptである必要があります。サーバーに到達できない場合、PHP/Ruby/Pythonフレームワークはほとんど役に立ちません。サーバーはおそらく、RESTのようなAJAXデータを保存およびロードするためのAPIです。

40
wump

「Let's Take This Offline」の章 Mark Pilgrimの（オンライン）本の Dive Into HTML5 は、HTML5テクノロジーを使用したオフラインWebアプリの作成の非常に素晴らしい概要です。

注：Mark PilgrimのオリジナルのDive Into HTML5リンクはダウンしているようです。

コピーが見つかるようになりました here 他の場所。

15
hasseg

ジェイク・アーチボルドは「オフライン料理本」を書きました。 ServiceWorkerによる最新の（2014年12月9日）ニースのアプローチ：

http://jakearchibald.com/2014/offline-cookbook/

4
Johann Echavarria

2018年の答えは、サービスワーカーを活用し、プログレッシブWebアプリを構築することです： https://developers.google.com/web/progressive-web-apps/

1
Joe Zack

デモを含むhacks.mozilla.orgの記事は次のとおりです。 http://hacks.mozilla.org/2010/01/offline-web-applications/

別のデモ

より詳細なドキュメント： https://developer.mozilla.org/en/HTML/HTML5#Web_application_features

1
Nickolay

これも探していましたが、abt HTML5 Offline Web Apps を見つけました。逃したことはありません

一般的なオンラインWebアプリケーションのユーザーは、インターネットに接続している間のみアプリケーションを使用できます。オフラインになると、電子メールの確認、カレンダーの予定の閲覧、オンラインツールでのプレゼンテーションの準備ができなくなります。一方、ネイティブアプリケーションはこれらの機能を提供します。電子メールクライアントはフォルダーをローカルにキャッシュし、カレンダーはイベントをローカルに保存し、プレゼンテーションパッケージはデータファイルをローカルに保存します。

0
Jiew Meng

JavaScriptは、Webサイトオフラインモードのオプションを提供し、pUp Javascript Frameworkと呼ばれます。ユーザーが飛行機や20,000リーグの海上にいる場合でも、ユーザーが常にサイトにアクセスできるようにする小さなスクリプト。

<html>
<head>
  <meta charset="UTF-8">
  <title>Lonely Globe Advisor</title>
</head>
<body>
  <h1>Top Hotels in Rome</h1>
  <ol>
    <li>Villa Domus - Via Piacenza 9, Rome, Italy</li>
    <li>Hotel Trivelli - Piazza Barberini 11, Rome, Italy</li>
  </ol>
  <script src="/upup.min.js"></script>
  <script>
    UpUp.start({
      'content-url': 'offline.html',
      'assets': ['css/bootstrap.min.css', 'css/offline.css']
    });
  </script>
</body>
</html>

ユーザーがオフラインのときに表示するコンテンツは、offline.htmlのコンテンツです。これは単純なHTMLファイルであり、サイト上の他のページと同じです。

Offline.htmlファイルには、2つのcssファイルが含まれています：bootstrap.min.cssおよびoffline.css。ユーザーがオフラインのときにキャッシュされ、ユーザーが利用できることを確認しましょう

0
Tell Me How