前言

• 关于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/
  

  

• 在手机浏览器访问应用会提示是否添加应用图标到桌面，如下图
  注意不是所有浏览器都会有提示添加图标到桌面，我这里使用小米手机默认浏览器测试的
  

  

• 在上图中点击确定添加应用到桌面，然后点击桌面图标访问应用，可以看到和原生app几乎一样，有启动页，没有浏览器地址栏
  

  

• 关于桌面图标，应用名称，启动页背景，是否显示浏览器等配置都是在manifest.json文件中配置的；详细配置说明点这里
  

  

发布应用

• 使用ionic build --prod把src下的源码打包到www目录下，然后把www目录下的资源放到服务端即可
  

其他

• 如果你的项目不使用PWA，又想使用缓存提升用户体验，可以看这篇文章末尾关于缓存的介绍