service-worker用法詳解

104828720 發(fā)布于2019-08-26 10:20 / 872人閱讀

摘要：二簡要介紹是一段腳本，在后臺運行。作為一個獨立的線程，不會對頁面造成阻塞。本質(zhì)上充當(dāng)應(yīng)用程序與瀏覽器之間的代理服務(wù)器。可以做到離線使用消息推送后臺自動更新，的出現(xiàn)是正是為了使得也可以具有類似的能力。在我們的例子例，是在，的根目錄是。

一、背景

taro框架轉(zhuǎn)的h5，想在無網(wǎng)絡(luò)狀態(tài)下可以控制展示給用戶的界面，使用客戶端離線緩存可以達到目的，并且可以將靜態(tài)資源進行緩存，從而減少白屏?xí)r間，加快頁面相應(yīng)速度。

二、service worker簡要介紹：

service worker是一段腳本，在后臺運行。作為一個獨立的線程，不會對頁面造成阻塞。本質(zhì)上充當(dāng)Web應(yīng)用程序與瀏覽器之間的代理服務(wù)器。native app可以做到離線使用、消息推送、后臺自動更新，service worker的出現(xiàn)是正是為了使得web app也可以具有類似的能力。在線上必須在 HTTPS 環(huán)境下才能工作，或者本地localhost域名也是可以的。

三、使用方法

第一步選擇npm包，我用的是sw-precache-webpack-plugin這個包，基于webpack的插件，操作簡單使用方便，詳情請看文檔
然后進行基于webpack的配置，下面例子是taro框架h5部分的配置內(nèi)容

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: [],
                // 需緩存的文件配置, 需動態(tài)緩存的放到runtimeCaching中處理
                staticFileGlobs: [],
                mergeStaticsConfig: true,
                minify: true,
                verbose: true,
                runTimeCaching: [
                    // 頁面動態(tài)文件
                    {
                        urlPattern: /pages/.*/,
                        handler: "networkFirst"
                    },
                    {
                        urlPattern: /api/.*/,
                        handler: "networkFirst"
                    }
                ]
            }]
        );
    },
    module: {
        postcss: {
            autoprefixer: {
                enable: true
            }
        }
    }
}

ok,現(xiàn)在已經(jīng)配置完了，下一步只要在入口文件里注冊service-worker就行啦，我是在HTML里加的，代碼如下：

大功告成，現(xiàn)在可以在本地調(diào)試了，本地如果啟動了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啦，如果配置了這些內(nèi)容service-worker還沒有注冊成功的話，可能的原因如下：

你沒有在 HTTPS 或localhost下運行你的項目。

service worker文件的地址沒有寫對— 需要相對于 origin , 而不是 app 的根目錄。在我們的例子例， service worker 是在 https://mdn.github.io/sw-test...，app的根目錄是 https://mdn.github.io/sw-test/。應(yīng)該寫成 /sw-test/sw.js 而非 /sw.js.

service worker 在不同的 origin 而不是你的app的，這是不被允許的。