pwa 解决H5缓存-Manifest

最新推荐文章于 2024-09-14 10:15:00 发布

web修理工

最新推荐文章于 2024-09-14 10:15:00 发布

阅读量1.1k

点赞数

分类专栏： JavaScript

原文链接：https://www.cnblogs.com/stoneniqiu/p/6480166.html

版权

JavaScript 专栏收录该内容

163 篇文章 2 订阅

订阅专栏

在app中更新h5页面一直有缓存问题。默认什么都不做的情况下，app有一定的空间缓存页面。一开始更新之后会马上加载，等到app缓存空间上来之后更新就无法下载了。安卓能够清理缓存空间，ios就只能卸载重装(are u kidding me?)。这是最坏的情况，你可以更换下地址。
注意到这一点之后，页面加入no-cache.

<meta http-equiv="Cache-Control" content="no-cache">

告诉浏览器不要缓存页面。实际是页面没有发生改变的时候请求是304,如果页面改变了才是200，所以说加了no-cache不是说每次都全新下载，而是更新了就会重新下载。但这个时候不同的手机表现还是不一样的。4s与6sp就不同。访问同一个页面，修改了js。4s更新了，6sp还是老样子。咋整呢，因为服务端还有缓存。先设置nginx缓存：

 location / {
           root   html;
           expires -1;
           index  index.html index.htm;
        }

并需要重启下nginx：

nginx -s reload

这个时候6sp也更新了。

但老是重启nginx不是办法啊，可能造成一些请求丢失。而且这种情况下，离线是完全不能用了。比如断网了去发消息，原本设置的一张红色叹号的图片和人物的头像都显示不出来。当然可以转成base64的字符串解决这个问题。base64就是很长，放在哪儿都占空间。怎么解决，manifest

no-cache+更新文件名+更新地址待测
1.设置html

<html manifest="index.appcache">

CACHE MANIFEST
#v1.0.0.0
#需要缓存的文件
js/zepto.js

#不需要缓存的页面
NETWORK:
*

#无法访问页面
FALLBACK
404.html

3.设置nginx mime

text/cache-manifest         appcache;

mime types文件都在conf目录下。启动nginx之后。这个时候页面会出现加载情况：
在这里插入图片描述
这个图说明2个事情，一个是流程上会先下载index.appcache，然后会陆续触发checking event,download event，progress event 和 updateReady event.二个是默认缓存了当前页面。而且居然是带个参数也缓存。看样子只要地址不一样的当前页都给缓存了(上面的缓存目录我只写了一个zepto)。再刷新页面：
在这里插入图片描述
index.appcache没有更新就不会触发检查。

加载缓存的文件状态是200，size一栏是from cache。从浏览器加载的是304，时间上一个是几毫秒，一个是十几毫秒。 f12进入开发者模式，在Application cache一栏可以看见被缓存的文件。
在这里插入图片描述
但在这个地方是无法清理的，需要在Application 中的 clear storage来清理。

更新已缓存的文件
最明显的就是首页，默认缓存下来。这个时候你改变首页内容而不修改index.appache是完全没有作用的。比如你删掉一个js的引用，客户端还是下载了这个js。这个时候你需要修改这个缓存文件：

#不需要缓存的页面
NETWORK:  
mobile/index.html
*

注意到虽然index.appache和index位于同一级，但不能写index.html，得写相当于网站的路径，其他资源也是一样。这个时候触发更新了，但页面还是加载的缓存资源，所以还需要做一个处理：

window.applicationCache.addEventListener("updateready", function(){
    location.reload()
  });

这样才会加载最新的页面。如果首页再发生修改，可以随意(加个空格，加空行)修改缓存文件，就能触发更新。所以剩下的问题就是记得在更新资源之后记得更新缓存文件。建议就是不变的资源(框架样式，框架js，图片)缓存下来，经常要修改的js就让浏览器缓存吧。现在这样就避免了reload nginx。这个效果要比加no-cache的方法好。当然，如果无所谓消息或者reload的影响。no-cache还是很方便，毕竟这个index.appache一旦加上，难以去掉，除非清理缓存。

`service-worker.js`
```ecmascript 6
// 缓存静态文件
self.addEventListener('install', function(event) {
  event.waitUntil(
      // 缓存指定文件
    caches.open('v1').then(function(cache) {
      return cache.addAll([
        '/',
        '/index.html',
        '/style.css',
        '/app.js',
        '/image-list.js',
        '/star-wars-logo.jpg',
      ]);
    })
  );
});

// 缓存接口数据
self.addEventListener('fetch', function(event) {
  event.respondWith(caches.match(event.request).then(function(response) {
    // 匹配到请求
    if (response !== undefined) {
      return response;
    } else {
      return fetch(event.request).then(function (response) {
        // 缓存响应数据
        let responseClone = response.clone();

        caches.open('v1').then(function (cache) {
          cache.put(event.request, responseClone);
        });
        return response;
      }).catch(function () {
        return caches.match('/gallery/myLittleVader.jpg');
      });
    }
  }));
});

// 更新缓存
self.addEventListener('activate', function(event) {
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          // 如果有更新
          if (cacheName !== 'v1') {
            return caches.delete(cacheName);
          }
        })
      );
    })
    .then(function(){
      return self.clients.claim()
    })
  );
});

webpack项目升级PWA
看到上边n多的API是不是很头疼，以及手动添加静态文件是不是很绝望，那么sw-precache-webpack-plugin这个插件轻松帮你解决所有问题现在我们就来升级下之前推过的小型Web页打包优化这片文章中所介绍的脚手架

1.修改文件：
index.html

<script>
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
      navigator.serviceWorker.register('./service-worker.js');
  });
}
</script>

webpack.prod.config.js ```ecmascript 6 var SWPrecacheWebpackPlugin = require(‘sw-precache-webpack-plugin’) // plugins 数组内添加 new SWPrecacheWebpackPlugin({ cacheId: ‘my-vue-app’, filename: ‘service-worker.js’, minify: true, // 其他更多配置请查看官方文档 })

自动生成service-worker.js并自动完成相关配置
2.通过正常逻辑打包~
npm run build ZZSellerTip
3.启动一个本地静态服务器
为了方便调试Service Worker在http://localhost或者http://127.0.0.1 本地环境下也可以跑起来将打包好的文件通过http-server生成的静态服务器运行运行结果：
在这里插入图片描述
关掉http-server可以看到依然可以访问