简介:

PWA 全称是: Progressive Web Apps 字面意思:渐进式的Web应用程序

旨在让Web应用更像真实的APP应用(本机应用程序)。 说白了,就是传统Web应用程序的,加强版。通过网络提供的移动应用程序。

新闻:

  • PWA在2018年中旬,与Chrome(Windows,Mac,Linux,Chrome OS)一起使用。(Window 10 上已支持PWA,可以在任务栏,单窗口显示。)

  • Android端:Chrome、Firefox、Opera、三星浏览器;苹果的Safari;都已支持PWA

  • Google正在推出 WebAPK 技术,可以将 PWA 转化为 APK安装文件。

  • 2018将是 PWA 腾飞的一年(自2015年推出以来)。在Window 10 上表现更活跃。

  • 华为手机应用商店、微信小程序,也表明了,即时应用程序(PWA)是大趋势。

PWA支持情况?

  • 国产手机上的浏览器,支持不太好。
  • Chrome for android 需要谷歌商店,VPN下。
  • 必须https网站(Chrome可以localhost测试)。

现有的wap站点下快速启动

  • 添加manifest文件。
  • 添加Service Worker (fetch页面代理,做缓存策略, 这个服务是常驻浏览器的,下次进来激活SW,判断缓存更新等)
  • 可以使用Cache API 或者 IndexedDB 或者 LocalStorage
  • 使用webp格式图片http://www.etherdream.com/WebP/Demo1.html
  • 做兼容处理。
  • PWA与hybrid与原生应用的区别?

  • 它有别于hybrid, PWA从不打包到脱机文件中(更多表现在:可脱机预览,可自动到最新状态)。PWA支持的用户体验功能更多。 PWA是原生应用程序和移动网站的混合体,速度比Wap更快。用户无需等待,在后台更新加载。

  • 原生应用,需要应用商店(中间商),PWA可直达(一步到位)用户各个设备中。 安装和更新更方便。还不需要内容审核。

  • PWA效率更高,开发成本更低。作为自家的技术,在Android平台是大势所趋。

什么是PWA?

它是一个新技术,由Google、Microsoft、Mozilla、Apple等公司正在制定的一个新的现代Web应用程序标准

可以在应用商店(Win10商店)中列出PWA以便于发现和安装,但应用商店只会指向该Web应用的服务器。即使应用程序与应用商店的内容政策不兼容,用户也可以直接从浏览器中查找并安装它。

真正的实现:一次编写,全端运行(iOS,Android,Windows和Web等),更新维护更方便!

根据 google 定义,PWA 应该具有一下特性:

    渐进式:能确保每个用户都能打开网页(所有浏览器和设备上运行)


    响应式:PC,手机,平板,不管哪种格式,网页格式都能完美适配


    离线应用:支持用户在没网的条件下也能打开网页,这里就需要 Service Worker 的帮助


    APP 化:能够像 APP 一样和用户进行交互(PC上可以桌面快捷方式、任务栏,手机上可以主屏幕快捷方式)


    常更新:一旦 Web 网页有什么改动,都能立即在用户端体现出来。(Web服务器更新即可,没有各种应用商店的的繁琐)


    安全:安全第一,给自己的网站加上一把绿锁--HTTPS


    可搜索:能够被引擎搜索到


    推送:做到在不打开网页的前提下,推送新的消息


    可安装:能够将 Web 像 APP 一样添加到桌面


    可跳转:只要通过一个连接就可以跳转到你的 Web 页面

用到的技术:

Web App ManifestWeb应用程序清单在一个JSON文本文件中提供有关应用程序的信息(如名称,作者,图标和描述)。manifest 的目的是将Web应用程序安装到设备的主屏幕(Install to desktop),为用户提供更快的访问和更丰富的体验。【需放置根目录】

搜索引擎将能够抓取网页并轻松找到可在线使用的PWA。这将使PWA易于发现,就像网页一样。

Cache API

IndexedDB

Fetch API 提供了一个获取资源的接口(包括跨域),更快,更简单。任何使用过XMLHttpRequest的人都能轻松上手,但新的API提供了更强大和灵活的功能集。

Service Worker 是拦截和响应你的网络请求的编程接口。如果你不需要离线功能,可以简单的创建一个空的/service-worker.js文件 —— 会被提示安装你的 app。【需放置根目录】

Service Worker 是一个位于浏览器与网络之间的客户端代理,它以可拦截、处理、响应流经的 HTTP 请求,使得开发者得以从缓存中向 web 应用提供资源而闻名。不过,Service Worker 其实也可以主动发起 HTTP 请求,在“后台” 预请求与预缓存我们未来所需要的资源。

浏览器用一个单独的线程来下载和执行它。他可以拦截网络请求,包括页面切换,静态资源下载,ajax请求所引起的网络请求。

service worker 主要有三个事件:installactivatefetch

install:app被安装时触发。它经常用来缓存必要的文件。缓存通过Cache API来实现。

WebP 的优势体现在它具有更优的图像数据压缩算法,能带来更小的图片体积,而且拥有肉眼识别无差异的图像质量;同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性,在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。

https://developers.google.com/web/progressive-web-apps

https://huangxuan.me/pwa-qcon2016/#/38

https://www.cnblogs.com/yjken/p/3922299.html

http://www.infoq.com/cn/articles/exploration-and-practice-of-baidu-search-for-pwa

https://segmentfault.com/a/1190000008880637

https://www.howtogeek.com/342121/what-are-progressive-web-apps/

https://jakearchibald.github.io/isserviceworkerready/

https://github.com/goldhand/sw-precache-webpack-plugin

https://github.com/GoogleChromeLabs/sw-toolbox

https://zhuanlan.zhihu.com/p/25800461

https://huangxuan.me/2017/07/12/upgrading-eleme-to-pwa/

results matching ""

    No results matching ""