关于html5打包androidApp缓存问题

最新推荐文章于 2026-01-11 16:42:28 发布

原创最新推荐文章于 2026-01-11 16:42:28 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#android #app #angular #html

本文介绍了一种通过修改文件名并使用随机数跳转的方法来解决Angular+HTML5打包成APP后在Android设备上的缓存问题。具体措施包括利用hashmark工具自动更新CSS和JS文件名称，并新增一个入口页面来实现首页缓存的有效规避。

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

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

npm i hashmark

在配置文件中package.on中,运行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// \"bundle.\" {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同理替换;
hashmark 运行hashmark1和hashmark2

npm run hashmark1
npm run hashmark2
npm run hashmark

home.html替换的内容

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-widthinitial-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>