WebView 工作流程

發布日期：2014 年 2 月 28 日

網頁開發的其中一個優點，就是有豐富的工具可用來改善工作流程。

Grunt 就是這類工具的其中之一，這是一個 JavaScript 工作執行器，可讓您在建立可供正式發布的版本前，定義要在網路應用程式上執行的工作，包括編譯 Sass、啟動即時伺服器、壓縮圖片、壓縮 JavaScript 和執行 JSHint。

Yeoman 是一項工具，可協助您建立網頁應用程式、產生範本、從 Bower 和 npm 導入程式庫，以及建立含有預先定義工作群組的 Grunt 檔案。

在本教學課程中，您將使用 Yeoman 建立新的基礎網頁應用程式，然後將 Android Studio 建構系統 (Gradle) 與 Grunt 整合，以建構網頁應用程式。您也會設定 Grunt 工作，以便啟動本機即時重新載入伺服器，在瀏覽器中測試應用程式，這樣就不必每次變更 HTML、CSS 或 JavaScript 檔案時手動重新整理網頁。

必要條件

開始之前，您必須安裝一些必要條件：

  1. 安裝 Yeoman：https://github.com/yeoman/yeoman/wiki/Getting-Started
  2. 安裝 Android Studio：https://developer.android.com/sdk/installing/studio.html

步驟 1：在 Android Studio 中使用 WebView 建立新專案

如需完整的操作說明，請參閱入門指南。

步驟 2：建立網頁應用程式內容的子目錄

建立專案後，請建立新的頂層目錄。在 Android Studio 中，以滑鼠右鍵按一下專案資料夾，然後依序選取「New」 >「Directory」。

將目錄命名為 webapp。

步驟 3：在新目錄中建立 Yeoman 專案

在終端機中，將 cd 指向專案中的 webapp 目錄。

cd <path-to-project>/webapp/

接著，使用 Yeoman 建立新的網頁應用程式：

yo webapp

按照畫面上的提示選取專案選項。視 npm 在您機器上的安裝方式而定，您可能需要執行 sudo npm install。

在繼續進行下一個步驟之前，請執行下列指令來測試應用程式：

grunt server

瀏覽器應隨即開啟新的分頁，並連線至由 Grunt 啟動的本機伺服器。如果您變更專案中的其中一個 HTML、CSS 或 JavaScript 檔案，網頁會自動重新載入及更新。

如果您執行 grunt build，系統會建立新的目錄 dist，並壓縮及最佳化您的網頁應用程式，並在這個資料夾中製作可正式發布的版本。

步驟 4：設定 Gradle 建構作業

在 webapp 目錄中，建立名為 build.gradle 的新檔案。

在新建立的 build.gradle 檔案中，新增下列內容：

import org.apache.tools.ant.taskdefs.condition.Os

task buildWebApp(type: Exec) {
  executable = Os.isFamily(Os.FAMILY_WINDOWS) ? "grunt.cmd" : "grunt"
  args = ["build"]
}

這會建立名為 buildWebApp 的新工作，並使用預先定義的類型 Exec。接著，根據目前的作業系統，將 Exec 中的 executable 變數設為相關的 Grunt 指令。args 會設為 "build"，這等同於在指令列上執行 grunt build。最後，頂端的匯入作業是用於使用 Os.isFamily(Os.FAMILY_WINDOWS)。

在使用這項新工作之前，我們需要讓專案知道新的 build.gradle 檔案。

在根目錄中開啟 settings.gradle，然後加入以下行：

include ':webapp'

步驟 5：在建構 Android 應用程式時建構網頁應用程式

取得要建構的網頁應用程式，然後將應用程式複製到 Android 應用程式的 assets 目錄。

將下列內容複製到 Android 應用程式 build.gradle 檔案：

task copyWebApplication(type: Copy) {
  from '../webapp/dist'
  into 'src/main/assets/www'
}

task deleteWebApplication(type: Delete) {
  delete 'src/main/assets/www'
}

copyWebApplication.dependsOn ':webapp:buildWebApp'
copyWebApplication.dependsOn deleteWebApplication

android.applicationVariants.all { variant ->
  tasks.getByPath(":${project.name}:assemble${variant.buildType.name.capitalize()}").dependsOn copyWebApplication
}

讓我們逐一檢視這些部分。

工作：copyWebApplication

task copyWebApplication(type: Copy) {
  from '../webapp/dist'
  into 'src/main/assets/www'
}

這個 Copy 工作會從 webapp/dist 目錄複製應用程式。我們要將檔案複製到 src/main/assets/www。如果任何必要目錄不存在，這項工作也會建立必要的檔案結構。

工作：deleteWebApplication

task deleteWebApplication(type: Delete) {
  delete 'src/main/assets/www'
}

這個刪除工作會刪除 assets/www 目錄中的所有檔案。

copyWebApplication.dependsOn

copyWebApplication.dependsOn ':webapp:buildWebApp'
copyWebApplication.dependsOn deleteWebApplication

第一行指出 copyWebApplication 依附於網頁應用程式 build.gradle 檔案中的 buildWebApp 工作。

第二行指出 deleteWebApplication 工作有依附元件。

