uniapp开发webview的app如何实现pwa离线运行打开?
网友回复
uniapp的webview暂不支持pwa网站的离线打开方式,但是uniapp可以创建一个pwa的 h5网站,教程如下:
上图的 sw.js 打包后需要放在于index.html同层级 下面是index.html模板代码
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title> <%= htmlWebpackPlugin.options.title %> </title> <!-- Open Graph data --> <!-- <meta property="og:title" content="Title Here" /> --> <!-- <meta property="og:url" content="http://www.example.com/" /> --> <!-- <meta property="og:image" content="http://example.com/image.jpg" /> --> <!-- <meta property="og:description" content="Description Here" /> --> <script> var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)')) document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />') </script> <link rel="mainfest" href="<%= BASE_URL %>static/json/mainfest.json" /> <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" /> </head> <body> <noscript> <strong>Please enable JavaScript to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> <script type="text/javascript"> if ("serviceWorker" in navigator && 'PushManager' in window ) { window.addEventListener('load', async () => { // 这个load 可以删除 如果你的浏览器没加载出来 可以添加一下这个 navigator.serviceWorker.register("/static/js/sw.js").then(function (registration) { }); }) } </script> </body> </html>找到index.html 你可能需要修改的
<link rel="mainfest" href="<%= BASE_URL %>mainfest.json" /> <script type="text/javascript"> if ("serviceWorker" in navigator && 'PushManager' in window ) { window.addEventListener('load', async () => { // 这个load 可以删除 如果你的浏览器没加载出来 可以添加一下这个 navigator.serviceWorker.register("/static/js/sw.js").then(function (registration) { }); }) } </script>mainfest.json 的代码
{ "name": "", // 网站应用的全名 "short_name": "", // 显示在主屏上的短名字。 "start_url": "/", // 启动应用时打开的主页 一般是 / "display": "", // 应用的显示方式;可以是 `fullscreen`、`standalone`、`minimal-ui` 或者 `browser`。 "background_color": "#333", // 背景色,用于安装和显示启动画面时 "description": "一个搜索图书的小WebAPP(基于豆瓣开放接口)", //一两句话解释你的应用的用途。 "lang":"zh-CN", "orientation": "portrait-primary", // 屏幕方向 "theme_color": "#5eace0", // UI 主颜色,由操作系统使用。 "icons": [{ // 一串图标信息:源 URL,大小和类型。多包含几个图标,这样就能选中一个最适合用户设备的。 "src": "img/icons/book-32.png", "sizes": "32x32", "type": "image/png" }] }我们还需要一个 vue.config.js vue.config.js是用来配置编译打包 uniapp也有对应的vue.config.js 的文档可以去看看
module.exports = { configureWebpack: { plugins: [ new CopyWebpackPlugin([ { from: path.join(__dirname, '/static/js/sw.js'), to: path.join(__dirname, 'unpackage/dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process.env.UNI_PLATFORM, '') } ]), new CopyWebpackPlugin([ { from: path.join(__dirname, '/static/json/mainfest.json'), to: path.join(__dirname, 'unpackage/dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process.env.UNI_PLATFORM, '') } ]) ] },接下来是最主要的 /static/js/sw.js 大部分人都写成service-worker.js 我就简写为sw.js 注意 sw.js 打包后要放在根目录下,否则无法监听fetch事件
/** * service worker */ var cacheName = ''; var apiCacheName = ''; var cacheFiles = [ '/', './index.html', ]; // 监听install事件 self.addEventListener('install', function (e) { console.log('Service Worker 状态: install'); }); // 监听activate事件 self.addEventListener('activate', function (e) { console.log('Service Worker 状态: activate'); }); self.addEventListener('fetch', function (e) { // 需要缓存的xhr请求 console.log("fetch 事件") });