用PWA构建一个完全离线的网站
想象一下，你有能力去构建一个完全离线的网站，为用户提供几乎瞬间加载的体验，同时它对于不可靠的网络又是安全及富有弹性的。这听起来既不可能，又不可思议。无论你是否相信，绝大部分现代浏览器都已经内置提供了这些功能，只需要释放它们。当你利用这些强大的功能构建网站时，你便已经拥有了所谓的 PWA（Progressive Web App）。
PWA有什么优势
回溯到 1990 年的圣诞节，Tim Berners-Lee 爵士和他在 CERN 的团队创建了使Web 正常工作所需的所有工具。他们创建了 HTTP、HTML 和 WorldWideWeb（全世界第一个网页浏览器）。WorldWideWeb 只能运行具有超链接的简单纯文本组成的网页。事实上，这些第一代的网页仍然在线，并且可以浏览。
从几十年前回到现在，我们所浏览的网页并没有变化。当然，现在我们有了像CSS 和JavaScript 这样的功能，但网页的核心依旧是使用 HTML、HTTP 以及其他一些模块来构建，这些都是 Berners-Lee 和他的团队在多年前所创建的。这些辉煌的构建模块意味着 Web 已经能够以惊人的速度增长。然而，我们用来访问网页的设备数量也在不断增长。无论你的用户是在旅途中还是坐在书桌前，他们都无时无刻不在获取信息。我们对于 Web 的期望从未如此之高。
虽然移动设备变得愈发强大，但移动网络并不是总能满足需求。如果你使用智能能手机，你就会知道移动连接有多么脆弱。2G、3G 或 4G 本身都很不错，但是它们时常会无法连接，或者网速变得很差。如果你的业务是与 Web 相关的，这就是你需要解决的问题。
从历史上来说，原生应用 ( 安装到手机上的 ) 已经能够提供更好的整体用户体验，下载完应用，它便可以立即加载。即使没有网络连接，也并非是完全不可用的，因为设备上已经存储了供客户使用的绝大部分资源。原生应用提供有弹性、吸引人的体验的能力使得它的数量已经呈爆炸式增长。目前，在苹果和谷歌的应用商店中，已经有超过 400 万个原生应用。
同样从历史上来说，Web 无法提供原生应用所具备的这些强大功能，比如离线能力、瞬时加载和更高的可靠性。这也正是 PWA 成为 Web 颠覆者的契机。主要的浏览器厂商一直在努力改进构建 Web 的方式， 并创建了一组新功能以使 Web 开发者能够创建快速、可靠和吸引人的网站。PWA 应该具备以下特点 ：
- 响应式
- 独立于网络连接
- 类似原生应用的交互体验
- 始终保持更新
- 安全
- 可发现
- 可重连
- 可安装
这是 Web 开发者构建网站传统方式的一种转变。这意味着我们可以开始构建能应对不断变化的网络状况或无网络连接的网站。这还意味着我们可以建立更吸引人的网站来为用户提供一流的浏览体验。
读到这里，你可能会想，这太疯狂了。那些不支持这些新功能的老浏览器怎么办？ PWA 最棒的一点就是它真的是渐进式的。如果你构建一个 PWA，即使在一个不支持的老旧浏览器上运行，它仍然可以作为一个普通的网站来运行。驱动 PWA的技术就是这样设计的，只有在支持这些新功能的浏览器中才会增强体验。如果用户的设备支持这些新功能，那么他将获得所有额外的好处和更多的改进功能。无论怎样，这对你和你的用户来说都是双赢。
PWA基础
那么 PWA 到底是由什么组成的呢？我们一直在讨论它们的功能和原理，但真正使某个网站成为 PWA 的到底是什么呢？最简单的 PWA 其实只是普通的网站。普通网站是由 Web 开发者所熟悉和喜欢的技术所创建的，即 HTML、CSS 和 JavaScript。然而， PWA 却更进一步，它为用户提供了增强的体验。我非常喜欢谷歌 Chrome 团队的开发人员 Alex Russell 的描述方式 ：这些应用不通过应用商店进行打包和部署，它们只是汲取了所需要的原生应用功能的网站而已。
PWA 会指向一个清单（manifest）文件，其中包含网站相关的信息，包括图标、背景屏幕、颜色和默认方向。
PWA 使用了叫作 Service Worker 的重要新功能，它可以令你深入网络请求并构建更好的 Web 体验。当你开始用它，还可以将进一步了解它以及它带给浏览器的改进。PWA 还允许你将其“添加”到设备的主屏幕上。它会像原生应用那样，通过单击图标便可让你轻松访问一个 Web 应用 。
PWA 还可以离线工作。使用 Service Worker，可以选择性地缓存部分网站资源以提供离线体验。如果你现在在没有网络连接的情况下浏览网站，那么对于绝大多数网站，你所看到的屏幕应该类似于下图。
如果你迫切需要获取这些信息，离线页面可能会非常令人沮丧
用户无须再面对恐怖的“无网络连接”屏幕了。使用 Service Worker，可以拦截并缓存任何来自网站的网络请求。无论是为移动设备、桌面设备还是平板设备构建网站， 都可以在有网络连接或没有网络连接的情况下控制如何响应请求。
PWA 不仅仅是一组非常棒的新功能，它实际上是构建更好的网站的一种方式。PWA 正在迅速成为一套最佳实践。构建PWA 所采取的步骤将有利于访问你网站的任何人，无论他们选择使用何种设备。
一旦你掌握了开始构建 PWA 所需的基本构建模块，很快就会发现，比较高级的例子并没有看上去那么高级。一旦你熟悉了构建 PWA 的过程，会发现一切都是如此的简单。
构建PWA的业务场景
作为一名开发者，我当然知道当一项新技术或一系列功能出现时，是多么令人兴奋。但为网站发掘并引进最新最好的库或框架的强烈欲望往往会掩盖其为企业带来的价值。无论你是否相信，PWA 能为你的用户带来真正的价值，并使网站更具吸引力、更有弹性，甚至更快。
PWA 最棒的一点是可以渐进增强现有的 Web 应用。我们讨论的整套技术可以应用于任何现有的网站，甚至是你正在构建的新 Web 应用。无论你选择何种技术栈来开发网站，PWA 都将与你的解决方案紧密结合，因为它只是简单地基于 HTML、CSS 和 JavaScript 。
既然你对 PWA 已经有了基本的了解，就先暂时停下脚步，想象一下用 PWA 来构建的各种可能性。假设你的在线业务是报纸，人们通过它来了解更多当地的新闻。如果你知道有人经常访问你的网站并浏览多个页面，为什么不提前缓存这些页面，这样他们就可以完全离线地浏览新闻？或者假设你的 Web 应用服务于一个慈善机构，志愿者在这个网络连接不稳定或压根无网络连接的区域进行工作。PWA 的功能将允许你构建一个离线应用，使他们在没有网络连接的现场也能收集信息。一旦他们回到办公室或有网络连接的区域，数据就可以同步到服务器。对于 Web 开发者来说，PWA 是颠覆者，并且我个人对它将带给 Web 的功能感到兴奋不已。
前文提到过可以将 PWA 添加到设备的主屏幕上。一旦添加后，它的图标便会出现在主屏幕上并可以通过单击图标来访问你的网站。
2015 年，印度最大的电商网站 Flipkart 开始构建 Flipkart Lite，它是 Web 和Flipkart 原生应用完美结合的 PWA 。如果你在浏览器中打开 flipkart.com，你会明白为什么这个网站是如此成功。它的用户体验令人印象深刻，网站的速度很快，可以离线工作，并且用起来使人愉悦。通过将它的网站构建成 PWA，Flipkart 能够显示ADD TO HOME SCREEN 操作栏。通过 ADD TO HOME SCREEN 图标到达的用户最终在网站上购买的可能性高达 70％。
ADD TO HOME SCREEN 功能是重新与用户接触的好方法
任何进入苹果或谷歌应用商店的新原生应用就像沙滩上的一粒沙。截至 2016年 6 月，每个应用商店中始终保持将近 200 万个应用。如果你开发了一个原生应用，那么它很容易就被应用商店中的海量应用所掩盖。然而，由于 PWA 是汲取了丰富功能的网站，因此可以通过搜索引擎轻松发现它们。人们可以通过社交媒体链接或浏览网页发现 PWA。构建 PWA 可以让你接触比单独使用原生应用更多的人，因为它们是为任何能够运行浏览器的平台而构建的。
我在一家小型创业公司工作，我知道编写一个可以在多个平台 (iOS、Android和网站 ) 上运行的应用是多么昂贵。有了 PWA，你只需要一个了解 Web 语言的开发团队即可。它使得招聘更容易，而且肯定便宜得多。这并不是说你不应该构建原生应用，因为不同的用户会有不同的需求，但只要你想，你就可以专注于为网络上的用户营造一个相当好的体验并使他们留下来。
当使用为 Web 构建的应用时，用户可以轻松访问你网站服务的一部分，而无须先下载庞大的安装文件。使用正确的缓存技术的 PWA 可以保存用户数据并立即为用户提供功能。随着世界各地越来越多的用户开始上网，不断为 10 亿规模的新用户构建网站变得格外重要。PWA 通过构建快速、精简的 Web 应用来帮助你实现此目标。
如果你看过一些关于软件开发的文章，一定见过围绕原生应用与 Web 应用的争论。哪个更好？各自的优势与劣势是什么？原生应用本身是非常好的，但事实上 PWA 不仅仅是将原生应用的功能引入 Web 。它解决了企业面临的真正问题，旨在为用户创造一个名副其实的可发现、快速和有吸引力的体验。
本文摘自当世唯一相关著作《PWA实战：面向下一代的Progressive Web APP》。
本书降生之前，就得到Facebook、阿里旗下UC团队、新浪旗下微博团队及百度团队的积极响应，或参与技术审校，或勤力作序推荐，可见PWA在国内已成气候、方兴未艾。前端世界紧锣密鼓，离开一会儿就会错过新角登场。在扩展链接中你可以了解到本书更详细的信息。
图书详情：京东、当当、亚马逊
用PWA构建一个完全离线的网站相关推荐
- mysql与php驱动程序_用PHP和MySQL构建一个数据库驱动的网站_php
在我们目前的情况下,我们所需要的列是Jokes表中的JokeText列以及Authors表中的Name列和Email列.Jokes表和Authors表的关联条件是Jokes表中的AID列的值等于Aut ...
- php搭建网站访问数据库,用PHP和MySQL构建一个数据库驱动的网站(六)-PHP教程,PHP基础...
摘要 在这一章内我们会学习到如何在一个web页面中向数据库中存储信息并显示它. (2002-08-29 14:11:25) --------------------------– by wing, 出 ...
- 谷歌教你25招构建一个优秀的移动网站
谷歌公司的研究人员聆听了119个小时用户对移动网站的抱怨,了解到构建移动网站的精髓. 最近,来自谷歌公司和AnswerLab的研究人员主持了一场长达119小时的用户测试会议,他们每天都会让用户访问10 ...
- 构建一个受保护的网站
前段时间,我出于兴趣试着做了一个需要登录鉴权才能访问的个人网站,最终以 Docusaurus[1] 为内容框架,Next.js[2] 做中间件,Vercel[3] 托管网站,再加上 Auth0[4] ...
- VuePress构建一个文档管理网站
序言 目前无论笔记还是项目文档,大部分我都会通过 Markdown来记录,并且大部分文档写完都只存在自己电脑上,每次查找起来都需要耗费一些时间 自己的写的一部分技术教程由于初次记录时了解知识不多,内容 ...
- mysql与php驱动,用PHP和MySQL构建一个数据库驱动的网站(四)-PHP教程,PHP基础
摘要 在这一章中,我们将介绍php这个服务器端的脚本语言.我们将会看到,这个语言可以很好地支持与mysql数据库的通信. (2002-08-29 14:10:52) ----------------- ...
- 如何利用免费地图数据构建一个离线三维地球
1. 概述 我们之前发布了"免费从网盘下载的卫星影像和高程DEM如何使用? "一文[,其中以"北京"数据为例,详细讲解了卫星影像与高程DEM在微图中的查看导出方 ...
- 【jQuery插件】用jQuery Masonry快速构建一个pinterest网站布局(转)
[jQuery插件]用jQuery Masonry快速构建一个pinterest网站布局 时间:2011年03月21日作者:愚人码头查看次数:29,744 views评论次数:25条评论 前段时间领导 ...
- web高德maker动画_Web Maker —我如何构建一个快速的离线前端游乐场
web高德maker动画 by kushagra gour 由kushagra gour Web Maker -我如何构建一个快速的离线前端游乐场 (Web Maker - How I built a ...
- 几十行python代码构建一个前后端分离的目标检测演示网站，代码开源
在深度学习更讲究实用和落地的今天,构建一个简单的,可以利用浏览器和后端交互的演示性 Demo 可以说非常重要且实用了.本文我们将简单的介绍如何用几十行核心代码构建一个好用的.前后端分离的Demo. 2 ...
最新文章
- ATP检查的一些TIPS
- javadoc时候乱码-编码 GBK 的不可映射字符 - wqjsir的专栏 - 博客频道 - CSDN.NET
- 【第一篇】Volley的使用之json请求
- 压力测试过程中MySQL服务CPU占用率过高的问题排查思路
- 月神带你逻辑漏洞挖掘
- pdffactory字体打印不对_【原创】pdfFactory Pro有关转换PDG图像质量下降解决途径
- 随机出题 c语言编程,在Excel中制作单机版随机出题考试系统
- 2020ICPC上海站 E题 The Journey of Geor Autumn 组合数学 + dp
- phpcms数据库备份与恢复_Phpcms一键清理数据后完整找回数据
- Arduino-ESP32闪存文件插件程序搭建和上传
- 聚类算法及其模型评估指标【Tsai Tsai】
- 2021年中国汽车产量、销量及汽车制造业发展趋势分析[图
- var foo = 11+2+1; console.log(foo); //1121 好多文章答案写错了，我发下给初学的朋友看到，以免一开始就学错了...
- shell基础（2）：编程基础之变量：全局/局部/环境变量（作用域、定义、操作）、位置参数、数组
- google 学术一直 sorry 怎么办？
- 企业数字化转型系列报告 —— 低代码行业研究报告
- C++ Hanoi塔学习笔记（递归与非递归实现）
- 基于 Formily 的表单设计器实现原理分析
- 博彦科技对外小投资（二）
- win10微软输入法有些情况不显示选字栏