第一个progressive web application,发车!

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

核心代码

var request = require(‘superagent‘);
var fs = require(‘fs‘);
var cityConfig = [‘wuhu‘, ‘shanghai‘, ‘beijing‘, ‘hangzhou‘, ‘nanjing‘, ‘wuxi‘, ‘xiamen‘, ‘longyan‘];
var cheerio = require(‘cheerio‘);
var url = ‘http://woeid.rosselliot.co.nz/lookup/‘;
var attrNames = [‘city‘, ‘province‘, ‘country‘, ‘woeid‘];
var result = [];

cityConfig.forEach(function(city) {
    request.get(url + city)
    .end(function(err, res) {
        $ = cheerio.load(res.text);
        $(‘#woeid_results_table tr‘).each(function(i, ele) {
                var obj = {};
                $ = cheerio.load(ele);
                $(‘td‘).each(function(index, td) {
                    obj[attrNames[index]] = $(this).text();
                })
                result.push(obj);
        });
        var isEmpty = function(object) {
            for (var key in object) {
                return false;
            }
            return true;
        }
        result = result.filter(function(obj) {
            return obj.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鼓励!!!

时间: 2024-10-16 03:04:10

第一个progressive web application,发车!的相关文章

你的首个 Progressive Web App

什么是 Progressive Web App? Progressive Web Apps 是: 渐进增强 - 能够让每一位用户使用,无论用户使用什么浏览器,因为它是始终以渐进增强为原则. 响应式用户界面 - 适应任何环境:桌面电脑,智能手机,笔记本电脑,或者其他设备. 不依赖网络连接 - 通过 service workers 可以在离线或者网速极差的环境下工作. 类原生应用 - 有像原生应用般的交互和导航给用户原生应用般的体验,因为它是建立在 app shell model 上的. 持续更新 

理解SharePoint Web Application和IIS Web Sites 和 HTTP请求

当你创建一个web application的时候,你实际上在IIS里面创建了一个站点.一个IIS站点有bindings,包含单独的IP地址,一个Host Header 和port.IIS通过Bindings来决定HTTP 请求是请求的哪个站点. 当一个用户请求一个网页的时候,比如http://intranet.contoso.com/SitePages/Home.aspx, 客户端发起了一个HTTP请求.客户端通过查询DNS来获取到Host(比如intranet.contoso.com)的IP地

RxJS入门(7)----创建一个完整的web application

在本章中,使用Rxjs,我们将创建一个典型的web application.我们将转化Dom Object Model(DOM)并且使用node.js中的websocket做c/s的交互. 用户界面部分,我们将使用RxJs-Domlibrary,这同样是Rxjs团队做的库,提供了方便的操作符来处理DOM和浏览器相关的使我们的编码更容易.服务器端:我们将是使用两个建立很好的node库,并用Observable封装他们的一些API到我们的application中. 在这一章之后,你将能使用RxJs创

Progressive Web App

下一代 Web 应用? 近年来,Web 应用在整个软件与互联网行业承载的责任越来越重,软件复杂度和维护成本越来越高,Web 技术,尤其是 Web 客户端技术,迎来了爆发式的发展. 包括但不限于基于 Node.js 的前端工程化方案:诸如 Webpack.Rollup 这样的打包工具:Babel.PostCSS 这样的转译工具:TypeScript.Elm 这样转译至 JavaScript 的编程语言:React.Angular.Vue 这样面向现代 Web 应用需求的前端框架及其生态,也涌现出了

在GlassFish应用服务器上创建并运行你的第一个Restful Web Service【翻译】

前言 本人一直开发Android应用,目前Android就业形势恶劣,甚至会一路下滑,因此决定学习服务器开发.采用的语言是java,IDE是Intellij,在下载Intellij的同时看到官网很多优秀的guide文章,于是按照guide成功完成了一个RESTful的demo.官方文档非常简洁,给我带来了很大的帮助,于是翻译之,希望对其他不愿意看原文的人有所帮助.由于水平有限,读者发现错误请指正,谢谢. 原文地址: https://www.jetbrains.com/help/idea/2016

匿名访问之(一)web application级别

如果用SharePoint做一个对外开放的公共站点,比如公司展示网站,那么浏览网站的人不需要注册和登陆,就应该能看到内容.这个时候就需要对站点开启匿名访问. SharePoint的匿名访问是从上而下的,Farm管理员可以在Central Administration里,在Web Application级别做总控. 在Web Application页面,选择一个Web Application,点击ribbon上的Anonymous Policy: 发现这里的设置并没有开启: 这是因为并没有在这个W

The web application you are attempting to access on this web server is currently unavailable.......

今天去服务器安装了个.net 4.0 framework(原本有1.0和2.0的),配置好站点后,选择版本为4.0,访问出错,错误代码如下 Server Application Unavailable The web application you are attempting to access on this web server is currently unavailable.  Please hit the "Refresh" button in your web brows

说说 PWA 和微信小程序--Progressive Web App

作者:云图图链接:https://zhuanlan.zhihu.com/p/22578965来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 利益相关:微信小用户,谷歌小员工 微信发布了微信小程序,虽然还在内测阶段,但是无论从技术上,还是以后要不要开发原生应用(native app)上引发了不少讨论.其实看到微信小程序的消息, 我第一时间想到的是 Google 之前推出的PWA(Progressive Web App),两者的目的是类似的(伪原生应用),但是形式却又

使用 Android 客户端向 Ruby on rails 构建的 Web Application 提交 HTTP GET 和 HTTP POST 请求

最近想弄个能访问 Internet 的 Android 应用,因为求快所以用了 Ruby on Rails 来提供 HTTP 资源.这方面的资料还是比较少的,所以把尝试的过程记录下来. 1 使用 Ruby on Rails 构建 Web Application 1.1 新建 Web Application rails new Test cd Test 1.2 生成 product rails generate scaffold product reference:string quantity: