workbox-webpack-plugin --如何在用户安装我的应用时才下载资源？

Question

我正在尝试让我的SPA可以安装在手机上。它不需要完全离线，因为它无论如何都需要获取数据，但我想缓存所有的静态资产(JS、CSS、图标)。

我找到了workbox-webpack-plugin，到目前为止，它似乎工作得很好。我的应用程序现在是可安装的，但是我想调整它如何进行缓存。

我的应用程序在分块方面已经相当高效，只加载它需要的资源并利用浏览器缓存(使用哈希文件名)。当用户第一次访问网站时，为了下载所有内容而把它扔掉，这感觉就像是浪费。

如果用户安装了我的应用程序，我可以只下载资源吗？也就是说，当用户试图将我的应用程序添加到他们的主屏幕上时，它会通过在站点周围导航来下载任何尚未缓存的内容？

在Chrome for Windows中看起来是这样的：

​

​

Answer 1

这是可能的，但据我所知，目前还没有现成的解决方案。您需要手动编写代码。

基本的想法是：

在installation

• Make之后生成一个包含所有可能需要缓存的文件的软件，默认情况下不缓存任何东西

• 让软件使用postMessage

• 侦听消息当用户安装应用程序或从主屏幕启动应用程序时，从页面JS向软件发送消息。在软件中，触发所有资产的缓存

我建议您阅读此https://web.dev/customize-install/，了解有关安装过程及其事件、检测等的更多信息。