文档章节

PWA实践

sunshinewyf
 sunshinewyf
发布于 2017/04/26 18:28
字数 671
阅读 53
收藏 0

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

Step1 新建一个项目文件

项目目录如下图: template

其中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.jsindex.html则根据你具体的项目而定,你可以根据自己的项目填充一些东西

在本地运行

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

template

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

部署

部署到firebase

template

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

template

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

template

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

template

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

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

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

template

就说明已经部署成功了

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

template

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

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

© 著作权归作者所有

共有 人打赏支持
sunshinewyf
粉丝 15
博文 97
码字总数 64205
作品 0
武汉
程序员
私信 提问
前端每周清单半年盘点之 PWA 篇

前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公...

王下邀月熊
2017/08/29
0
0
不可不读,渐进式Web应用程序经典之作!

  【IT168 评论】据国际电信联盟的预估,2015年底全球上网人口到达32亿,也就是说全球将近一半的人口都在上网。 32亿人口是什么样的概念?大约32000个足球场才装得下这么多人!除了人口数量巨...

it168网站
2017/11/30
0
0
Chrome Dev Summit 2017参会笔记

作者 | 高磊 编辑 | 尾尾 为期两天的 Chrome Dev Summit 2017 于 10月23日~24日在美国旧金山举办。由于我们近期和Google的合作较多,对Google的动作也比较关注,所以受邀参加了这次的Chrome ...

BrilliantOpenWeb
2017/10/27
0
0
如何基于create-react-app2与workbox开发pwa应用?

上一篇“记录一次基于vue、typescript、pwa的项目由开发到部署”,发布后,忙于秋招的楼主我,终于有时间来写这篇文章。最近秋招也挺顺利,拿到了网易广州岗的offer,对目前想留在广州发展的...

🍼holyZhengs
10/30
0
0
service worker之cache实践--sw-precache

Progressive web application是谷歌推出的一种渐进式应用,我觉得其实PWA是一种非常具有发展前景的技术。首先,PWA是由谷歌推出的,而且跨平台,PWA可以给你类似于原生APP的体验,通过service...

neal
2017/04/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

ios多个target

1.建立3个target,分别为heroone,heroone test,heroone dev;分别为正式环境,test环境,dev环境 2.注意取消掉autocreate以防止名字不对,分别以Duplicate的方式建立另外两个scheme 3.创建...

HeroHY
今天
5
0
php获取客户端IP

php获取客户端IP 首先先阅读关于IP真实性安全的文章:如何正確的取得使用者 IP? 「任何從客戶端取得的資料都是不可信任的!」 HTTP_CLIENT_IP头是有的,但未成标准,不一定服务器都实现。 ...

DrChenXX
昨天
0
0
. The valid characters are defined in RFC 7230 and RFC 问题

通过这里的回答,我们可以知道: Tomcat在 7.0.73, 8.0.39, 8.5.7 版本后,添加了对于http头的验证。 具体来说,就是添加了些规则去限制HTTP头的规范性 参考这里 具体来说: org.apache.tom...

west_coast
昨天
1
0
刷leetcode第704题-二分查找

今天双十一买的算法书到货了,路上刷到有人说的这个题,借(chao)鉴(xi)一下别人的思路,这个是C++标准库里面的经典方法,思路精巧,优雅好品味 int search(int* nums, int numsSize, in...

锟斤拷烫烫烫
昨天
3
0
【分享实录】BANCOR算法详解及代码实现

1 活动基本信息 1)主题:【区块链技术工坊22期】BANCOR算法详解及代码实现 2)议题: BANCOR算法的特点和优劣势 BANCOR算法和举例 如何加入BANCOR.NETWORK交易所 如何开发自己的BANCOR去中心...

HiBlock
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部