Question

想象一下，一旦用户导航到网站，我们需要N个资产与服务工作者一起进行预缓存。我们已经为列出的N个文件提供了适当的<?xml version="1.0" encoding="UTF-8"?>，并且我们正在使用workbox.precaching.precacheAndRoute([...])来配置所需的行为（默认的CRA设置）

使用workbox.precaching.precacheAndRoute或workbox.precaching.precache时是否可以跟踪预缓存进度？

我想这可能像将参数回调函数以及要预缓存的条目数组传递给<properties> <java.version>1.8</java.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-jdbc</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-jpa</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-security</artifactId> </dependency> <dependency> <groupId>org.thymeleaf.extras</groupId> <artifactId>thymeleaf-extras-springsecurity4</artifactId> <version>3.0.4.RELEASE</version> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <scope>runtime</scope> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context-support</artifactId> </dependency> <dependency> <groupId>javax.mail</groupId> <artifactId>mail</artifactId> <version>1.4.7</version> </dependency> <dependency> <groupId>org.antlr</groupId> <artifactId>antlr-complete</artifactId> <version>3.5.2</version> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <optional>true</optional> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build>一样。然后为每个缓存的条目调用此回调。.

此问题是否有解决方案或解决方法？谢谢！

Answer 1

工作箱没有提供任何事件或回调来通知预缓存是否完成。但这是我设法使用postMessage来通知客户端预缓存已完成的解决方法。

// sw-precache.js
workbox.precaching.precacheAndRoute(self.__precacheManifest)

const interval = setInterval(() => {
    caches.open(workbox.core.cacheNames.precache).then(cache => {
        cache.keys().then(keys => {
            if (keys.length >= self.__precacheManifest.length) {
                clearInterval(interval)
                self.clients.matchAll().then(clients => {
                    clients.forEach(client => client.postMessage('afterPrecache'))
                })
            }
        })
    })
}, 1000)

在您的客户中，

// index.html
....
navigator.serviceWorker.onmessage = (e) => {
    if (e.data === 'afterPrecache') {
        // precaching completed
    }
}
....

您甚至可以调整以上解决方案来跟踪预缓存进度。

Answer 2

从理论上讲，应该可以使用custom plugin将自己的addPlugins添加到预缓存组件中

我希望能在不久的将来使用cacheDidUpdate事件来证明这一理论，但是我不确定我是否可以轻松地将进度反馈给页面。我心中的疑问是，我是否可以可靠地收听正在注册但尚未由预缓存服务人员控制的页面中的任何消息

使用Workbox预先缓存资产时跟踪进度

2 个答案: