2014年1月5日 星期日

HTML5 : 將 WebApps 放到 Google Drive

HTML5 開發的程式只要指定「manifest」,並且在這個純文字的設定檔中設定得當,就可以在離線時,正常的載入類似 .js、.html、圖片檔 ...... 等可離線使用的檔案,這部份,之前曾寫過一小篇筆記(雄 : HTML5 : CACHE MANIFEST 離線使用與快取)。不過,前題是這個「manifest」的檔案必須由 web server 以「text/cache-manifest」的 MIME type 送出來,不然,HTML5 的程式是不會「買單」的。

Google Drive 有提供「webpages hosting」的功能,只要我們在 Google Drive 中,將某個資料以「公開在網路」的方式「共用」,就可以得到一個專屬的網址,而放在該資料夾內的網頁及相關檔案就可以像一般網站一樣,讓別人瀏覽與存取。不過,試了一下,在 Google Drive 中,一般常見的 manifest 附檔名「.manifest」、「.appcache」並不被 Google Drive 以「text/cache-manifest」的 MIME type 送出來。

沒關係,Google 有個強大的「Apps Script」服務,我們可以利用它來產生新的檔案,內容就放 manifest 該放的設定,而檔案的 MIME type 就自己指定為「text/cache-manifest」。修修改改,乾脆讓這個 standalone 的 Google Apps Script 自動去搜尋放 WebApp 的目錄中搜尋檔案,自動更新內容。只要 WebApp 有更動,在 Apps Script 中按一個「Run」的按鈕後,只要等著驗收成果就好,不用再自己維護 manifest 的檔案。


程式在下面的連結中可以看到,使用時,將程式碼貼到自己在 Google Drive 中建立好的空白「指令碼」文件中,然後將參數的部份修改為自己的,即可執行測試:



使用這個 Google Apps Script 之前,必須先修改以下幾個參數:

  • folderId:放 WebApp 的資料夾 ID,可以由「共享」後的連結中查出來,又臭又長的那串字。
  • thisScriptFileName:看自己新增的「指令碼」文件,命名為什麼就填入什麼,主要是想避免這個檔案列入 manifest 中,如果它沒有和 WebApps 放到同一個目錄中,就不需要設定。
  • manifestFilename:設定 manifest 檔案的檔名,要看 HTML5 網頁中的設定,屆時會先將 WebApp 目錄中的該檔案刪除,最後再以此檔案新增。因此,必須改為自己需要的。
  • excludedFiles:哪些檔案不想列入 manifest 快取清單的,就在這個參數中設定。程式找到符合這個參數中設定的檔案名稱就會自動略過。
我的「更新快取設定檔.gs」的截圖

參數都設定完以後,在上方選取「startFromThis」的 function,然後按「Run」的小圖示或是選單中的「執行」→「startFromThis」來測試。如果順利的話,在 WebApp 的目錄中應該會多出「manifestFileName」中指定的檔名。可以開啟該檔案,檢查一下輸出的內容是否正確。




相關文章










沒有留言:

張貼留言

 
© 2009. Design by Pocket