node.js做网站好累,制作类似网站软件,gzip wordpress,前端招聘去哪个网站前言 之前自己根据网上的教程学习写了几个PWA的小Demo#xff0c;觉得PWA很有意思#xff0c;想要更多的了解一下PWA#xff0c;所以读了这本书。这本书是MANNIN出版社出的#xff0c;所以书里的代码都有非常棒的注释#xff0c;因此这篇笔记不会展开讲代码#xff0c;而…前言 之前自己根据网上的教程学习写了几个PWA的小Demo觉得PWA很有意思想要更多的了解一下PWA所以读了这本书。这本书是MANNIN出版社出的所以书里的代码都有非常棒的注释因此这篇笔记不会展开讲代码而是着重于描述PWA的功能以及常见的问题和解决方法。 图书资源图书中代码的Github仓库1. 什么是PWA 简单来说PWA是一系列新兴技术的统称这些技术旨在增强web app的功能使其能够在用户体验上媲美原生应用。PWA的功能包括 响应性可以适配更小的屏幕连接独立性因为service worker的缓存它使网页可以离线工作类似原生应用的交互性使用应用程序外壳架构app shell来构建安全性基于HTTPS协议可发现性搜索引擎能够发现它SEO好可安装性可以添加到桌面像原生应用一样启动基于manifest技术可链接性可以很容易的通过URL进行分享1.1 网站性能测试工具 LighthousewebpagetestLighthouse会生成性能测试报告但是测试结果会受网络质量的影响。webpagetest是真机测试但是测试可选地点和浏览器是有限的有时候还要排队等待。但不管怎样这些测试工具可以辅助我们测试自己的站点让我们了解到自己站点现在存在的性能问题然后着手改善相信PWA技术会让你的改善变得更加简单快捷而且效果显著。最最重要的是PWA是渐进增强的不需要重写已经存在的代码 2. PWA的主要技术 2.1 Service Worker 2.1.1 service worker的功能 简单来说service worker可以拦截请求fetch request可以给出响应(response)。你可以对拦截下来的请求做处理比如说你发现缓存中已经有了请求的资源而且资源还在有效期内你就可以直接从缓存中读取资源终止请求。如果在service worker的安装阶段就缓存好了一些资源这样再次访问时可以直接从缓存中加载部分资源页面加载速度会大幅度提升。即使是离线访问页面也可以给出之前缓存好的信息极大的提升了用户的体验感。可以使用Google的工具库Workbox写service worker文件里面提供了很多易用的API以及各种缓存策略。 2.1.2 service worker的特点 基于HTTPS协议运行在自己的全局脚本上下文中不是绑定到一个特定的web页面无法修改web页面中的元素无法访问DOM每次对service worker文件进行任何更改时它都会自动触发service worker更新流。2.1.3 service worker的调试 可以通过Google的开发者工具Application里面的Service Workers进行调试。 2.1.4 service worker常见问题 1) 缓存更新问题 【方法1】因为修改service worker文件会触发service worker的更新流所以想要更新缓存时可以修改缓存名cacheName例如将helloWorld改成helloWorld-2。 【方法2】Cache busting技术(作者更推荐)给文件打上版本号例如 script typetext/javascript src“/js/main-xtvbas65.js/script
复制代码 这种技术被称为缓存总线技术已经出现了很多年。当一个静态文件被缓存时它可以被存储很长一段时间直至到期。如果你更新了一个网站但由于文件的缓存版本存储在访问者的浏览器中他们可能看不到所做的更改。缓存总线通过使用唯一的文件版本标识符告诉浏览器文件的新版本是可用的。 2) 拦截请求时怎么忽略查询字符串参数 caches.match(event.request, { ignoreSearch: true })
复制代码2.2 Manifest 2.2.1 manifest的功能 让web app可以像原生应用一样添加图标到桌面然后通过桌面图标启动。可配置图标启动动画等详细配置见文档。 2.2.2 manifest的调试 可以通过Google的开发者工具Application里面的Manifest进行调试。 2.2.3 manifest常见问题 1) 怎么让添加到主屏幕的横幅显示出来 要让添加到主屏幕的横幅显示出来必修满足以下条件 需要 manifest.json文件。需要一个启动的URL需要 144 x 144 的PNG图标网站必须基于HTTPS协议并且使用Service Worker用户必须访问了网站至少两次, 每次至少有五分钟2.3 Push notifications 2.3.1 Push notifications的功能 即使用户不打开浏览器也可以接收到消息原生的API写起来有一些麻烦可以借助第三方的工具库来写例如OneSignal, Aimtell等。 2.4 Synchronous data Background sync是Google新推出的Web API可延迟用户行为直到用户网络连接稳定。这样有助于保证用户想要发送的数据就是实际发送的数据。 PeriodicSync还在开发中它可以实现定期同步。 3. 用PWA提升用户体验的例子 3.1 假wifi和单点故障问题 如下面的代码所示可以设置超时时间用Promise的race函数让超时函数和正常的请求竞跑如果到超时时间请求还未得到相应则抛出超时错误这样可以及时让用户了解到出现了网络故障。 function timeout(delay) {return new Promise(function(resolve, reject) {setTimeout(function() {resolve(new Response(, {status: 408,statusText: Request timed out.}));},delay);});
};self.addEventListener(fetch, function(event) {if (/googleapis/.test(event.request.url)) {event.respondWith(Promise.race([timeout(3000), fetch(event.request.url)]));} else {event.respondWith(fetch(event.request));}
});
复制代码上面的代码看上去有一点繁琐我们可以借助Google的工具库Workbox来简化以上代码 importScripts(workbox-sw.prod.v1.1.0.js);
const workboxSW new self.WorkboxSW();
workboxSW.router.registerRoute(https://fonts.googleapis.com/(.*), workboxSW.strategies.cacheFirst({cacheName: googleapis,networkTimeoutSeconds: 3
}));
复制代码4. PWA的未来 4.1 Streaming data Streaming data可以实现流数据的传输。举个例子如果后台传递了一个很大的数据到前台正常情况下前台需要接受完这个数据才能进行展示而流数据可以一边接受一边展示不需要等到整个数据都接受完再展示。 4.2 Web Bluetooth Web Bluetooth可以在浏览器中连接蓝牙设备并通过PWA与设备交互。例如开发人员已经开发出可以与心率监视器交互的网络健身应用程序和可以驾驶微型无人机的网络应用程序。 4.3 The Web Share API The Web Share API允许您轻松触发原生Android共享对话框通过URL或文本进行共享。这是一个重要的API因为它为终端用户提供了对数据共享方式和位置的控制。 4.4 Payment Request API Web Payments是W3C正在开发的一种新兴网络标准旨在简化在线支付并使更多的参与者能够轻松参与网络上的支付生态系统。标准灵活; 它们适用于各种类型的支付系统适用于任何设备支付方式或支付服务提供商的任何浏览器。这种灵活性使开发简单性部署一致性以及与新兴支付技术的未来兼容性。 4.5 Hardware: the Shape Detection API Shape Detection API允许开发人员访问人脸检测等功能条形码检测甚至是文本检测。 结语 看完这本书特别是PWA未来发展这一块的内容深深的感觉到web日新月异的发展以及逐渐强大的功能API期待各种新功能的完善期待可以在项目中用起来开心到飞起越来越坚信转行前端的决定是正确的:) 转载于:https://juejin.im/post/5c9d91c35188251e592be8b7
