Ionic项目存至Documents的PNG文件无法在Xcode Widget中读取

主应用与Widget属于独立的沙盒容器，Application和PluginKitPlugin是两个完全隔离的沙盒环境，因此Widget无法直接访问主App的Documents目录。你虽已配置App Group，但未将图片保存到共享容器中，这是导致文件找不到的关键原因。

1. 修改Ionic端：将图片保存到App Group共享容器 #

需要把原本保存到主App Documents目录的逻辑，改为写入App Group共享容器，确保Widget能访问到文件。

以Capacitor为例的实现步骤 #

• 先在Xcode中为主App和Widget开启同一个App Group（如group.com.yyy.xxx）
• 使用Capacitor的Filesystem API写入文件到共享容器：

import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';

async function saveBase64ToSharedContainer(base64Data: string, fileName: string) {
  // 移除base64前缀（如果存在）
  const pureBase64 = base64Data.replace(/^data:image\/png;base64,/, '');
  
  try {
    // 写入文件到共享容器
    await Filesystem.writeFile({
      path: fileName,
      data: pureBase64,
      directory: Directory.Shared,
      encoding: Encoding.Base64
    });
    console.log('图片已保存至共享容器');
  } catch (error) {
    console.error('保存失败:', error);
  }
}

注意：需在capacitor.config.ts中配置App Group：

export default defineConfig({
  plugins: {
    Filesystem: {
      appGroup: 'group.com.yyy.xxx'
    }
  }
});

若使用Cordova插件，核心逻辑一致：通过原生插件获取共享容器路径后写入文件。

2. 修改Widget端Swift代码：从共享容器读取图片 #

调整现有代码，确保从共享容器正确加载图片：

struct Provider: TimelineProvider {
    func placeholder(in context: Context) -> SimpleEntry {
        SimpleEntry(date: Date(), image: nil)
    }

    func getSnapshot(in context: Context, completion: @escaping (SimpleEntry) -> ()) {
        let entry = SimpleEntry(date: Date(), image: loadSharedImage())
        completion(entry)
    }

    func getTimeline(in context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
        let currentDate = Date()
        var entries: [SimpleEntry] = []
        
        for hourOffset in 0 ..< 5 {
            let entryDate = Calendar.current.date(byAdding: .hour, value: hourOffset, to: currentDate)!
            let entry = SimpleEntry(date: entryDate, image: loadSharedImage())
            entries.append(entry)
        }

        let timeline = Timeline(entries: entries, policy: .atEnd)
        completion(timeline)
    }
    
    // 从共享容器加载图片的工具方法
    private func loadSharedImage() -> Image? {
        guard let sharedContainerURL = FileManager.default.containerURL(forSecurityApplicationGroupIdentifier: "group.com.yyy.xxx") else {
            print("无法获取共享容器URL")
            return nil
        }
        let imageURL = sharedContainerURL.appendingPathComponent("xxx.png")
        
        guard FileManager.default.fileExists(atPath: imageURL.path) else {
            print("共享容器中无目标图片")
            return nil
        }
        
        guard let uiImage = UIImage(contentsOfFile: imageURL.path) else {
            print("图片加载失败")
            return nil
        }
        
        return Image(uiImage: uiImage)
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .edgesIgnoringSafeArea(.top)
    }
}

struct SimpleEntry: TimelineEntry {
    let date: Date
    let image: Image?
}

关键注意事项 #

• 确保主App和Widget的App Group配置完全一致：在Xcode中分别选中两个Target，进入Signing & Capabilities，添加App Groups并勾选同一个Group ID。
• 禁止Widget访问主App沙盒路径：系统沙盒隔离机制不允许跨进程访问非共享容器的文件，不要尝试读取Application目录下的内容。
• 验证文件是否存在：可通过Xcode的Devices and Simulators，选中设备后找到主App，点击Download Container查看共享容器内的文件。

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