Web应用方兴未艾，我们已经很习惯在电脑上做自己的工作了，有了很多强大的在线网站，我们的Windows桌面就没有了不再挤满各种捷径；不仅在PC端，在移动端，我们不再在广阔的应用市场中安装各种软件，各种轻量级的小程序取代了它们的位置，无需安装点开箱即用的方式给大家的工作和生活带来了极大的方便。我们明白这种改变给我们的生活和工作带来的便利，但偶尔上网的时候，我们也会怀念那个桌面满是本地应用程序，桌面双击即可运行，无需搜索的时代对于我们在打开的网页中需要的功能网页，即使断网也能正常使用，而且在使用速度上似乎比网页要快。看到这里，你可能想说，你说那么多，跟你说的PWA有什么关系？什么是渐进式Web应用程序(PWA)？---ProgressiveWebApp（简称PWA）介绍PWA是指使用特定技术和标准模式开发的Web应用程序，让Web应用程序具有原生应用程序的特性和体验。比如我们觉得本地应用使用方便，响应速度快。通过PWA技术，有两个好处。一方面，应用开发仍然采用Web开发的方式。我们只需要简单的配置就可以使用它。无需为各种操作系统制作安装包。应用入口依然是网页，在浏览器中一键安装即可，无需繁琐的访问Appstore下载流程。另一方面，应用程序安装后，用户可以通过桌面图标快速访问。应用所需的资源在首次安装后离线缓存，可以在本地离线使用。系统推送可实时使用，应用自动升级无需重装。比如在Chrome中支持PWA技术的站点，可以直接在地址栏点击安装，或者在浏览器选项中点击安装。PWA现状PWA于2016年由谷歌提出，2017年正式实施，2018年迎来重大突破。全球顶级浏览器厂商谷歌、微软、苹果均已宣布支持PWA技术。PWA的关键技术是ServiceWorker，目前桌面和移动设备上的所有主要浏览器都支持它。目前，除了Safari，其他主流浏览器都已经支持添加主屏和消息推送。下面我们就简单的给大家介绍下ServiceWorker。ServiceWorker在Web应用程序、浏览器和网络（如果可用）之间充当代理服务器。此API旨在创建更好的离线体验，拦截网络请求并根据网络可用性采取适当的操作，并更新驻留在服务器上的内容，它还允许访问推送通知和与后台API同步。PWA的使用场景和未来在哪里？按照PWA的介绍，你可能会问，这个东西的价值在哪里？目前的统计数据显示，移动端下的PWA并没有太大的市场。在我们的移动终端上，3G、4G，现在5G，一个100M的APP可以下载的非常快。除了坐飞机，我们的手机基本上没有离线的时候。在PC端，我们开始工作。只要你还在使用Office等办公软件，你就会意识到WPA带来的便利是无法估量的。在全球信息化进程中，我司也处在持续信息化的过程中。各种常用的工具和软件将成为必不可少的组成部分，并集成到Web应用程序中。如在线Excel、在线报表设计、在线word等。这一切都逐渐与“线上”、“Web前端”联系在一起。将这些应用顺利地迁移到Web应用中并不是那么简单。这些工具功能复杂，资源繁重。同时，对于一些需要实时反馈的工作流项目，往往会忘记操作。以在线Excel为例，协同编辑的难点包括但不限于：多人冲突处理、版本数据更新、房间管理、富文本处理、复制粘贴处理等。下图使用PWA技术集成了一个类似Excel的表格编辑器。对于终端用户来说，完整的保留了Excel的操作体验。多任务时，使用alt(cmd)-tab快速切换应用，系统层面推送实时关注工作状态。而这一切都可以出现在我们的web应用中，不再需要本地应用。介绍完了PWA的相关知识点，下面我们通过一个例子来看看PWA是如何把一个网站变成一个APP的。示例使用准备，下载表格编辑器示例，https://www.grapecity.com.cn/...要让SpreadJS在线表格编辑器支持PWA，只需要实现AppManifest和ServiceWorker，添加manifest.json文件，并创建一个新的清单。json，并在index.html中引用它"#fff","display":"minimal-ui","scope":"./","theme_color":"#fff","icons":[{"src":"./welcome.png","type":"image/png","sizes":"200x200","purpose":"any"}]}1.实现ServiceWorker创建sw.js，并通过ServiceWorker缓存设计者需要的spreadjs资源varcacheName='v14.2.2';varcacheFiles=['/','./index.html','./lib/css/gc.spread.sheets.excel2013white.14.2.2.css','./lib/css/gc.spread.sheets.designer.14.2.2.css','./custom.css','./lib/scripts/gc.spread.sheets.all.14.2.2.js','./lib/scripts/plugins/gc.spread.sheets.charts.14.2.2.js','./lib/scripts/plugins/gc.spread.sheets.shapes.14.2.2.js','./lib/scripts/plugins/gc.spread.sheets.print.14.2.2.js','./lib/scripts/plugins/gc.spread.sheets.barcode.14.2.2.js','./lib/scripts/plugins/gc.spread.sheets.pdf.14.2.2.js','./lib/scripts/plugins/gc.spread.pivot.pivottables.14.2.2.js','./lib/scripts/interop/gc.spread.excelio.14.2.2.js','./lib/scripts/resources/zh/gc.spread.sheets.resources.zh.14.2.2.js','./lib/scripts/gc.spread.sheets.designer.resource.cn.14.2.2.js','./lib/scripts/gc.spread.sheets.designer.all.14.2.2.js',];//监听install事件，安装完成后进行文件缓存self.addEventListener('install',function(e){console.log('ServiceWorkerstatus:install');varcacheOpenPromise=caches.open(cacheName).then(function(cache){//传递要缓存的cacheFiles列表returncache.addAll(cacheFiles);});e.waitUntil(cacheOpenPromise);});//监听fetch事件，安装完成后完成，缓存文件自我。addEventListener('fetch',function(e){console.log('ServiceWorkerstatus:fetch');varcacheMatchPromise=caches.match(e.request).then(function(cache){//如果有缓存，直接返回，否则通过fetch请求返回缓存||fetch(e.request);}).catch(function(err){console.log(err);returnfetch(e.request);})e.respondWith(cacheMatchPromise);});//监听activate事件，清除缓存self.addEventListener('activate',function(e){console.log('ServiceWorkerstate:activate');varcachePromise=caches.keys().then(function(keys){returnPromise.all(keys.map(function(key){if(key!==cacheName){returncaches.delete(key);}}));})e.waitUntil(cachePromise);returnself.clients.claim();});index.html页面组书sw.js通过以上两步的操作，spreadjs在线表单编辑器页面支持PWA。注意PWA需要https支持，通过localhost进行本地测试不受影响。通过localhost访问页面，可以在Chrome地址栏看到安装选项。安装后，您可以双击应用程序按钮访问Chrome的PWA应用程序。也可以通过快捷键打开开发者工具。你可以在网络上看到它。Resources都是通过ServiceWorker缓存获取的。以上就是借助PWA技术将SpreadJS在线表单编辑器变成桌面编辑器的步骤。当你掌握并使用了PWA架构及相关技术后，你可以尝试用它来构建更多高可用的现代Web应用，快去试试吧！
