新增行動裝置

我們的相片庫應用程式在 iOS、Android 和網頁上執行之前，都不能算是完成 - 全部都使用一個程式碼庫。只需要做一些小小的邏輯變更以支援行動平台、安裝一些原生工具，然後在裝置上執行應用程式。開始吧！

匯入平台 API

首先，讓我們做一些小小的程式碼變更 - 然後當我們將應用程式部署到裝置時，它就會「正常運作」。

將 Ionic 平台 API 匯入到 photo.service.ts 中，該 API 用於擷取有關目前裝置的資訊。在這種情況下，它對於根據應用程式執行的平台（網頁或行動裝置）選擇要執行的程式碼很有用

import { Platform } from '@ionic/angular';

export class PhotoService {
  public photos: UserPhoto[] = [];
  private PHOTO_STORAGE: string = 'photos';
  private platform: Platform;

  constructor(platform: Platform) {
    this.platform = platform;
  }

  // other code
}

平台特定邏輯

首先，我們將更新相片儲存功能以支援行動裝置。在 readAsBase64() 函式中，檢查應用程式執行的平台。如果它是「混合式」（Capacitor 或 Cordova，兩個原生執行階段），則使用 Filesystem readFile() 方法將相片檔案讀取為 base64 格式。否則，當在網頁上執行應用程式時，使用與之前相同的邏輯

private async readAsBase64(photo: Photo) {
  // "hybrid" will detect Cordova or Capacitor
  if (this.platform.is('hybrid')) {
    // Read the file into base64 format
    const file = await Filesystem.readFile({
      path: photo.path!
    });

    return file.data;
  }
  else {
    // Fetch the photo, read as a blob, then convert to base64 format
    const response = await fetch(photo.webPath!);
    const blob = await response.blob();

    return await this.convertBlobToBase64(blob) as string;
  }
}

接下來，更新 savePicture() 方法。在行動裝置上執行時，將 filepath 設定為 writeFile() 操作的結果 - savedFile.uri。設定 webviewPath 時，使用特殊的 Capacitor.convertFileSrc() 方法（此處有詳細資訊）。

// Save picture to file on device
private async savePicture(photo: Photo) {
  // Convert photo to base64 format, required by Filesystem API to save
  const base64Data = await this.readAsBase64(photo);

  // Write the file to the data directory
  const fileName = Date.now() + '.jpeg';
  const savedFile = await Filesystem.writeFile({
    path: fileName,
    data: base64Data,
    directory: Directory.Data
  });

  if (this.platform.is('hybrid')) {
    // Display the new image by rewriting the 'file://' path to HTTP
    // Details: https://ionic.dev.org.tw/docs/building/webview#file-protocol
    return {
      filepath: savedFile.uri,
      webviewPath: Capacitor.convertFileSrc(savedFile.uri),
    };
  }
  else {
    // Use webPath to display the new image instead of base64 since it's
    // already loaded into memory
    return {
      filepath: fileName,
      webviewPath: photo.webPath
    };
  }
}

接下來，回到我們先前為網頁實作的 loadSaved() 函式。在行動裝置上，我們可以將圖片標籤 - <img src="x" /> - 的來源直接設定為 Filesystem 上的每個相片檔案，並自動顯示它們。因此，只有網頁才需要將 Filesystem 中的每個圖片讀取為 base64 格式。更新此函式，在 Filesystem 程式碼周圍新增一個 if 陳述式

public async loadSaved() {
  // Retrieve cached photo array data
  const { value } = await Preferences.get({ key: this.PHOTO_STORAGE });
  this.photos = (value ? JSON.parse(value) : []) as UserPhoto[];

  // Easiest way to detect when running on the web:
  // “when the platform is NOT hybrid, do this”
  if (!this.platform.is('hybrid')) {
    // Display the photo by reading into base64 format
    for (let photo of this.photos) {
      // Read each saved photo's data from the Filesystem
      const readFile = await Filesystem.readFile({
          path: photo.filepath,
          directory: Directory.Data
      });

      // Web platform only: Load the photo as base64 data
      photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`;
    }
  }
}

我們的相片庫現在包含一個可在網頁、Android 和 iOS 上執行的程式碼庫。接下來，您一直在等待的部分 - 將應用程式部署到裝置。