BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

NodeによるHTML5オフラインストレージ

2022-01-11 02:15:34

プリアンブル

オフラインでのWebアプリケーション開発をサポートすることは、HTML5の重要な焦点です。オフライン ウェブ アプリとは、デバイスがインターネットに接続されていないときでも実行できるアプリのことです。オフラインのウェブアプリケーションを開発するにはいくつかのステップが必要ですが、そのうちの1つは、特定のリソース（画像、JS、CSSなど）がオフラインでアクセス可能でなければならないことです。

HTML5ではアプリケーションキャッシュが導入され、Webアプリケーションはキャッシュされ、オフラインの状態でもアクセスできるようになりました。

pushpin:appのキャッシュは、アプリに3つの利点をもたらします。

  • オフラインブラウジング - ユーザーはアプリがオフラインの間、それらを使用することができます
  • スピード - キャッシュされたリソースの読み込みを高速化
  • サーバーの負荷軽減 - ブラウザは、更新または変更されたリソースのみをサーバーからダウンロードします。

原理と背景

  • オンラインの場合、ブラウザがレンダリングする際に <html manifest="test.manifest"> を取得するための要求が行われます。 test.manifest ファイルを作成し、初回訪問であれば、ブラウザは記述ファイル（CACHE MANIFEST）の内容に基づいて適切なリソースをダウンロードし、オフラインで保存します。既に訪問済みで、リソースがオフラインに保存されている場合、ブラウザはオフラインのリソースを含むページを読み込み、ブラウザは新しい manifest ファイルを古い manifest ファイルに変更がなければ何もせず、変更があればファイル内のリソースを再ダウンロードし、オフラインで保存します。
  • :triangular_flag_on_post: [注意事項】をご覧ください。］ このデモは、原理をより深く理解するためのデモです
  • オフラインの場合、ブラウザはオフラインで保存されたリソースを直接使用する
  • HTML5のオフラインストレージは、クッキーと同様にサーバー環境が必要であり、このデモでは、サーバーサイドにNode.js、Expressフレームワーク、art-tmplateを利用しています

説明ファイル

キャッシュにデータを残すには、ダウンロードとキャッシュの対象となるリソースを列挙したマニフェストファイル（description file）を使用する必要があります

マニフェストファイルは、3つのセクションに分けることができます。

  • CACHE MANIFEST - この見出しの下にリストされたファイルは、最初のダウンロードの後にキャッシュされます。
  • NETWORK - この見出しの下にリストされているファイルは、サーバーへの接続を必要とし、キャッシュされません。
  • FALLBACK - この見出しの下にリストされているファイルは、ページにアクセスできない場合（例：404ページ）のフォールバックページを指定するものです。
  • オンラインの場合、ユーザーエージェントは、ページにアクセスするたびにマニフェストを一度読み取ります。変更を発見した場合、リソースのリスト全体を再読み込みします。

構造

:triangular_flag_on_postです。 [注意事項】をご覧ください。］ ブラウザにキャッシュさせたいリソースは、すべて public static resources フォルダに配置します。

サーバーサイドの環境設定 

npm init //generate package.json manual file
npm i express // install express package
npm i --save art-template express-art-template // use art-tmplate
// entry file app.js
var express = require("express");
var app = express();
app.use('/public/', express.static('. /public/'))
app.engine('html', require('express-art-template'));
app.get('/', function (req, res) {
  res.render('index.html');
});
app.listen(3000, function () {
  console.log("app is running at port 3000.");
});

その他

offline.appcacheの記述ファイル 

CACHE MANIFEST
#v01
/public/image/01.jpg // Cache the first image

NETWORK:
*

FALLBACK:
/

index.html 

<!DOCTYPE html>
<html lang="en" manifest=". /public/offline.appcache">

<head>
  <meta charset="UTF-8">
  <title>HTML5 offline storage</title>
  <link rel="stylesheet" href="... /public/index.css">
</head>

<body>
  <img src=". /public/image/01.jpg" alt="">
  <img src=". /public/image/02.jpg" alt="">
</body>

</html>

結果

サーバーをオンにした状態

サーバーを閉じた後

変更 manifest サーバーに再接続後 

CACHE MANIFEST
#v01
/public/image/01.jpg
/public/index.css

NETWORK:
*

FALLBACK:
/

:triangular_flag_on_postです。 [注意事項】をご覧ください。］ 図の右側のコンソールの出力を見てください。マニフェスト ファイルが変更されたため、ブラウザは新しいマニフェスト ファイルと古いマニフェスト ファイルを比較して、ファイルが変更されたことを確認し、ファイル内のリソースを再ダウンロードしてオフラインに格納します。

再びサーバーを閉じた後

Nodeを使ってHTML5のオフラインストレージを実装する、という記事は以上となります。HTML5オフラインストレージの詳細については、Script Houseの過去の記事を検索するか、引き続き以下の関連記事を参照してください。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します