关于html5打包androidApp缓存问题

最新推荐文章于 2024-04-23 17:26:16 发布

fish_dw

最新推荐文章于 2024-04-23 17:26:16 发布

阅读量2.2k

点赞数

文章标签： android app angular html

本文链接：https://blog.csdn.net/fish_dw/article/details/81202566

版权

angular+html5打包成app时，android手机会出现缓存问题
这个项目使用了gulp打包压缩js/css，使用了每改一次内容就修改文件名字方式来防止缓存

一、使用npm run hashmark 修改文件名
安装npm包里的hashmark，运行

npm i hashmark

在配置文件中package.json中,运行scripts里的命令（npm run xxxx）

"scripts": {
    "hashmark1": "hashmark -l 8 -r --cwd app/dist/css/ \"bundle.css\" {name}.{hash}{ext} | map-replace -m \"<[^>]+>\" app/dist/home.html",
    "hashmark2": "hashmark -l 8 -r --cwd app/dist/js/ \"bundle.js\" {name}.{hash}{ext} | map-replace -m \"<[^>]+>\" app/dist/home.html",
    "hashmark": "npm run hashmark1 && npm run hashmark2"
  },

例

hashmark1：就是把app/dist/css下的bundle.css文件修改文件名bundle.(随机数).css
并且替换掉app/dist/home.html里的bundle.css；
hashmark2同理替换js;
hashmark 运行hashmark1和hashmark2

npm run hashmark1
npm run hashmark2
npm run hashmark

home.html替换的内容

<link type="text/css" rel="stylesheet" href="/css/bundle.7c3a8cbb.css?v=2018-7-24--17:1:15">
<script data-main="/js/bundle.d0628d89.js?v=2018-7-24--17:1:15" src="/js/require.min.js"></script>

二、新增入口页面进行页面跳转，防止home.html有缓存
home.html为首页，新增页面只是为了跳转到home.html中
如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>全筑e家</title>

    <script>
        window.location.href = 'home.html?v='+ Math.random();
    </script>
</head>
<body>

</body>
</html>

fish_dw

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于html5打包androidApp缓存问题

angular+html5打包成app时，android手机会出现缓存问题这个项目使用了gulp打包压缩js/css，使用了每改一次内容就修改文件名字方式来防止缓存一、使用npm run hashmark 修改文件名安装npm包里的hashmark，运行 npm i hashmark在配置文件中package.json中,运行scripts里的命令（npm run ...
复制链接

扫一扫