service-worker用法详解

104828720 发布于2019-08-26 10:20 / 878人阅读

摘要：二简要介绍是一段脚本，在后台运行。作为一个独立的线程，不会对页面造成阻塞。本质上充当应用程序与浏览器之间的代理服务器。可以做到离线使用消息推送后台自动更新，的出现是正是为了使得也可以具有类似的能力。在我们的例子例，是在，的根目录是。

一、背景

taro框架转的h5，想在无网络状态下可以控制展示给用户的界面，使用客户端离线缓存可以达到目的，并且可以将静态资源进行缓存，从而减少白屏时间，加快页面相应速度。

二、service worker简要介绍：

service worker是一段脚本，在后台运行。作为一个独立的线程，不会对页面造成阻塞。本质上充当Web应用程序与浏览器之间的代理服务器。native app可以做到离线使用、消息推送、后台自动更新，service worker的出现是正是为了使得web app也可以具有类似的能力。在线上必须在 HTTPS 环境下才能工作，或者本地localhost域名也是可以的。

三、使用方法

第一步选择npm包，我用的是sw-precache-webpack-plugin这个包，基于webpack的插件，操作简单使用方便，详情请看文档
然后进行基于webpack的配置，下面例子是taro框架h5部分的配置内容

h5: {
    publicPath: "/",
    staticDirectory: "static",
    webpackChain(chain, webpack) {
        chain.plugin("sw")
            .use(require("sw-precache-webpack-plugin"), [{
                cacheId: "name",
                filename: "service-worker.js",
                filepath: path.resolve(__dirname, "../src/service-worker.js"),
                // importScripts: [],
                // 需缓存的文件配置, 需动态缓存的放到runtimeCaching中处理
                staticFileGlobs: [],
                mergeStaticsConfig: true,
                minify: true,
                verbose: true,
                runTimeCaching: [
                    // 页面动态文件
                    {
                        urlPattern: /pages/.*/,
                        handler: "networkFirst"
                    },
                    {
                        urlPattern: /api/.*/,
                        handler: "networkFirst"
                    }
                ]
            }]
        );
    },
    module: {
        postcss: {
            autoprefixer: {
                enable: true
            }
        }
    }
}

ok,现在已经配置完了，下一步只要在入口文件里注册service-worker就行啦，我是在HTML里加的，代码如下：

大功告成，现在可以在本地调试了，本地如果启动了webpack-dev-server，则需要：webpack添加配置：

module.exports = {
devServer: {
    setup: function (app) {
        app.get("/service-worker.js", function (req, res) {
            res.set({ "Content-Type": "application/javascript; charset=utf-8" });
            res.send(fs.readFileSync("build/service-worker.js"));
        });
    }
}
}

此时访问localhost就可以启用service-worker啦，如果配置了这些内容service-worker还没有注册成功的话，可能的原因如下：

你没有在 HTTPS 或localhost下运行你的项目。

service worker文件的地址没有写对— 需要相对于 origin , 而不是 app 的根目录。在我们的例子例， service worker 是在 https://mdn.github.io/sw-test...，app的根目录是 https://mdn.github.io/sw-test/。应该写成 /sw-test/sw.js 而非 /sw.js.

service worker 在不同的 origin 而不是你的app的，这是不被允许的。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106004.html

PWA之 workbox 学习

摘要：另一部分属于进程，它重新在后台起了一个进程，它和应用的主进程互不影响，可以同时执行。其中一般作为应用程序浏览器和网络如果可用之间的代理服务。他们还将允许访问推送通知和后台同步。然后开始在进程中通过事件，来监听请求，并对请求和响应进行缓存。前言:我们的应用可以分为两部分，一部分是属于主进程的(包括js(同步,异步)，以及dom渲染等等)，在一个时刻点，只能执行一个，要么先去渲染dom，...

zhangyucha0 2019-08-26 13:55 评论0 收藏0
service worker在移动端H5项目的应用

摘要：和的关系不是一项技术，也不是一个框架，我们可以把她理解为一种模式，一种通过应用一些技术将在安全性能和体验等方面带来渐进式的提升的一种的模式。这里需要注意的是，首次注册线程的页面需要再次加载才会受其控制。 1. PWA和Service Worker的关系 PWA (Progressive Web Apps) 不是一项技术，也不是一个框架，我们可以把她理解为一种模式，一种通过应用一些技...

cucumber 2019-08-01 18:21 评论0 收藏0
service worker在移动端H5项目的应用

摘要：和的关系不是一项技术，也不是一个框架，我们可以把她理解为一种模式，一种通过应用一些技术将在安全性能和体验等方面带来渐进式的提升的一种的模式。这里需要注意的是，首次注册线程的页面需要再次加载才会受其控制。 1. PWA和Service Worker的关系 PWA (Progressive Web Apps) 不是一项技术，也不是一个框架，我们可以把她理解为一种模式，一种通过应用一些技...

Tonny 2019-08-21 18:38 评论0 收藏0
使用offline-plugin搭配webpack轻松实现PWA

摘要：配合的项，能够实现缓存外部资源的功能。允许接受来自的消息，默认值为。检查新版本的的更新信息。这也是我在研究阶段直接使用时所发现的问题。建议仅在生产模式内使用。 showImg(https://segmentfault.com/img/bVSVG1?w=1178&h=484); 谈起PWA，许多人可能还只停留在了解的层面，比较少在实践中真正地尝试过，更多的仅仅是对着网上的教程和例子大概玩...

shadajin 2019-08-22 10:53 评论0 收藏0
为 VUE 项目添加 PWA 解决发布后刷新报错问题

摘要：为了解决这个问题，我的解决方案是使用，这样就可以将缓存到本地，再次发布后，会使旧的失效，重新请求并缓存。结语几分钟就搞定了，然后把之前的一个基于的后台模板项目也升级了，如果有相同需求的可以参考下。为什么要给 VUE 项目添加 PWA 为什么要添加？因为不管是部署在 IIS，还是 nginx，每次应用部署后，再次访问因为旧的 js 已经不存在，所以页面访问的时候会整个报错，报错的结果就...

lifefriend_007 2019-08-23 11:54 评论0 收藏0