service-worker用法詳解

1、背景

taro框架轉的h5,想在無網絡狀態下能夠控制展現給用戶的界面,使用客戶端離線緩存能夠達到目的,而且能夠將靜態資源進行緩存,從而減小白屏時間,加快頁面相應速度。javascript

2、service worker簡要介紹:

service worker是一段腳本,在後臺運行。做爲一個獨立的線程,不會對頁面形成阻塞。本質上充當Web應用程序與瀏覽器之間的代理服務器。native app能夠作到離線使用、消息推送、後臺自動更新,service worker的出現是正是爲了使得web app也能夠具備相似的能力。在線上必須在 HTTPS 環境下才能工做,或者本地localhost域名也是能夠的。css

3、使用方法

第一步選擇npm包,我用的是sw-precache-webpack-plugin這個包,基於webpack的插件,操做簡單使用方便,詳情請看文檔
而後進行基於webpack的配置,下面例子是taro框架h5部分的配置內容java

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

<script>
(function () {
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('./service-worker.js').then(function (registration) {
        // 註冊成功
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }).catch(function (err) {
        // 註冊失敗
        console.log('ServiceWorker registration failed: ', err);
    });
}
})();
</script>

大功告成,如今能夠在本地調試了,本地若是啓動了webpack-dev-server,則須要:webpack添加配置:git

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尚未註冊成功的話,可能的緣由以下:github

  1. 你沒有在 HTTPS 或localhost下運行你的項目。
  2. 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.
  3. service worker 在不一樣的 origin 而不是你的app的,這是不被容許的。
相關文章
相關標籤/搜索