Ionic 5（Angular）：从URL加载音图并保存实现离线访问技术问询

针对从Firebase加载的图片、音频资源实现离线访问需求，我们可以通过本地文件存储+缓存记录映射的方式实现：首次加载资源时将其下载到本地存储，后续直接读取本地文件，无需重复请求Firebase。

1. 安装依赖插件 #

先安装必要的Ionic/Cordova插件，用于文件操作和缓存记录存储：

• 安装Ionic Storage（存储资源URL与本地路径的映射关系）：

  npm install @ionic/storage-angular
  

• 安装Cordova File插件（实现本地文件的读写操作）：

  ionic cordova plugin add cordova-plugin-file
  npm install @ionic-native/file/ngx
  

2. 配置模块 #

在app.module.ts中导入并配置所需模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicModule } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';

// 导入缓存相关模块
import { IonicStorageModule } from '@ionic/storage-angular';
import { File } from '@ionic-native/file/ngx';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    HttpClientModule,
    // 配置Ionic Storage实例
    IonicStorageModule.forRoot({
      name: '__assetCacheDB',
      driverOrder: ['indexeddb', 'sqlite', 'websql']
    })
  ],
  providers: [File], // 注入File服务
  bootstrap: [AppComponent]
})
export class AppModule {}

3. 创建资源缓存服务 #

新建asset-cache.service.ts，封装缓存核心逻辑：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Storage } from '@ionic/storage-angular';
import { File } from '@ionic-native/file/ngx';

@Injectable({
  providedIn: 'root'
})
export class AssetCacheService {
  private _storage: Storage | null = null;

  constructor(
    private http: HttpClient,
    private storage: Storage,
    private file: File
  ) {
    this.initStorage();
  }

  // 初始化Storage
  private async initStorage() {
    const storageInstance = await this.storage.create();
    this._storage = storageInstance;
  }

  // 获取缓存资源的本地路径，无缓存则自动下载并缓存
  async getCachedAssetUrl(remoteUrl: string): Promise<string> {
    const cachedPath = await this._storage?.get(remoteUrl);
    if (cachedPath) {
      // 校验本地文件是否存在，避免文件被误删
      const fileName = cachedPath.split('/').pop()!;
      const fileExists = await this.file.checkFile(this.file.dataDirectory, fileName).catch(() => false);
      if (fileExists) return cachedPath;
    }
    // 无有效缓存则下载资源
    return this.downloadAndCacheAsset(remoteUrl);
  }

  // 下载资源到本地并记录缓存映射
  private async downloadAndCacheAsset(remoteUrl: string): Promise<string> {
    try {
      // 以Blob形式获取远程资源
      const resourceBlob = await this.http.get(remoteUrl, { responseType: 'blob' }).toPromise();
      // 生成唯一文件名，避免重名覆盖
      const fileName = `${Date.now()}_${remoteUrl.split('/').pop()}`;
      // 保存到应用私有目录（仅当前应用可访问）
      await this.file.writeFile(this.file.dataDirectory, fileName, resourceBlob, { replace: true });
      const localPath = `${this.file.dataDirectory}${fileName}`;
      // 记录URL与本地路径的映射
      await this._storage?.set(remoteUrl, localPath);
      return localPath;
    } catch (error) {
      // 下载失败时返回原URL，降级使用在线资源
      console.error('资源缓存失败:', error);
      return remoteUrl;
    }
  }

  // 可选：清理所有缓存资源及记录
  async clearAllCache() {
    const allKeys = await this._storage?.keys() || [];
    for (const key of allKeys) {
      const localPath = await this._storage?.get(key);
      if (localPath) {
        const fileName = localPath.split('/').pop()!;
        // 忽略删除失败的情况（比如文件已不存在）
        await this.file.removeFile(this.file.dataDirectory, fileName).catch(() => {});
      }
      await this._storage?.remove(key);
    }
  }
}

4. 在组件中使用缓存服务 #

图片离线加载示例 #

页面组件中预加载并缓存Firebase图片：

import { Component, OnInit } from '@angular/core';
import { AssetCacheService } from '../services/asset-cache.service';

@Component({
  selector: 'app-photo-gallery',
  templateUrl: './photo-gallery.page.html',
  styleUrls: ['./photo-gallery.page.scss'],
})
export class PhotoGalleryPage implements OnInit {
  // Firebase图片URL列表
  firebaseImageUrls = [
    'https://firebasestorage.googleapis.com/xxx/your-photo-1.jpg',
    'https://firebasestorage.googleapis.com/xxx/your-photo-2.jpg'
  ];
  cachedImagePaths: string[] = [];

  constructor(private assetCache: AssetCacheService) {}

  async ngOnInit() {
    // 批量获取缓存路径
    for (const url of this.firebaseImageUrls) {
      const localPath = await this.assetCache.getCachedAssetUrl(url);
      this.cachedImagePaths.push(localPath);
    }
  }
}

模板中使用本地路径渲染图片：

<ion-grid>
  <ion-row>
    <ion-col size="6" *ngFor="let path of cachedImagePaths">
      <ion-img [src]="path" alt="离线图片"></ion-img>
    </ion-col>
  </ion-row>
</ion-grid>

音频离线播放示例 #

处理Firebase音频资源，实现离线播放：

import { Component } from '@angular/core';
import { AssetCacheService } from '../services/asset-cache.service';

@Component({
  selector: 'app-audio-player',
  templateUrl: './audio-player.page.html',
  styleUrls: ['./audio-player.page.scss'],
})
export class AudioPlayerPage {
  firebaseAudioUrl = 'https://firebasestorage.googleapis.com/xxx/your-audio.mp3';
  cachedAudioPath: string = '';

  constructor(private assetCache: AssetCacheService) {}

  async ionViewWillEnter() {
    this.cachedAudioPath = await this.assetCache.getCachedAssetUrl(this.firebaseAudioUrl);
  }
}

模板中使用本地路径播放音频：

<ion-content class="ion-padding">
  <audio controls [src]="cachedAudioPath">
    您的设备不支持音频播放
  </audio>
</ion-content>

关键注意事项 #

• 权限配置：iOS需在info.plist中添加文件访问权限声明；Android 10及以下需在AndroidManifest.xml中配置READ_EXTERNAL_STORAGE/WRITE_EXTERNAL_STORAGE权限，Android 11+采用Scoped Storage，无需额外权限。
• 缓存清理策略：可添加缓存过期逻辑，比如定期清理30天未访问的缓存文件，避免占用过多存储空间。
• Firebase资源权限：确保Firebase存储的资源设置了正确的访问权限（如公开读取或通过Token授权），否则下载请求会失败。
• 平台兼容性：该方案基于Cordova插件，需在真机或模拟器上测试，浏览器环境下部分文件操作API无法正常工作。

内容的提问来源于stack exchange，提问作者Shoaib