taro框架轉的h5,想在無網絡狀態下能夠控制展現給用戶的界面,使用客戶端離線緩存能夠達到目的,而且能夠將靜態資源進行緩存,從而減小白屏時間,加快頁面相應速度。javascript
service worker是一段腳本,在後臺運行。做爲一個獨立的線程,不會對頁面形成阻塞。本質上充當Web應用程序與瀏覽器之間的代理服務器。native app能夠作到離線使用、消息推送、後臺自動更新,service worker的出現是正是爲了使得web app也能夠具備相似的能力。在線上必須在 HTTPS 環境下才能工做,或者本地localhost域名也是能夠的。css
第一步選擇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