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 中建立好的空白「指令碼」文件中，然後將參數的部份修改為自己的，即可執行測試：

• https://drive.google.com/file/d/0B12NSU5QARH9OXU4NnlZMFFPQjg/edit?usp=sharing

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

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

我的「更新快取設定檔.gs」的截圖

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

相關文章

• 雄 : HTML5 : CACHE MANIFEST 離線使用與快取
• 雄 : HTML5 : Dropbox 的 Cache Manifest 檔名