angular - 无法从 Safari 的缓存中删除文件

Question

在 Angular 6 应用程序中，我使用Cache API来存储和删除 MP3 文件。

在 Safari 中，当尝试删除文件时它不会被删除，并且我收到“配额超出”错误消息（在 Chrome 中它运行良好）。

我创建了一个示例 Angular Firebase 应用程序，以便您可以看到问题。

示例应用程序代码存储库

重现问题的步骤：

1. 打开 Safari（移动设备或 Mac 电脑）
2. 点击“保存文件”按钮
3. 点击“删除文件”（该文件应该被删除，但它不是）
4. 再次单击“保存文件”，您将收到“配额超出”消息。

谁能帮我看看我的代码有什么问题？

我调用删除文件的方法是removeFile()

app.component.ts

import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  // Omitted ...

  saveFile() {
    this.resetValues();  
    caches.open(this.id).then((cache) => {
      console.log("open complete", cache);
      return fetch(this.url).then((response) => {
        console.log("fetch complete", response);
        return cache.put(this.url, response).then((data) => {
          console.log("cache complete", data)
          this.status = 'File saved';
        });
      })
    }).catch((error: Error) => {
      this.errorMessage = error.message;
      console.error('Error caching file!', error);
    });
  }

  removeFile() {
    this.resetValues();
    caches.delete(this.id).then((cacheDeleted) => {
      console.log("File removed from cache:", cacheDeleted);
      this.status = 'File removed';
    }).catch((error: Error) => {
      this.errorMessage = error.message;
      console.error('Error removing file from cache :(', error);
    });
  }

}

包.json

{
  // Omitted ...
  "dependencies": {
    "@angular/animations": "^6.0.0",
    "@angular/common": "^6.0.0",
    "@angular/compiler": "^6.0.0",
    "@angular/core": "^6.0.0",
    "@angular/forms": "^6.0.0",
    "@angular/http": "^6.0.0",
    "@angular/platform-browser": "^6.0.0",
    "@angular/platform-browser-dynamic": "^6.0.0",
    "@angular/router": "^6.0.0",
    "core-js": "^2.5.4",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^6.0.0",
    "@angular-devkit/build-angular": "~0.6.1",
    "typescript": "~2.7.2",
    "@angular/cli": "~6.0.1",
    "@angular/language-service": "^6.0.0",
    // Omitted ...
  }
}

标签： angularcachingsafaricacheapi