快速了解理解pwa
2017-10-11 16:18
435 查看
什么是PWA
先说一下全名,progressive web app: 渐进式网页应用。这是谷歌推出的,我是这样理解的:我们一般写web应用,在 pc 上是没有缓存的,打开页面的时去请求数据。
第二个也没有像 app 一样的小图标放在桌面,一点开就进入了应用,而是通过打开浏览器输入网址,
第三个就是,不能像 app 一样给用户推送消息,像微博会跟你推送说有谁评论了你的微博之类的功能。
而谷歌推出的 pwa,就是具有这些了这些特点, 使我们的 web 应用,能够像一款 app 一样使用。并且对比与 app, 它不用复杂的安装,也不用下载更新包,刷新页面就可以了(注意到缓存的处理)。
那么这些功能分别是怎么实现的呢?
关于缓存其实这个就是 我们平时做的 Session 啊、localStorage、CacheStorage 之类的。
这里用的就是 cacheStorage 缓存,它提供了一个ServiceWorker类型的工作者或window范围可以访问的所有命名缓存的主目录, 并维护字符串的映射名称到相应的 Cache 对象。
主要方法包括:
有了这些方法你可以对你的缓存进行操作。目前还在草案状态,仅火狐和谷歌浏览器支持此特性。
PWA是通过 ServiceWorker 访问 cache ,所以需要注册 ServiceWorker 工作者。在之前别忘记判断浏览器是否支持。
if ('serviceWorker' in navigator) { navigator.serviceWorker.register(sw.js) // 注册sw.js 文件中变成的服务对象,返回注册成功的对象 .then(function(swReg){ swRegistration = swReg; }).catch(function(error) { console.error('Service Worker Error', error); }); }
这个 Service Worker 服务工作者就厉害了,它相当于浏览器和网络之间的代理服务器,可以拦截网络请求,做一些你可能需要的处理(请求资源从缓存中获取等)。
它能够创建有效的离线体验,拦截网络请求,并根据网络是否可用判断是否使用缓存数据或者更新缓存数据。
它们还允许访问推送的通知和后台的API。
关于 sw.js 中具体的缓存的代码:
创建需要缓存的文件
'use strict' let cacheName = 'pwa-demo-assets'; // 缓存名字 let imgCacheName = 'pwa-img'; let filesToCache; filesToCache = [ // 所需缓存的文件 '/', '/index.html', '/scripts/app.js', '/assets/imgs/48.png', '/assets/imgs/96.png', '/assets/imgs/192.png', '/dist/js/app.js', '/manifest.json' ]; self.addEventListener('install', function(e) { e.waitUntil( // 安装服务者时,对需要缓存的文件进行缓存 caches.open(cacheName).then(function(cache) { return cache.addAll(filesToCache); }) ); }); self.addEventListener('fetch', (e) => { // 判断地址是不是需要实时去请求,是就继续发送请求 if (e.request.url.indexOf('/api/400/200') > -1) { e.respondWith( caches.open(imgCacheName).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); }) ); } });
这里进而就引入到 pwa 的推送通知功能。这都是通过 ServiceWorker 去实现的。
基本原理是,你的客户端要和推送服务进行绑定,会生成一个绑定后的推送服务API接口,服务端调用此接口,发送消息。同时,浏览器也要支持推送功能,在注册 sw 时, 加上推送功能的判断。
if ('serviceWorker' in navigator && 'PushManager' in window) { navigator.serviceWorker.register(sw.js) .then(function(swReg) { swRegistration = swReg; }).catch(function(error) { console.error('Service Worker Error', error); }); } else { console.warn('Push messaging is not supported'); }
PushManager 注册好
4000
之后, 那么要做的就是浏览器和服务器的绑定了。
此图是用户订阅某个应用程序的推送服务。
客户端传入应用程序服务器公钥,向将生成端点的
webpush 服务器( 这是谷歌自己实现的一个推送功能的服务器)发出网络请求,将生成的端点(一个推送服务)与应用程序公钥关联,并将端点返回给应用程序。浏览器会将此端点添加到 PushSubscription,通过 promise异步成功时,可以将它的信息保存到你的数据库。
服务器发送推送的时候,请求相关接口,验证成功后推送服务会发消息给客户端。
最后关于桌面小图标
这个可以说是非常简单了,就是一个manifest.json配置文件,然后在页面引入此文件就好了
<!-- 加载清单 --> <link rel="manifest" href="./manifest.json">
关于清单内容这里简单介绍一下:
{ "short_name": "pwa", "name": "pwa - demo", // 应用名称 "icons": [ // 应用显示图标,根据容器大小适配 { "src": "assets/imgs/48.png", "type": "image/png", "sizes": "48x48" }, { "src": "assets/imgs/96.png", "type": "image/png", "sizes": "96x96" }, { "src": "assets/imgs/192.png", "type": "image/png", "sizes": "192x192" } ], "background_color": "#2196F3", // 刚打开页面时的背景 "theme_color": "#2196F3", // 主题颜色 "display": "standalone", //独立显示 "start_url": "index.html?launcher=true" // 启动的页面 }
好了, 如果感兴趣赶快上手吧。
可以查看谷歌官方教程。
这里说一下坑的点, PWA应用需要在本地localhost:8080 上运行或者 https 协议下, 要保证你的页面是安全页面。
添加桌面时,确保你的谷歌浏览器可以显示弹出通知。
如果你要自己实现推送,自己服务器要有公钥和私钥的获取, 这里可以通过 https://web-push-codelab.glitch.me 获取, 用 chrome 的 webpush 推送。
这里也可以看一下我的 GitHub 项项目 ,官方也有很多例子。
相关文章推荐
- UML项目应用理解--快速了解整个系统架构和详细设计文档
- MySQL Study案例之--快速了解MySQL服务器
- 快速了解SPA单页面应用
- JavaGUI之事件的快速理解
- 对面向对象的理解及应该了解的问题
- 带你快速了解WSGI
- 快速了解innodb锁概念
- 快速理解.NET Framework[翻译]
- 带你快速了解“存储过程”的定义及优点(转)
- 帮你快速理解存储函数、存储过程、触发器
- 手机刷机是什么意思?快速了解手机刷机基本概念
- 快速理解C#高级概念(二) 事件与委托的区别
- 快速理解C#高级概念(二) 事件与委托的区别
- 5分钟快速理解ERP思想(转)
- HDU4506之快速幂取模理解
- 快速了解Apache Shiro
- 快速理解Kafka分布式消息队列框架
- Linux 简单,实用,快速了解静态库和动态库的生成和使用方法以及两者的区别
- 快速理解Docker
- 快速了解c#中的索引器