基于HTML5的Web離線技術在技能訓練導學平臺中的應用

張永瑞 （連云港師范高等專科學校數學與信息工程學院，江蘇 連云港222006）

在線導學平臺中 “在線跟蹤學習”能夠在技能訓練實施過程中，學生接受任務后按照教師提供的要求和素材完成技能學習和訓練。在這一過程中，在線導學平臺可以對學生技能訓練的記錄進行保存，作為技能訓練的過程材料［1］。但是，學生在使用導學平臺進行技能訓練實施的過程中出現了以下問題：①網絡環境異常造成學習不能進行。“在線導學”的最大特征是學習者基于互聯網的學習環境開展學習。但是，在實際的網絡學習過程中，存在著諸多因素使得學習者可能無法始終保持在線狀態進行在線學習。比如學習者出現突發的網絡異常，或者學習者學習的網絡條件比較差，無法正常打開學習課件或提交作業等。②學習地點變動帶來學習資源丟失。技能訓練實施過程中教師提供的學習要求和素材往往需要從平臺中下載到本地計算機中，然后學習者按照要求對素材進行操作和訓練。若操作和訓練的時間有限、學習地點發生變動，之前下載的學習資源就需要學習者聯網后重新下載。這使得學習者與服務器之間的網絡交互變得頻繁。鑒于在線導學平臺中存在的問題，利用Web離線技術，筆者提出了離線學習形式，以此對在線學習形式進行補充。

1 離線學習需要的基本功能

離線學習是指學習者無須時刻保持在線狀態進行在線學習，而是將課程學習內容、進度等信息下載到本地計算機，以離線的形式完成課程的學習，并記錄學習進度的一種學習方式［2］。通常，學習者進行離線學習時需要平臺能夠提供以下功能：①登錄并選擇在線學習或者離線學習。在線狀態下，學習者可以將服務器上的學習內容及在線學習記錄下載到本地計算機，以便學習者能夠在離線的狀態下訪問這些數據。②學習者進入離線學習模塊，能夠借助瀏覽器訪問緩存中的學習內容、查詢學習記錄等。③在聯網狀態下，平臺能夠提供是否同步本地緩存中的數據 （學習內容、學習記錄等）的功能。即保證聯網的狀態下，保存在本地的數據與服務器上的數據能進行雙向更新，既可以用服務器上的數據更新保存在本地緩存中的信息，也可以把本地緩存中的數據更新到服務器上的數據庫中［3］。

2 離線學習的模型構建

在線導學平臺中的 “在線跟蹤學習”要在離線狀態下進行，必須解決數據的本地化存儲，同時要解決數據與服務器端數據的同步問題應用。Web離線技術開發的離線學習基本模型如圖1所示。

3 基于HTML5的Web離線技術的功能與實現

3.1 功能

基于HTML5的Web離線技術主要包括以下3個方面的功能：

1）在線狀態檢測 HTML5提供了navigator.online屬性和online／offline事件兩種檢測是否在線的方式，以便在網絡狀態發生變化時立刻得到通知。

2）離線資源緩存 HTML5需要設計者提供一個Cache Manifest文件。這個文件列出了所有需要在離線狀態下使用的資源，瀏覽器會把這些資源緩存到本地，讓用戶在離線狀態下繼續訪問Web應用。

3）本地數據存儲 離線狀態下，Web平臺需要對緩存中的數據進行存取，以便用戶訪問或者在聯網后同步到服務器。為了滿足不同的存取要求，HTML5提供了DOM Storage和Web SQL Data－base兩種存儲機制［4］。在不同的場合需要選擇不同的存儲機制來訪問數據。

圖1 離線學習基本模型

3.2 實現

1）離線學習登錄 學習者在登錄平臺時，根據實際情況選擇在線學習或者離線學習。離線狀態下，瀏覽器相應操作描述如下：瀏覽器請求訪問頁面；若發現該頁面已經進行本地存儲，則使用本地html頁面；解析本地html頁面，在本地緩存中提取所需資源。

2）在線學習資源的緩存 為了讓整個Web應用程序在沒有網絡的狀態下也能正常工作，必須把構成該應用的文件存放在本地緩存中。此時，即使計算機沒有聯網，也可以通過訪問本地計算機上的資源文件來完成Web應用程序提供的相關服務。Cache Manifest文件是一個位于服務器上的文件，這個文件列出了所有需要在離線狀態下使用的資源。在使用Cache Manifest文件時，首先要對服務器進行配置，讓所運行的服務器支持text／cache－manifest這個類型［5］。然后在需要進行離線存儲的 Welcome.html文件的＜html＞標簽里添加manifest屬性，并指定文件名。當學習者在線學習時，瀏覽器可以將Cache Manifest文件列出的所有資源文件緩存到本地計算機中。Cache Manifest文件中的內容如下：

3）離線學習資源的本地化存儲 學習者在離線狀態下，需要對保存在本地緩存中的數據進行存儲，來保證將新的學習記錄存放在本地數據庫中。HTML5提供的Web SQL Data－base存儲機制允許用戶在瀏覽器里面建立數據庫，然后將下載服務器數據保存到本地數據庫中，以便需要的時候直接從本地查詢。學習者在完成學習任務，使用導學平臺中 “標記已經學習”功能后，瀏覽器就把學習進度記錄到本地數據庫中。

創建數據庫的方法中4個參數分別為數據庫名、版本號、數據庫的描述和數據庫的大小。在本地數據庫中標記學習記錄的章節和時間的代碼如下［6］：

圖2 同步數據更新活動圖

4）離線學習過程的同步 服務器端與客戶端如何實現同步是離線Web應用最關鍵的地方之一。離線Web應用所訪問的數據有最新數據和過期無效數據之分。同步過程中的數據更新采取的策略如圖2所示。同步模塊中更新本地緩存還是更新數據庫可以通過檢查數據庫版本是否最新來完成判斷。更新本地緩存的方法如下：

4 結 語

基于HTML5開發的Web應用離線功能，在網絡出現異常的情況下，仍然可以實現數據的交互訪問和同步，主要解決了在線學習中學習者必須有良好的網絡環境支持的問題，適用于技能訓練的需要重復訓練的特征。同時，Web離線應用能夠降低服務器壓力，在高峰瀏覽期間保證了學習者學習效率。此外，離線學習形式能夠提高學習者學習的可控性和自主性，為遠程教育的發展提供了幫助。

［1］張永瑞，馬文杰 .在線導學平臺在多媒體技術專業學生技能訓練中的實踐探索 ［J］.荊楚理工學院學報，2011（7）：23－26.

［2］宋京燕 .遠程教育中離線學習的應用研究 ［J］.教師，2013（2）：102－103.

［3］羅大暉，陳娟 .基于HTML5的 Web離線應用研究與實現 ［J］.計算機應用與軟件 ［J］.2012（12）：262－264.

［4］蹇紅梅.WEB平臺下的基于HTML5標準離線應用開發 ［J］.四川理工學院學報，2012（5）：41－44.

［5］Pilgrim M.HTML5：Up and Running［M］.北京：電子工業出版社，2010.

［6］李娜 .基于RIA架構下的多媒體教學平臺本地存儲技術研究 ［J］.產業與科技論壇，2012（20）：74－76.