五千年(敝帚自珍)

主题:【原创】PWA,边学边问边用 -- 铁手

共:💬11 🌺59
全看分页树展 · 主题
家园 【原创】PWA,边学边问边用

PWA: Progressive Web Application. 主推的是GOOGLE,最不卖力的是 APPLE,应该算是最近几年一个比较热门的技术话题。最重要一点是给网站为主的应用提供了一种新的应用方式。

最近几年来,智能手机为代表的移动上网越来越主流。在智能手机上,大部分人习惯于使用不同的 APP 来达到不同的功能。对于很多的网站来说,面临几个选择。

1、重起炉灶,在不同平台上用平台工具来写 原生APP,好处是能够充分利用智能手机的软件和硬件环境。一般来说,人机界面,使用效果比较好,比较流畅。

2、继续利用已经存在的网站程序,在上面加一层包装,然后获得与原生 APP 类似的效果。比如 Cordova,Weex,NativeScript,React Native这一类。尽可能保留已经有的 HTML,JAVASCRIPT,CSS这方面的资源,然后在这个基础上扩展使用移动设备的原生功能。

3、就是我们要讨论的 PWA方式,主要是通过浏览器功能的强化,还是一个需要浏览器的网站应用,但是具有很多原来哪怕是动态网站也难以实现的动态功能。

这三种方式都可以成为单独的应用,但是实现的机制不同。PWA的好处,我想是在于它还是一个网站,可以被搜索引擎检索,内容可以通过搜索引擎被发现。举个例子,很多人用微信,在上面有很多内容,但是这些内容没法被搜索,随着时间流逝,相当于就消失了。也就是说,各种独立的 APP,它们里面的内容只能在 APP 里面找,外面没法找,第三方可能也没法找。互联网,特别是网页的好处,是在于内容可以被发现,几乎可以永久存在。

PWA 是 GOOGLE 在主推,也就很好理解了。既有原生 APP 的使用体验,也能够被搜索引擎检索,应该是 PWA 的重点。能被检索这点不需要担心,重点就是使用体验了。

所谓渐进 PROGRESSIVE,就是不需要什么都从头来过,而是条件允许就实现一部分功能。

按照我的理解,PWA主要涉及: Service worker, Manifest, Https。Https 是加密传输,现在费用低了很多,因为安全考虑,应用已经非常广泛,不是大问题。 Manifest 主要涉及到网站资源,也不是大问题。技术上需要费点脑筋的,也就是 Service worker 了。

下面是我对 Service worker 的理解,有不对请多多指教。有一些疑问,也希望能够得到指点。

现在很多网站都使用 Javascript来实现很多动态功能。Service worker 也是用 Javascript 来实现。普通的 Javascript 是和各个网页绑在一起,执行也是在各个网页中。Service worker是挂在浏览器里,和网址绑在一起。在某个网址翻看不同页面时,浏览器通过 Service worker 来和网站服务器打交道,当前页面,甚至是相关的页面,以及页面上的各种资源如图片等等,都可以被缓存。

我的理解,Service worker 就象是代理人。比如以下情形:

我对 SW 说,我需要 A。

SW 可以先把手头的 A 给我,然后到库房里再去拿个 A 来下次我要马上就可以给我。

SW也可以认为手头的 A 有点过期,就先去库房找 A,找到后一边给我一边留个备份。

我的疑问是,SW来缓存,和浏览器浏览页面的缓存有什么本质区别?浏览器的缓存,还可以在服务器端指定缓存的方式和缓存的有效期。SW也是那样么?

还有,普通的 Javascript 是当前页面当前执行,如果某个页面关掉了,里面的 Javascript 也就自动失效了。SW 是不是只要有一个页面开着,它就会自动执行,直到某个网址的所有页面都关闭?还是说即使都关闭了,它还能继续执行,除非是浏览器关闭?

PWA比较强调离线使用。我觉得不是那么重要,而且费劲。比如说离线状态下回复某个帖,多出很多代码来。比较重要的是,能够象 APP 一样安装到用户手机上,点击 APP 的图标就可以直接访问网站。

SW 提供的 PUSH NOTICE在这里怎么工作?需要还是不需要浏览器就可以在后台进行数据更新?

我准备慢慢对西西河网站做 PWA的改造,一边学,一边问,一边用。希望能够得到大家指点。

关键词(Tags): #PWA西西河#Service worker通宝推:南宫长万,透明,
全看分页树展 · 主题


有趣有益,互惠互利;开阔视野,博采众长。
虚拟的网络,真实的人。天南地北客,相逢皆朋友

Copyright © cchere 西西河