دروس أساسيات HTML5

API لـ HTML5

وسائط HTML5

صور HTML5

عمال الشبكة في HTML5 قاعدة البيانات المحلية في HTML5

تخزين التطبيقات في HTML5

من خلال استخدام HTML5، يمكن إنشاء نسخة غير متصلة بالإنترنت للتطبيقات الويب بسهولة عن طريق إنشاء ملف ملف التخزين المؤقت (cache manifest)، مما يعني أن التطبيقات الويب يمكنها التخزين على الجهاز وتصفحها دون اتصال بالإنترنت.

ما هو تخزين التطبيقات (Application Cache)

يقدم HTML5 ميكانيكية تخزين التطبيقات التي تسمح للتطبيقات القائمة على الويب بالتشغيل دون اتصال بالإنترنت. يمكن للمطورين استخدام واجهة Application Cache (AppCache) لتحديد الموارد التي يجب على المتصفح حفظها واستخدامها من قبل المستخدمين دون اتصال. حتى عندما يكون المستخدم في حالة عدم الاتصال، يمكن للتطبيق التحميل والعمل بشكل طبيعي عند النقر على زر تحديث الصفحة.

يقدم التخزين المؤقت للتطبيقات ثلاثة مزايا للاستخدامات التطبيقية:

تصفح دون اتصال - يمكن للمستخدمين استخدامها عندما يكون التطبيق غير متصل بالإنترنت
السرعة - يتم تحميل الموارد المحفوظة بسرعة أكبر
تقليل حمل الخادم - سيقوم المتصفح بتحميل فقط الموارد التي تم تحديثها أو تغييرها من الخادم.

ما المتصفحات التي تدعمها

يدعم متصفحات Internet Explorer 10, Firefox, Chrome, Safari و Opera ميزة التخزين المؤقت للتطبيقات.

مثال على Cache Manifest لـ HTML5

في هذا المثال، يُظهر لنا كيف يمكن عرض مستند HTML يحتوي على ملف ملف التخزين المؤقت (cache manifest) للتصفح دون اتصال بالإنترنت:

مثال على الإنترنت

مثال

!DOCTYPE　HTML
<html　manifest="demo.appcache">
	<body>
	文档内容......
	</body>
	</html>

测试看看 ‹/›

Cache Manifest 基础

如需启用应用程序缓存，请在文档的<html> 标签中包含 manifest 属性：

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。

manifest 文件的建议的文件扩展名是：".appcache"。

请注意，manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。

Manifest 文件

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。

manifest 文件可分为三个部分：

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

CACHE MANIFEST

第一行，CACHE MANIFEST，是必需的：

CACHE MANIFEST
/style.css
/logo.png
/main.js

上面的 manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，以及一个 JavaScript 文件。当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与网络断开连接，这些资源依然是可用的。

NETWORK

下面的 NETWORK 小节规定文件 "login.php" 永远不会被缓存，且离线时是不可用的：

NETWORK:
login.php

可以使用星号来指示所有其他资源/文件都需要网络连接：

NETWORK:
*FALLBACK

下面的 FALLBACK 小节规定如果无法建立网络连接，则用 "offline.html" 替代 /html5/ 目录中的所有文件：

FALLBACK:
/html/　/index.html

注意: 第一个 URI 是资源，第二个是替补。

更新缓存

一旦应用被缓存，它就会保持缓存直到发生下列情况：

用户清空浏览器缓存
manifest 文件被修改（参阅下面的提示）
由程序来更新应用缓存

完整的 Manifest 文件示例

CACHE MANIFEST
#　2018-02-21　v1.1.1
/style.css
/logo.png
/main.js
NETWORK:
login.php
FALLBACK:
/html/　/index.html

نصيحة:السطر الذي يبدأ بـ "#" هو سطر التعليق، ولكن يمكن استخدامه لأغراض أخرى أيضًا. يتم تحديث المخزن المؤقت للتطبيق عند تعديل ملف الmanifest. إذا قمت بتغيير صورة أو تعديل دالة JavaScript، لن يتم تخزين هذه التغييرات مرة أخرى. تحديث تاريخ السطر التعليقي ورقم النسخة هو طريقة واحدة لجعل المتصفح يخزن مرة أخرى.

ملاحظة حول تخزين التطبيقات

لاحظ محتويات المخزن المؤقت.

بمجرد أن يتم تخزين الملف، سيستمر المتصفح في عرض النسخة المخزنة، حتى لو قمت بتعديل الملف على الخادم. لضمان تحديث المخزن المؤقت للمتصفح، تحتاج إلى تحديث ملف الmanifest.

ملاحظة: قد تكون قيود المخزن المؤقت في المتصفح مختلفة (قيود بعض إعدادات المتصفح هي 5MB لكل موقع).

عمال الشبكة في HTML5 قاعدة البيانات المحلية في HTML5