在【Day - 28】時，我們順利的設定好屬於自己的Icon和Splash Screen。但是Splash Screen持續時間非常的短暫，導致APP尚未完全載入，一片空白的畫面就先短暫的出現在大家眼前。另外，在鐵人挑戰的這28天，不知大家是否有注意到，只要是實體機，StatusBar上總是一片空白呢？今天，我們將一探究竟，尋找這些神秘的白畫面和消失的工具列背後的原因以及解決方法！

神秘的白畫面

當我們啟動APP時，Splash Screen隱藏後會有一段短暫的空白畫面，接著才展示主頁面。這段延遲可能會讓使用者感到迷惑，誤以為APP啟動遲緩或是不夠流暢。

由於展示用的Gif帶有閃爍效果，為了避免造成眼睛不適，我就不在此處展示圖片，但有興趣的朋友可以透過我的Github連結查看哦！Github圖片連結。

在APP啟動的過程中，通常需要進行一系列的初始化操作。例如在【Day - 25】中，我們建立了SQLite的初始化方法initializePlugin()，這是一個Promise函數。但因未使用await確保完整執行，可能使Splash Screen消失時，SQLite還在初始化。另外，主頁的多個元件和3D圖片也增加了載入時間。再加上Splash Screen預設在500毫秒後會自動隱藏，這些因素共同導致了短暫的白色畫面現象。

解決方式

為了給提供更流暢的體驗，我們首先會使用await來確保SQLite方法完全執行後再進行下一步。然後利用Capacitor提供的SplashScreen插件，手動設定Splash Screen的消失時間點。當SQLite完成初始化後，並且載入頁面完成，全部就緒後，再關閉Splash Screen，確保使用者不會看到任何載入的延遲現象。

Capacitor Splash Screen

使用以下指令安裝Capacitor的Splash Screen插件：

npm install @capacitor/splash-screen
npx cap sync

為了防止Splash Screen在預設的500毫秒後自動消失，我們可以在capacitor.config.ts檔案中，添加插件設定並將launchAutoHide設為false：

const config: CapacitorConfig = {
  appId: 'app.momochenisme.aiconversationapp',
  appName: 'AI英語口說導師',
  webDir: 'www',
  server: {
    androidScheme: 'https'
  },
  //加入插件設定
  plugins: {
    //Splash Screen
    SplashScreen: {
      launchAutoHide: false //是否啟動後自動隱藏
    }
  }
};

在app.component.ts檔案中，新增一個initAppSettingAndPlugin()方法。在該方法內，使用await確保initializePlugin()方法能夠等待SQLite初始化完畢後再繼續執行後續的程式：

constructor(private sqlitedbService: SqlitedbService,
  private platform: Platform) {
  //初始化設定
  this.initAppSettingAndPlugin();
}

private async initAppSettingAndPlugin() {
  //SQLite初始化
  await this.sqlitedbService.initializePlugin();
}

在Home主頁中，匯入Splash Screen。然後，在AfterViewInit()中調用SplashScreen.Hide()方法來隱藏Splash Screen。這樣做就可以確保SQLite資料庫和頁面都已經載入完畢後，才會關閉Splash Screen：

import { SplashScreen } from '@capacitor/splash-screen';
.
.
.
.
ngAfterViewInit(): void {
  //關閉Splash Screen
  SplashScreen.hide();
}

經過上面的設定和調整，當完成編譯並運行APP後，那短暫的白色畫面將不再出現囉！

由於展示用的Gif帶有閃爍效果，同樣為了避免不適，不在此處展示圖片，但有興趣的朋友可以透過Github連結查看哦！Github圖片連結。

消失的工具列

在我們之前的Demo中，只要是iOS實體機上，都會發現StatusBar上的時間、訊號、電量等資訊似乎消失了。事實上，這些資訊並沒有消失。只是因為我的iOS實體機設定為深色主題，StatusBar的字體顏色會自動調整為白色以適應深色背景。但由於我們的APP是基於淺色主題，其背景是白色，所以當StatusBar的文字也是白色時，這些資訊就好像消失了一樣。

解決方式

那麼，如何修改StatusBar的字體顏色呢？解決方案就是使用Capacitor的StatusBar插件，它讓我們可以輕鬆的自定StatusBar的外觀，無論是背景顏色還是字體顏色。

Capacitor StatusBar

使用以下指令安裝Capacitor的StatusBar插件：

npm install @capacitor/status-bar
npx cap sync

在app.component.ts檔案中，我們使用StatusBar.setStyle()方法強制設定StatusBar的風格為Light，當設定StatusBar風格為Light時，它將使StatusBar上的文字和圖標變為深色：

private async setInitialStatusBar() {
  await this.updateStatusBar(Style.Light);
}

private async updateStatusBar(style: Style) {
  await StatusBar.setStyle({
    style: style
  });
}

如果想要判斷裝置當前的模式，我們可以利用window.matchMedai()方法檢測：

private isUserPreferringDarkMode(): boolean {
  return window.matchMedia('(prefers-color-scheme: dark)').matches;
}

最終，我們將新建的方法加入到initAppSettingAndPlugin()中。這樣，在系統初始化時，它會自動調整StatusBar的樣式：

private async initAppSettingAndPlugin() {
  //StatusBar初始化
  await this.setInitialStatusBar();
  //SQLite初始化
  await this.sqlitedbService.initializePlugin();
}

Android和iOS的StatusBar的差異

設定StatusBar為淺色主題後，字體將會是深色。在iOS平台上，APP的內容是涵蓋StatusBar的範圍（包括劉海和動態島的區塊），加上iOS的StatusBar是透明色，所以可以正常顯示資訊。

在Android平台上，這種設定方法則不適用。這是因為Android的APP顯示範圍不包括StatusBar。因此，當設定為淺色主題時，深色的字體會與深色主題的背景混為一體，造成視覺上StatusBar消失的問題。

為了在Android平台上避免這個問題，我們需要將StatusBar修改為白色底。我們可以透過StatusBar.setBackgroundColor()方法設定，這個方法在iOS上目前是不支援的。所以，我們可以使用Platform Service的is()方法來區分Android和iOS系統,，進行相對應的設定：

.
.
.
private async setInitialStatusBar() {
  //判斷是否為Android
  if (this.platform.is('android')) {
    await StatusBar.setBackgroundColor({
      color: '#FFFFFF'
    });
  }
  await this.updateStatusBar(Style.Light);
}
.
.
.

調整背景色為白色後，StatusBar上的所有資訊就能清楚的看到囉！

結語

神秘的白畫面和消失的工具列，在使用者體驗佔了很大的部分。這些微小的變動，不僅提升了使用者體驗，更顯示了細節中的匠心獨運。透過Capacitor提供的插件，我們可以輕易的操作原生系統，將每一個角落都打磨得更完美。最終，當使用者打開APP，他們所獲得的是一個流暢、協調且高度專業的使用體驗哦！



Github專案程式碼：Ionic結合ChatGPT - Day29