前言
- 关于PWA的文档网上有很多，我这里就不多说了，可以点下面链接查看，本文主要讲解如何在ionic项目中使用PWA
https://segmentfault.com/a/1190000012353473
https://juejin.im/post/5ac8a67c5188255c5668b0b8 - 我们一般使用ionic开发移动app，但是PWA是让网页应用拥有原生app体验，所以PWA适用于使用ionic开发的网页，如微信公众号等网页应用
- 注意PWA要求
https协议或可以用localhost测试
ionic启用PWA
- ionic项目中已经集成了PWA功能，我们只需要启用即可，参考
- 如下图，我们只需要把注释内容取消就启用了PWA
- 如果你的项目本身就是ionic网页项目，则删除PWA注释，并删除
<script src="cordova.js"></script>
看效果
-
启用了PWA后，资源从服务器下载后就缓存到本地，刷新应用或重新进入应用，都是从本地加载资源，所以加载的非常快；当加载完成后，应用才会再请求服务断判断资源是否有更新，如果有，则缓存新资源，下次刷新或重新进入应用时应用更新；你也可以在这里调试：https://yanxiaojun617.com/ionic2_tabs_pwa/
-
在手机浏览器访问应用会提示是否添加应用图标到桌面，如下图
注意不是所有浏览器都会有提示添加图标到桌面，我这里使用小米手机默认浏览器测试的
-
在上图中点击确定添加应用到桌面，然后点击桌面图标访问应用，可以看到和原生app几乎一样，有启动页，没有浏览器地址栏
-
关于桌面图标，应用名称，启动页背景，是否显示浏览器等配置都是在
manifest.json文件中配置的；详细配置说明点这里
发布应用
- 使用
ionic build --prod把src下的源码打包到www目录下，然后把www目录下的资源放到服务端即可
其他
- 如果你的项目不使用PWA，又想使用缓存提升用户体验，可以看这篇文章末尾关于缓存的介绍
