时间戳

首页 > 解决方案 > workbox-webpack-plugin -- 仅当用户安装我的应用程序时如何下载资产？

webpack - workbox-webpack-plugin -- 仅当用户安装我的应用程序时如何下载资产？

问题描述

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

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

我的应用程序在分块方面已经非常高效，只加载它需要的资源并利用浏览器缓存（使用散列文件名）。当用户第一次访问该站点时，将其丢弃以下载所有内容感觉像是一种浪费。

我可以让资源仅在用户安装我的应用程序时下载吗？例如，当用户尝试将我的应用程序添加到他们的主屏幕时，它会通过在网站上导航来下载尚未缓存的任何内容？

在 Windows 版 Chrome 中看起来像这样：

标签： webpackservice-workerworkbox

解决方案

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

基本思想是：

  1. 生成一个包含安装后可能需要缓存的所有文件列表的 SW
  2. 默认情况下使 SW不缓存任何内容
  3. 使用 postMessage API 让 SW 监听消息
  4. 当用户安装应用程序或应用程序从主屏幕启动时，从页面 JS 向 SW 发送消息。在软件中，触发所有资产的缓存

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

推荐阅读