WordPress使用Service Worker加速网站教程

Service Worker是谁开发的

Service Worker 是由 W3C（World Wide Web Consortium，国际万维网联盟）制定的 Web 标准，由 Google 工程师 Alex Russell 和 W3C Web Applications Working Group 共同开发。

Service Worker有什么用处

Service Worker是一种浏览器技术，可以在后台运行JavaScript脚本来实现离线缓存、消息推送、后台同步和性能优化等功能。

具体来说，Service Worker可以将网站的资源缓存到本地，使得用户在没有网络连接的情况下也可以访问网站；还可以实现消息推送，即使用户关闭了网站也可以在后台接收到新消息提醒；可以在后台同步数据，使得用户再次打开网站时能够看到最新的数据；还可以通过拦截网络请求来优化网站性能，比如将一些请求转发到缓存中而不是直接向服务器发出请求。

Service Worker的作用非常广泛，可以帮助网站提高用户体验、降低服务器负载、节省网络流量等。

Service Worker的兼容性

Service Worker的兼容性可以参考Can I use网站的数据。根据Can I use网站的数据，Service Worker在主流浏览器中的支持程度如下：

• Chrome: 40+
• Firefox: 44+
• Safari: 11.1+
• Edge: 17+
• Opera: 24+
• Android Browser: 4.4+
• UC Browser: 12.12+
• Samsung Internet: 4+

可以看出，目前主流浏览器对Service Worker的支持已经比较成熟，覆盖了绝大多数的用户。但是仍然有部分老旧的浏览器不支持Service Worker，因此在使用Service Worker时需要注意兼容性问题。

Service Worker特点

1. 离线缓存：能够让网页在离线状态下继续工作，提高用户体验。
2. 推送通知：能够在没有打开网页的情况下，将通知消息发送给用户，与原生应用相似。
3. 资源预加载：能够在网页打开之前就开始加载资源，提高网页打开速度。
4. 消息拦截：能够拦截网页发送的网络请求，实现代理、转发、缓存等功能。
5. 跨域通信：能够在不同域名之间共享数据，实现跨域通信。

Service Worker 可以大大提高 Web 应用的性能和功能，使得 Web 应用更加接近原生应用的用户体验。

Service Worker资源

我们提供的文件一共三个，都是Service Worker必须的资源文件以及功能性文件。你可以在文末下载他们。

Service Worker使用

将文末提供的三个文件，放于WordPress网站根目录，比如data/www/zhankon.com目录下。

接着，在WordPress主题footer.php文件中加入如下代码，或者在WordPress主题设置-插入代码-页脚代码中加入如下代码。如果你的主题没有此设置就加入到主题footer.php文件里面body之间就行。当然你放在主题设置里面插入，更新时不需要重新上传。

<script>
    var serviceWorkerUri = '/serviceworker.js';

    if ('serviceWorker' in navigator) {  
        navigator.serviceWorker.register(serviceWorkerUri).then(function() {
          if (navigator.serviceWorker.controller) {
            console.log('Assets cached by the controlling service worker.');
          } else {
            console.log('Please reload this page to allow the service worker to handle network operations.');
          }
        }).catch(function(error) {
          console.log('ERROR: ' + error);
        });
    } else {
        console.log('Service workers are not supported in the current browser.');
    }
</script>

上述代码属于Service Worker缓存的引入，不建议做任何修改。

• Assets cached by the controlling service worker.

表明一个成功启动缓存的提示。

• Please reload this page to allow the service worker to handle network operations.

表明你是第一次访问网站，再次点击一个页面，就会成功启动缓存。

• Service workers are not supported in the current browser.

表明当前浏览器不支持Service Worker缓存

Service Worker修改

请注意，关于我提供的那三个文件，你只能修改serviceworker.js文件，属于简单的配置文件，指定你的哪些资源需要走Service Worker缓存（SW缓存）。

首先，请将serviceworker.js文件中的zhankon.com修改为你自己的域名。

  self.toolbox.router.get('wp-content/cache/(.*)', self.toolbox.cacheFirst, {
        cache: {
          name: staticAssetsCacheName,
          maxEntries: maxEntries
        }
    });

serviceworker.js文件中的上述代码，你可以改为你自己静态资源缓存的地方。比如你用了WP Super Cache这款插件，就可以保持这个配置。当然，你也可以多复制几份这个配置代码，添加自己所有静态资源的目录。

 self.toolbox.router.get('/(.*)', self.toolbox.cacheFirst, {
        origin: /cdn\.jsdelivr\.com/,
        cache: {
          name: staticVendorCacheName,
          maxEntries: maxEntries
        }
    });

上述代码为第三方资源添加的方法，可以多复制几份，把所有第三方的域名都添加一遍，注意写法即可。例如：/oss\.zhankon\.com/。

Service Worker流程

1. 首先，客户端（通常是浏览器）向服务器请求一个网页。
2. 如果已经安装了Service Worker，则客户端向Service Worker发送请求。
3. 如果Service Worker中缓存了所请求的资源，则直接返回缓存的资源给客户端。
4. 如果Service Worker中没有缓存所请求的资源，则向服务器发送请求，并将返回的资源存储在Service Worker的缓存中，并将资源返回给客户端。
5. 在客户端的下一次请求中，Service Worker将返回缓存中的资源，而无需再向服务器发送请求，从而加速了网站的访问速度。

需要注意的是，由于Service Worker运行在独立的线程中，因此它可以在后台缓存资源，即使客户端关闭了网页也可以继续运行，从而提高了缓存效率。

下载权限查看

• ￥免费下载评论并刷新后下载登录后下载

查看演示

0">
• {{attr.name}}：

您当前的等级为 登录后免费下载登录 小黑屋反思中，不准下载！ 评论后刷新页面下载评论 支付￥以后下载 请先登录 您今天的下载次数（次）用完了，请明天再来 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员 您已获得下载权限 您可以每天下载资源次，今日剩余次