题

从 IOS 13.1 开始，我可以或不能在 Safari 或 Chrome 中的 IOS 上将缓存 API 与服务工作者一起使用吗？

背景

我有一个网络应用程序，可以离线使用。

我用：

• 服务人员
• 缓存API
• 索引数据库

适用于 Windows/Android 上的 Chrome

按预期工作。

在 IOS 上离线时不起作用

但是，在 IOS (13.1+) 上，如果您尝试在离线时刷新（在浏览器中单击刷新）一个 html 文件，缓存似乎不起作用（您会收到标准页面未找到错误）。这适用于 Chrome 和 Safari。

关于在 IOS Safari 上缓存 API 的混淆信息

根据CanIUse，最新的 Safari 不支持缓存 API，这可以解释这种行为。我无法找到有关 Chrome for IOS 支持缓存的信息，但我猜它不受支持，如果不在 Safari 中。

我发现有几个 消息来源说 IOS Safari 支持缓存 API，所以我很困惑。

再次提问

从 IOS 13.1 开始，我可以或不能在 Safari 或 Chrome 中的 IOS 上将缓存 API 与服务工作者一起使用吗？

我故意不包含任何代码示例，因为问题很普遍，取决于 IOS Safari/Chrome 是否支持该功能。如果可以使用缓存 api，但我以某种方式在代码中错误地实现了它，那就是另一个特定的帖子。

我正在使用ServiceWorker并且在开发模式下工作得很好,我的问题是在生产模式下我的包名是使用哈希生成的,例如1234das3123ad5.bundle.js,因此服务工作者不会缓存它.我的sw代码如下:

self.addEventListener('install', function(event) {
  // pre cache a load of stuff:
  event.waitUntil(
    caches.open('mycache').then(function(cache) {
      return cache.addAll([
        '/dist/bundle.js',
        '/dist/app.css',
        '/dist/index.html',
        'https://cdnjs.cloudflare.com/ajax/libs/antd/2.7.2/antd.css'
      ]);
    })
  )
});

在Cache API的文档中,我没有看到任何关于如何实现这一点的示例.

显然我可以缓存dist文件夹下的所有内容,例如:

self.addEventListener('install', function(event) {
  // pre cache a load of stuff:
  event.waitUntil(
    caches.open('mycache').then(function(cache) {
      return cache.addAll([
        '/dist/',
      ]);
    })
  )
});

但我发现它不是一个优雅,长期良好的解决方案.这是在Cache中使用通配符的方法吗？有点像'/dist/*.bundle.js'？

我们正在为iOS设备构建一个渐进式Web应用程序，并且我们了解Safari Web浏览器施加的50 MiB缓存限制。如果我们知道如果我们的应用程序的服务工作者包括所有静态资源，视频和图片等，则我们的应用程序的服务工作者可能必须缓存超过50 MiB的数据，那么如何处理此限制。我们的首要选择是即使在缓存之后也要保持应用程序脱机运行已满，如果这不可能，则至少可以防止用户离线工作时应用中断。

如果您给出一个我们也可以在其他PWA中实现的通用答案，那将是很好的。

有没有办法让缓存存储盒恢复best-effort一次persistent？

对于显示经常变化的数据（例如银行帐户余额）的应用程序来说，渐进式 Web 应用程序离线功能是一个好主意吗？

如果用户正在使用他的 PWA 离线模式并导航到例如银行产品余额部分，他实际上没有查看有关其余额的更新数据，并允许基于可能未更新的数据进行操作。

我是否错过了这种针对经常变化的数据的方法 (PWA) 的某些内容？

我正在尝试使用 Spring @Cacheable 注释。

 @Cacheable(value="users")          
public List<User> findAll() {
    System.out.println("Looking for All users : ");
    return userRepository.findAll();
}

@Override
@Cacheable(value="users")  
public User findOne(String userId) {
    System.out.println("Looking for user : "+ userId);
    return userRepository.findById(userId).get();
}

当我执行第一个方法时，List<User>我得到：

• 第一次：从数据库中选择所有字段
• 第二次：从缓存中选择所有字段
• 第三次：从缓存中选择所有字段

到目前为止这都很好。

当我执行第二种方法时，findOne(String userId)我得到的结果是：

• 第一次：从数据库中选择特定字段
• 第二次：从缓存中选择特定字段
• 第三次：从缓存中选择特定字段

这又好了。

当我执行第一个方法时，List<User>我得到：

从缓存中选择所有字段数据

问题：这两种方法（和 ）如何具有相同的缓存名称，但返回不同的结果。List<User>findOne(String userId)

我正在构建一个用于离线播放一些音频文件的网络应用程序。我已经阅读并测试了Service Worker API的缓存部分，我可以轻松地将所有音频文件添加到命名缓存中。但是，当我<audio src='/audio/file.mp3'>向 DOM 和play()它添加 a 时，浏览器似乎没有使用它，即使该确切的 URL 已添加到缓存中。

在某种程度上，不自动使用缓存是有道理的，因为这样命名缓存就没有任何意义。

我正在使用 create-react-app，由于我没有弹出，我没有控制 Service Worker。不过，据我所知，无论如何都不建议预先缓存较大的文件，因此我在 UI 中创建了一个函数，让用户决定何时缓存所有文件。

我的问题是：如何将缓存的音频文件放入音频元素？

编辑：我认为这个问题应该可以从我的问题中理解，但是被要求添加代码，所以这是我尝试过的。

该标记有一个音频元素和两个按钮。第一个按钮将 mp3 url 加载到缓存中，第二个按钮尝试两种不同的方式将其设置为音频元素的源：

1. 从缓存的响应中插入 blob
2. 将缓存的请求 url 设置为音频 src

当然，它们都不起作用，这就是我写这篇文章的原因。:)

<div>
    <audio src="/audio/shape_of_you.mp3" controls/>
</div>
<div>
    <button onclick="addToCache()">Add to cache</button>
    <button onclick="playCachedAudio()">Play cached audio</button>
</div>


<script>
    function addToCache() {
        caches.open('myCache').then((cache) => {
            cache.add('/audio/rise.mp3').then(() => {
                console.log('cached');
            });
        });
    }

    function playCachedAudio() {
        caches.open('myCache').then((cache) => {
            cache.match('/audio/rise.mp3').then((cachedAudio) => {
                cachedAudio.blob().then(cont => {
                    let audioEl …