笨猫博客

  • 🍟首页
  • 🍘目录
    • 🥝VPS教程
    • 🍾猫玩技术
    • 🍹干货分享
    • 🍏软件分享
    • 🍩一只猫
  • 🍋工具
    • 🌽IP路由追踪
    • 🍐域名Whois查询
    • 🥘域名被墙查询
    • 🍧IP正常检测
    • 🔥IP端口检测
    • 🍆短网址
    • 🐟VIP音乐播放
    • 🍯KMS激活
  • 🍓链接
  • 🍪联系
  • 🍱登录
    • 🥦登录
    • 🍒注册
关注互联网,生活,音乐,乐此不疲的一只笨猫
  1. 首页
  2. 猫玩技术
  3. 正文

用 Service Workers 为网站加速

2019-01-09 6356点热度 2人点赞 3条评论

其实 Service Workers 是 Google 爸爸推出很久的一个黑科技,它可以在浏览器层面动态缓存一些请求,从而使网站的二次加载速度大幅提高。

用 Service Workers 为网站加速

二次刷新我的博客,只重载了 16.0KB 的资源,甚至可以剪断网线访问 ∠( ᐛ 」∠)_

需要注意的是,Service Workers 只有在 HTTPS 的前提下才能发挥作用

添加 sw-toolbox 核心

下载 sw-toolbox.js 并且放置到主题目录下的 assets/js 目录

*如果你是默认主题,应该是在path_to_ghost/content/themes/casper/assets/js

创建缓存规则

在主题根目录下创建 serviceworker.js,并且写入下面内容

'use strict';

(function () {
  'use strict';
    /**
    * Service Worker Toolbox caching
    */

    var cacheVersion = '-toolbox-v1';
    var dynamicVendorCacheName = 'dynamic-vendor' + cacheVersion;
    var staticVendorCacheName = 'static-vendor' + cacheVersion;
    var staticAssetsCacheName = 'static-assets' + cacheVersion;
    var contentCacheName = 'content' + cacheVersion;
    var maxEntries = 50;

    self.importScripts('assets/js/sw-toolbox.js');

    self.toolbox.options.debug = false;

    // 缓存本站静态文件
    self.toolbox.router.get('/assets/(.*)', self.toolbox.cacheFirst, {
        cache: {
          name: staticAssetsCacheName,
          maxEntries: maxEntries
        }
    });

    // 缓存 googleapis
    self.toolbox.router.get('/css', self.toolbox.fastest, {
        origin: /fonts.googleapis.com/,
            cache: {
              name: dynamicVendorCacheName,
              maxEntries: maxEntries
            }
    });

    // 不缓存 DISQUS 评论
    self.toolbox.router.get('/(.*)', self.toolbox.networkOnly, {
        origin: /disqus.com/
    });
    self.toolbox.router.get('/(.*)', self.toolbox.networkOnly, {
        origin: /disquscdn.com/
    });


    // 缓存所有 Google 字体
    self.toolbox.router.get('/(.*)', self.toolbox.cacheFirst, {
        origin: /(fonts.gstatic.com|www.google-analytics.com)/,
        cache: {
          name: staticVendorCacheName,
          maxEntries: maxEntries
        }
    });

    self.toolbox.router.get('/content/(.*)', self.toolbox.fastest, {
        cache: {
          name: contentCacheName,
          maxEntries: maxEntries
        }
    });

    self.toolbox.router.get('/*', function (request, values, options) {
        if (!request.url.match(/(/ghost/|/page/)/) && request.headers.get('accept').includes('text/html')) {
            return self.toolbox.fastest(request, values, options);
        } else {
            return self.toolbox.networkOnly(request, values, options);
        }
        }, {
        cache: {
            name: contentCacheName,
            maxEntries: maxEntries
        }
    });

    // immediately activate this serviceworker
    self.addEventListener('install', function (event) {
        return event.waitUntil(self.skipWaiting());
    });

    self.addEventListener('activate', function (event) {
        return event.waitUntil(self.clients.claim());
    }); 

})();

启用 Service Workers

在主题下的 default.hbs 文件 </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>

搞定!刷新一遍,剪断网线试试吧 ୧(๑•̀⌄•́๑)૭

标签: 网站加速
最后更新:2023-04-30

笨猫

这个人很懒,什么都没留下

点赞
< 上一篇
下一篇 >

文章评论

  • C

    就是强制缓存XHR请求和HTML,不过对于更新频繁的网站来说还是用不缓存的好

    2019-01-14
  • vultr vps

    不错 试试

    2019-02-03
  • 天天下载

    感谢分享,谢谢站长!!@天天下载

    2023-04-30
  • razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
    取消回复

    最新 热点 随机
    最新 热点 随机
    永久免费 qzz.io 域名 可托管至CloudFlare SSL 证书申请工具 | 免费 HTTPS 证书网页在线申请 Let's Encrypt、ZeroSSL 等 HTTPS 证书 免登录 Afilmory - 一个现代化照片画廊网站 手把手教你用AdguradHome+SNIProxy自建DNS解锁服务器 WIN10系统彻底永久关闭自动更新 WinRAR 商业版下载安装和白嫖指南
    SSL 证书申请工具 | 免费 HTTPS 证书网页在线申请 Let's Encrypt、ZeroSSL 等 HTTPS 证书 免登录手把手教你用AdguradHome+SNIProxy自建DNS解锁服务器Afilmory - 一个现代化照片画廊网站永久免费 qzz.io 域名 可托管至CloudFlare
    IDM+迅雷的结合体来了 Gopeed,支持全平台(油管、推特)的下载神器和插件! Yoowalk:3D冲浪社区 免费开源播放器Miro发布1.0版! DriveDirectLink:一款网盘直链下载,支持谷歌,蓝奏云,支持在线预览 Linux VPS回程路一键测试脚本的使用教程 修改Directadmin后台登录默认端口的方法
    最近评论
    萧瑟 发布于 3 天前(07月14日) 这个我也用了好久,不知道啥时候能上IP证书
    梵蒂冈 发布于 1 周前(07月08日) 士大夫
    HuangWei 发布于 1 个月前(06月16日) 自己手动设置确实很烦,我之前使用过这个,感觉还不错,虽然已经不怎么维护了:https://githu...
    龙笑天 发布于 2 个月前(05月25日) 一直用的萌咖的路过 :smile:
    C 发布于 2 个月前(05月04日) 有个更省心的路子,上传到 catbox.moe,然后用 i0.wp.com 做加速(也支持heif格...
    标签
    elliptictrue100.10.02
    BLOG ChatGPT Chrome CloudFlare DirectAdmin github Godaddy google kloxo Linux OneDrive OneIndex PHP QQ shadowsocks SNS ssh Typecho VPS web2.0 whmcs Windows wordpress 一键脚本 下载 免费 博客 图文教程 图标 图片 域名 头像 奥运 宝塔面板 插件 教程 日记 有趣 浏览器 游戏 猫 生活 电影 百度 网站 视频 设计 软件 阿里云盘 音乐
    好友
    • glzjin's blog glzjin's blog
    • ZAERA博客
    • 冰沫记
    • 奇它博客
    • 猫腻‘s Blog
    • 猫饭
    • 肥宅之家
    • 萌博
    • 野路子程序员

    COPYRIGHT © 2022 笨猫博客. ALL RIGHTS RESERVED.

    Theme Kratos Made By Seaton Jiang