Progressive web application是谷歌推出的一种渐进式运用，我以为实在PWA是一种异常具有生长前景的手艺。起首，PWA是由谷歌推出的，而且跨平台,PWA可以给你类似于原生APP的体验，经由过程service worker，你可以将资本缓存到当地。然则，PWA再国内一向都是不温不火，重要有好几个缘由：一是由于国内的浏览器环境比较复杂，而PWA平常只是可以在chrome浏览器获得较好的支撑。虽然chrome在桌面端占有了很大比例，然则在挪动端照样平常般，一般的用户不一定会去装置Chrome。二是safari浏览器关于PWA的支撑不是很圆满，service worker现在照样没有获得支撑的。

然则我是以为PWA照样很好的，值得开发者们进一步探究。有一点偏题了，本日要议论的实际上是PWA内里service worker资本的缓存题目。重要题目的背景是如许的，我有一个上海地铁线路图的PWA，可以支撑离线运用，有兴致的同砚可以尝试看看。我碰到一个题目，就是每次我更新以后代码以后，到场我的PWA被添加到主屏以后，这个APP的代码就没有更新，必需删除后从新重浏览器中添加到主屏。一开始我以为是PWA的题目，厥后竟他人提示，桌面上的APP实在也就是网站的链接。我这才豁然开朗，题目是由于我的servicer worker内里的缓存战略有题目。由于我的APP经由过程service worker来缓存资本，包含js,css以及图片文件，所以始终是从缓存中加载资本，所以我长途代码更新后，这个APP的代码却没有获得更新。OK，拿代码措辞，我一开始的代码是：

var cacheName = 'subway';
var filesToCache = [
    '/',
    'index.html',
    'image/transfer.png',
    'dist/alloy_finger.js',
    'app.css'
];

self.addEventListener('install', function(e) {
    console.log('service worker install');
    e.waitUntil(caches.open(cacheName).then(function(cache) {
        console.log('serviceworker caching app shell');
        return cache.addAll(filesToCache);
    }));
});

可以看出我们在install事宜后经由过程在cache内里加载文件，所以我们必需挑选一种适宜的战略可以让我们的APP在代码更新以后去请求新的代码呢？

Google实在在PWA推出的过程当中也给出了许多有效的手艺。比方sw-precache以及sw-toolbox，以及近来正在生长过程当中的sw-helper。这里，我重要运用的是sw-precache来更新我的service worker战略。

sw-precache也是NODE中的一个模块，可以经由过程npm install sw-precache来举行装置。sw-precache可以合营多个东西运用，这里我重要引见一下怎样合营gulp来运用。我们经由过程应用sw-precache来协助我们天生sw-precache。饿了么的huangxuan在medium写了一篇文章来渗透地引见sw-precache，这篇文章写的不错，然则倒是在墙外，重假如引见sw-precache的工作体式格局。我就谈一下我对sw-precache的明白把，以一个gulpfile的一段代码为例：

gulp.task('generate-sw', function(callback) {
    var path = require('path');
    var swPrecache = require('sw-precache');

    swPrecache.write(path.join('sw.js'), {
        staticFileGlobs: [
            'app.js',
            'dist/alloy_finger.js',
            'dist/app.css',
            'image/*.{png}',
            'index.html',
            '/'
        ]
    }, callback)
})

我们经由过程应用sw-precache来天生sw.js文件。重要的体式格局是检测你在staticFileGlobs内里的文件有无发生变化，假如发生变化就会从新天生hash码，从而可以使得APP在代码更新以后向长途请求新的代码。

这篇文章能够只是很小的一点，关于service worker的运用另有许多东西值得进修，迎接关注我的github配合讨论。