換句話說，在實際將任何檔案複製到 assets 目錄之前，請務必先建構 Web 應用程式，並刪除 assets 目錄的目前內容。

android.applicationVariants.all

android.applicationVariants.all { variant ->
  tasks.getByPath(":${project.name}:assemble${variant.buildType.name.capitalize()}").dependsOn copyWebApplication
}

此工作會為應用程式的每個版本，指定所有專案建構作業的依附元件。這裡會設定 assemble 任務的依附元件，以便執行 copyWebApplication。

assemble 工作會彙整專案的輸出內容，因此您必須先將網頁應用程式複製到 Android 專案。

步驟 6：確認所有功能皆正常運作

在 Android Studio 中，Android 應用程式 src 資料夾中不應有 assets 目錄。

將 WebView 設為使用 index.html 頁面：

mWebView.loadUrl("file:///android_asset/www/index.html");

按一下「Run」，讓應用程式進行建構。您應該會在 www 子目錄中看到 assets 目錄，其中包含網頁應用程式。

步驟 7：建立即時伺服器和即時重新載入

如要快速變更網路應用程式，即時重新載入功能就非常實用。如要啟用這項功能，您可以為應用程式建立兩個「產品變化版本」：即時伺服器版本和靜態版本，其中網路內容會封裝至 Android 應用程式。

在 Android 應用程式的 build.gradle 中，請在 android 元素的結尾處加入以下行：

android {
  ...
  defaultConfig {
    ...
  }
  productFlavors {
    staticbuild {
      packageName "com.google.chrome.myapplication"
    }

    liveserver {
      packageName "com.google.chrome.myapplication.liveserver"
    }
  }

}

Gradle 現可讓您使用 liveserver 套件名稱和一般套件名稱，分別建立應用程式版本。如要確認是否成功，請按一下「Sync Project with Gradle Files」 (位於頂端列的「Run」按鈕旁)。

接著，查看 Android Studio 左下角的「Build Variants」，這個畫面會顯示您可以建構的應用程式版本。

每個 productFlavor 都有「Debug」和「Release」版本，這是 Android Gradle 外掛程式預設提供的版本。這會決定版本應為偵錯版本，還是適合部署至 Play 商店的發布子版本。

您現在有兩個版本，但實際上兩者並沒有任何不同之處。

步驟 8：從實際運作中的伺服器載入

現在，請根據您建構的產品變種版本，設定應用程式載入不同的網址。

在 Android 應用程式中，所有產品變化版本都會使用相同的檔案，這些檔案會儲存在 src/main 中。如要新增特定產品變種版本的程式碼或資源，請在 src 下方建立另一個目錄，並使用與 productFlavor 相同的名稱。當您為該建構變化版本進行建構時，Gradle 和 Android 外掛程式會將這些額外檔案與 src/main 中的檔案合併。

將網址定義為字串資源，並在程式碼中使用該資源，而非硬式編碼網址。

  1. 建立 src/liveserver 和 src/staticbuild 資料夾。

  2. 在 liveserver 資料夾中，建立名為 res 的新資料夾，並在其中建立名為 values 的子資料夾。在其中建立名為 config.xml 的檔案。針對 staticbuild 資料夾重複執行這個程序。

  3. 在設定檔中，將下列行新增至 src/liveserver/res/values/config.xml：

    <?xml version="1.0" encoding="utf-8"?>
<resources>
  <string name="init_url">https://<Your Local Machine IP Address>:9000</string>
</resources>

    在 src/staticbuild/res/values/config.xml 中新增下列區塊：

    <?xml version="1.0" encoding="utf-8"?>
<resources>
  <string name="init_url">file:///android_asset/www/index.html</string>
</resources>

  4. 將 WebView 設為使用這些設定檔中的 init_url。

    mWebView.loadUrl(getString(R.string.init_url));

  5. 在 liveserver/AndroidManifest.xml 中新建名為 AndroidManifest.xml 的檔案，並新增下列指令行：

    <?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android">
  <uses-permission android:name="android.permission.INTERNET" />
</manifest>

    這會為 liveserver 版本新增網際網路權限。

  6. 在 webapp/Gruntfile.js 中尋找：

    connect: {
  options: {
    port: 9000,
    livereload: 35729,
    // change this to '0.0.0.0' to access the server from outside
    hostname: **'localhost'**
  },
  ...
}

    將 localhost 替換為 0.0.0.0，即可透過區域網路存取本機伺服器：

    connect: {
  options: {
    port: 9000,
    livereload: 35729,
    // change this to '0.0.0.0' to access the server from outside
    hostname: '**0.0.0.0'**
  },
  ...
}

如要測試變更，請按照下列步驟操作：

  1. 啟動即時伺服器：

    grunt server

  2. 在 Android Studio 的「Build Variant」選項中，選取「LiveserverDebug」。然後點選「執行」。

    您應該可以編輯 HTML、CSS 和 JavaScript 內容，並立即在瀏覽器中看到變更。

您現在有兩個應用程式版本：開發版本會從 Grunt 伺服器進行即時重新載入；靜態版本則會在本機 Android 應用程式中封裝。