progressive web application 是谷歌推出的一种渐进式 web 应用,通过利用 service-worker 等来达到类似于原生应用,而且在 chrome 浏览器还可以添加到主页,完全就和一个 app 无异。老实说我觉得 pwa 是一个很好的发展方向,虽然小程序搞了一段时间不温不火,但是 pwa 的限制更少,再说还有谷歌支持,只不过现在部分浏览器可能支持的不是很好。 国内饿了么前段时间做了一个 pwa,我觉得就挺好的 https://h5.ele.me/msite/ 。 我觉得和 native app 使用已经比较接近了,而且还无需安装。 扯得有点多,今天主要是讲下自己怎么做一个 pwa。当然了,我也是新手,我的 pwa 也是基于谷歌的 pwa 的 sample 做了一些改进。谷歌现在很多开发者文档都做了翻译,sample 主要是一个天气应用,里面具体的实现逻辑我就不讲了,我讲以下如何部署这个 pwa。 在谷歌的 sample 里面是推荐使用 firebase 来部署你的 pwa,但是由于国内的高墙,在 firebase init 的时候总是 authentication error,stackoverflow 上面说是代理的原因,但是不上代理又没办法使用 firebase,所以这是一个死循环。但是!!我们有 github page,github page 是一个很好的展示静态页面的方面,以前只能支持渲染 gh 分支里面的内容,现在 github 对于 github page 功能做了完善,详细可以看下这篇文章 http://blog.csdn.net/neal1991/article/details/53535914 。 下面跟我来: 1. 进入 https://github.com/neal1991/pwa 可以 fork 或者 clone 这个项目,我已经将里面的一些东西,改掉了,可以直接运行。 2. 进入 settings 里面设置 现在你进入 https://yourusername.github.io/your-reporistry-name / 就可以发车了,是不是很快。 接着我还想讲一讲我这个项目做的一些改进的地方,因为这个 weather pwa 使用的是 yahoo 的一个 api,通过利用 woeid 可以去查询各个城市的天气以及相关信息。但是网上却没有中国各个城市的数字代码,注意是 WEPID 代码,我后来发觉 http://www.imeihua.net/tool/weathercode.aspx 这个网站是可以查询 wepid 的,本来想写一个爬虫爬取的,但是这个网站似乎做了什么限制,我使用 curl 模拟下请求,限制访问了,这个网站使用. NET 实现的,.NET 的 web 请求里面总是包含了一些奇怪的属性。后来我又发现一个国外的网站,很方便,直接 get 请求就能获取 http://woeid.rosselliot.co.nz/lookup ,于是我就写了一个爬虫去爬取,源代码在 https://github.com/neal1991/woeid-parser 核心代码
- varrequest =require('superagent');varfs =require('fs');varcityConfig = ['wuhu','shanghai','beijing','hangzhou','nanjing','wuxi','xiamen','longyan'];varcheerio =require('cheerio');varurl ='http://woeid.rosselliot.co.nz/lookup/';varattrNames = ['city','province','country','woeid'];varresult = [];
- cityConfig.forEach(function(city){request.get(url + city)
- .end(function(err, res){$ = cheerio.load(res.text);
- $('#woeid_results_table tr').each(function(i, ele){
- varobj = {};
- $ = cheerio.load(ele);
- $('td').each(function(index, td){obj[attrNames[index]] = $(this).text();
- })
- result.push(obj);
- });varisEmpty =function(object){
- for(varkeyinobject) {return false;
- }return true;
- }
- result = result.filter(function(obj){
- returnobj.country ==='China'&& !isEmpty(obj);
- })
- fs.writeFile('result.json',JSON.stringify(result,null,"\t"));
- })
- });
主要是使用了 superagent 和 cheerio 这两个包,一个是用来发请求的,另外一个是用于解析 html 的,城市名需要英文城市名,我这里就是 config 来配置的,然后对结果做了过滤保存成 json 格式的文件。 这样就提供了我们中国城市 wepid 的数据源,当然我还没有做去读取 json 来获取这些数据,还是把这些 wepid 写死了放在 weather pwa 里面的。 对于 weather pwa 我还增加了删除城市的功能,因为本来只能添加城市,没有办法删除城市,可能里面还有一些小 BUG。访问地址: https://neal1991.github.io/pwa/ 以上,就是我的第一次 progressive web application,各位看官,如果觉得我的内容写的还可以的话,一定要给我的 github repository star 鼓励!!!
来源: http://blog.csdn.net/neal1991/article/details/63684674