现在开始从头部署一个PWA项目

Step1 新建一个项目文件

项目目录如下图：

其中manifest.json如下所示：

{  "name": "Weather",  "short_name": "Weather",  "icons": [{    "src": "images/icons/icon-128x128.png",      "sizes": "128x128",      "type": "image/png"    }, {      "src": "images/icons/icon-144x144.png",      "sizes": "144x144",      "type": "image/png"    }, {      "src": "images/icons/icon-152x152.png",      "sizes": "152x152",      "type": "image/png"    }, {      "src": "images/icons/icon-192x192.png",      "sizes": "192x192",      "type": "image/png"    }, {      "src": "images/icons/icon-256x256.png",      "sizes": "256x256",      "type": "image/png"    }],  "start_url": "/index.html",  "display": "standalone",  "background_color": "#3E4EB8",  "theme_color": "#2F3BA2"}

然后根目录下面的service-worker.js文件内容如下：

/** * author:SunShinewyf * date:2017-4-20 * desc:some setting of worker **/var dataCacheName = 'ppData-v1';var cacheName = 'ppPWA-final-1';var filesToCache = [    '/',    '/index.html',    'styles/index.css'];self.addEventListener('install',function(e){    console.log('[pp serviceWorker install');    e.waitUntil(        caches.open(cacheName).then(function(cache){            console.log('serviceWorker Caching app shell');            return cache.addAll(filesToCache);        })    );});self.addEventListener('activate', function(e) {    console.log('[ServiceWorker] Activate');    e.waitUntil(        caches.keys().then(function(keyList) {            return Promise.all(keyList.map(function(key) {                if (key !== cacheName && key !== dataCacheName) {                    console.log('[ServiceWorker] Removing old cache', key);                    return caches.delete(key);                }            }));        })    );    return self.clients.claim();});self.addEventListener('fetch', function(e) {    console.log('[Service Worker] Fetch', e.request.url);    var dataUrl = 'https://query.yahooapis.com/v1/public/yql';    if (e.request.url.indexOf(dataUrl) > -1) {        e.respondWith(            caches.open(dataCacheName).then(function(cache) {                return fetch(e.request).then(function(response){                    cache.put(e.request.url, response.clone());                    return response;                });            })        );    } else {        e.respondWith(            caches.match(e.request).then(function(response) {                return response || fetch(e.request);            })        );    }});

至于app.js和index.html则根据你具体的项目而定，你可以根据自己的项目填充一些东西

在本地运行

添加web server for Chrome 点击 添加后会跳转到这个页面：

点击choose folder，然后选中上面新建的index.html,然后打开下面的http://127.0.0.1:8887就可以访问了

部署

部署到firebase

• 进入
• 创建一个Firebase账户
• 添加一个项目

• 通过 npm 安装 Firebase：npm install -g firebase-tools
• 进入到你上面建的目录下面，执行firebase login,会看到下面的页面：

这时浏览器会自动跳转到下面这个页面

点击'允许'之后就会弹出一个页面

这里是public目录里面初始的index.html页面，这里需要将这个页面更改为你自己的项目文件

• 执行firebase init 这时会跳出一些选项，你可以针对自己的实际情况进行选择。这里不多说

• 执行firebase deploy 当看到控制台出现下面这样的时候：

就说明已经部署成功了

• 在收集浏览器打开上面最后图片最后一行的网址，如下图所示：

• 点击上图中右上角的三个小点的图标，然后选择 '添加到主屏幕'
• 回到手机桌面，就可以看到有相应的图标出来了,离线打开该应用，看是否正常加载页面
• 用 跑一下，按照提示改进一下
• 对比一下谷歌的 ，按照提示改进改进；

至此，大功告成。 不过这个demo比较简单，也没有配置数据库，仅当入门教程使用