第一個progressive web application，發車！

標籤：Google   use   web應用   相關資訊   view   keyword   split   頁面   爬蟲   

progressive web application是Google推出的一種漸進式web應用，通過利用service-worker等來達到類似於原生應用，而且在chrome瀏覽器還可以添加到首頁，完全就和一個app無異。老實說我覺得pwa是一個很好的發展方向，雖然小程式搞了一段時間不溫不火，但是pwa的限制更少，再說還有Google支援，只不過現在部分瀏覽器可能支援的不是很好。
國內餓了麼前段時間做了一個pwa，我覺得就挺好的 https://h5.ele.me/msite/ 。
我覺得和native app使用已經比較接近了，而且還無需安裝。
扯得有點多，今天主要是講下自己怎麼做一個pwa。當然了，我也是新手，我的pwa也是基於Google的pwa的sample做了一些改進。Google現在很多開發人員文檔都做了翻譯，sample主要是一個天氣應用，裡面具體的實現邏輯我就不講了，我講以下如何部署這個pwa。
在Google的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鼓勵!!!

第一個progressive web application，發車！