RaxPWA-快速升级Web体验RaxPWA，基于Rax1.x的PWA解决方案。通过简单的配置即可轻松构建功能齐全的PWA，为用户提供媲美原生APP的Web应用体验。随着移动用户的增加，优化手机用户体验变得至关重要。然而，目前的大多数Web应用体验仍然很差。脆弱的网络连接和实时交互方式制约着Web应用的发展。我们希望通过被称为下一代网络应用的ProgressiveWebApps（以下简称PWA）来改善这种情况。PWA不是一种特定的技术，它是一种应用一系列技术来优化用户体验的Web应用程序，其目标是拥有与原生应用程序相媲美的用户体验。我们为Rax1.xweb项目提供RaxPWA解决方案。与其他PWA方案不同，除了GooglePWAchecklist功能，我们认为任何优化过的体验方案，只要能够集成到一个完整的轻配置中，都可以看作是RaxPWA的内容。希望通过RaxPWA的努力，能够为开发者提供一个提升用户体验和开发效率的PWA解决方案，使开发者能够通过最小配置实现PWA优化，提升Web应用的体验。PS：您可以使用npminitrax快速创建Rax1.x应用程序。优化跳转在由多个页面组成的Web应用中，切换页面时所有资源都会重新加载刷新：通过单页面应用（SinglePageWebApplication，以下简称SPA）让Web应用响应更快、更即时，APP更流畅类体验：Rax1.x项目内置了统一的SPA解决方案，无需安装和维护Router组件，通过配置app.json即可生成路由与组件的对应关系。{“routes”：[{“path”：“/”，“source”：“pages/Home/index”}，{“path”：“/page1”，“source”：“pages/Page1/index”}]}我们必须考虑移动SPA的加载性能。把所有页面的资源打包在一起，势必会产生一个很大的JSBundle。在网络环境较差的情况下，容易阻塞资源加载，延长等待时间，影响页面可用性。我们在Rax1.x项目中内置了基于页面组件的代码拆分和按需加载方案：在打包的时候，将页面代码分离到不同的JSBundle中，可以获得更小的JSBundle，极大的影响了加载时间。当用户访问某个路由时，动态加载相应页面所需的文件，动态提升APP性能，控制资源大小，保证用户体验。SPA方案给了页面更好的交互体验，但是在第一次加载应用的过程中，由于SPA渲染强烈依赖JS控制，在没有加载JS文件的时候可能会出现白屏等待，所以我们需要注意应用程序的首次访问。加载时的用户体验。消除白屏通过RaxPWA提供的AppShell解决方案消除白屏等待。AppShell是指支持页面展示的最小HTML、CSS、JS资源的集合。内容可以是页面结构、页面片段、骨架图等，倾向于纯HTML片段，一般只包含内联CSS和base64图片，不强烈依赖JS框架。可在加载、解析、执行JS之前进行渲染，几乎消除了白屏时间，大大提升了用户体验，保证了即时可靠的加载交互体验。在Rax1.x项目的app.json文件中添加shell配置，通过源码配置文件快速生成AppShell。{"shell":{"source":"shell/index"},"hydrate":true}相对于谷歌提出的AppShell概念，RaxPWA中的AppShell可以使用JSX开发，将内置advance并将呈现的结果插入到HTML中，以便它可以快速加载到用户屏幕上。AppShell重用HTML中的节点绑定事件，并在JS运行时激活组件。如上图所示，在应用程序的文本部分被JS控件加载渲染之前，显示的是AppShell渲染的页眉和页脚部分。其中，{props.children}是页面的主要内容（AppShell是应用的最顶层组件）。AppShell和其他组件一样，有生命周期，可以使用hooksAPI，可以引用外部依赖等，可以通过AppShell实现很多功能，例如：TabBarAppShell的内容可以是最外层的页面，一种通用的交互结构。比如注入HTML的TabBar，可以方便用户快速切换页面进行页面预览：骨架图如上图所示，中间的空白对用户体验非常不好，所以在渲染之前数据，还可以通过骨骼图占用白屏空间。骨架图需要在最短的时间内呈现给用户。期望浏览器在加载HTML后能先显示骨架屏，因此骨架图也可以用来改善AppShell中的用户体验。///src/shell/index.jsximport{createElement,Fragment,useEffect,useState}from'rax';functionShell(props){const[showSkeleton,setShowSkeleton]=useState(true);useEffect(()=>{setShowSkeleton(false);});返回(<>{props.children});}export默认外壳；效果如下：最外层的AppShell方案可以解除用户等待的焦虑，消除白屏的影响，进行简单的交互。但是当用户网速不佳，页面仍然无法加载时，我们也可以帮助用户更快地渲染页面内容。如下图所示，当页面加载或刷新时，页面内容会瞬间呈现。我们称这种体验为“首屏即开”。我们为Rax1.x项目提供了rax-plugin-pwa插件。通过这个插件，你可以选择启用相应的PWA功能点，通过快照和缓存控制功能可以快速展示页面。PS：你可以通过这篇文档了解Rax1.x工程插件。当快照用户网速较差，JS文件加载较慢时，白屏时间会增加，造成体验不好。如果在一个web应用中页面内容变化不大，页面内容可以填充用户上次访问对应的内容，页面内容显示速度极快，加载速度第一个屏幕可以改进。页面会记录当前页面的内容，称之为快照。下次访问同一页面时，快照会被快速填充渲染到当前空白页面。JS加载完成后，会进行状态和事件绑定，完成页面渲染。chrome弱网调试环境，渲染效果如下：在build.json中配置rax-plugin-pwa开启快照功能：{"plugins":[["rax-plugin-pwa",{"snapshot":true}]]}缓存控制在Web应用中，我们可以通过ServiceWorker（以下简称SW）来控制页面缓存，这是PWA中最重要的概念之一。它独立于浏览器的主线程运行。它不仅可以拦截用户的网络请求，还可以操作缓存，支持Push和后台同步等功能。与使用重载打包框架Workbox相比，我们希望为用户提供更简单、轻量级、透明、易学的解决方案。在build.json中配置rax-plugin-pwa设置以启用SW控制缓存：alicdn.com/tfs/rax.png"],//预缓存的url列表"savedCachePatternList":["/my-app\/.+/i"],//添加到缓存的URL常规字符串列表}}]]}快速配置预缓存和缓存的URL正则字符串列表，快速打开SW，支持离线访问应用。我们使用缓存优先控制方案首先从缓存中读取结果。如果缓存中没有结果，则进行网络请求。网络请求成功后，将结果写入缓存。加快资源获取，同时确保请求可用。与标准的Rax1.x项目和启用快照和SW后的页面相比，优化效果大大改善了Chrome开发者工具中的加载时间和FirstContentfulPaint时间：SolutionNetworkEnvironmentFCPTimeLoadTimeStandardProjectChrome-慢3G15558.7ms15474.7ms打开快照Chrome-慢3G2032.5ms(87%)16317.9ms打开SWChrome-慢3G3096.2ms(80%)5147.8ms(66%)影响页面的交互体验和有一个非常重要的环节——数据获取，数据的加载体验会直接影响页面的用户体验。完成首屏加速后，当然我们也准备了数据加速采集方案。加速数据请求可以通过Server-SideRendering（以下简称SSR）加速首屏渲染和数据请求。SSR是指将页面渲染逻辑前端加载到服务器端执行，服务器端直接返回渲染后的页面，然后浏览器端进行状态和事件绑定，实现页面的交互状态。服务器端控制数据请求，可以彻底摆脱弱网络环境，将数据请求的网络延迟降到最低。SSR具有更快的首屏加载速度，包括数据层。使用客户端渲染时，完成首屏渲染一般包括以下几个步骤：解析HTML->加载JS->获取数据->渲染。设备的运行状态或网络状况会直接影响各个环节的执行时间，最终会成倍地影响首屏的呈现时间。但是服务器请求的数据是在弱网环境下渲染出来的，最大限度的减少了这个数据加载的网络延迟。SSR还可以解决页面SEO的问题，因为它的页面内容比较完整，所以更容易被搜索引擎理解。对于一些有SEO需求的企业来说，SSR显得尤为重要。我们还为Rax1.x项目提供了rax-plugin-ssr插件，可以快速启动SSR应用。SSR功能可以通过在build.json中配置开启。{"plugins":[["rax-plugin-ssr"]]}作为PWA项目，我们还可以让用户更快地启动应用程序。快速启动应用无需打开浏览器输入URL地址即可访问Web应用。通过点击保存到桌面的PWA，用户可以快速定位并启动应用程序。不仅支持应用全屏预览，还可以自定义PWA启动画面的图标、颜色等，增强Web应用与操作系统的融合能力，提供更好的Native-like体验。通过配置manifest，可以快速生成WebAppManifest（支持应用在手机主屏创建图标的技术方案）：{"plugins":[["rax-plugin-pwa",{"manifest":{"name":"MyProgressiveWebApp","short_name":"MyPWA","description":"MyawesomeProgressiveWebApp!","background_color":"#ffffff","icon":"src/public/icon.png","start_url":"//market.m.taobao.com/app/mtb/rax-pwa-demo/web/index.html#/","display":"standalone"}}]]}构建应用时，会自动将应用图标文件-图标切割成96x96、128x128、180x180、256x256、512x512五种尺寸的正方形图标图片，以满足不同屏幕尺寸的需求，实现高-保真效果，兼容不同平台根据浏览器标准生成WebAppManifest。用户访问启用清单的Web应用程序后，他们可以选择将其添加到桌面。继续专注移动端web体验RaxPWA解决方案充满了PRPL（Push/Preload、Render、Precache、Lazy-Load）开发模式。虽然目前RaxPWA还在进行中，但我们会继续探索PWA的更多可能性，在技术和业务上不断提升产品体验。目前我们也在积极准备优化开发者的开发体验，提供交互体验更好、性能更高的组件系统，体验不同容器中的web应用，开放更多链接（比如手机淘宝中的网页加速）等等，任何能够真正优化或改善移动网络体验的解决方案都会付诸行动，为用户带来更好的移动体验。当然，今年双十一我们也会使用RaxPWA方案来优化掉端页面的性能体验。让我们一起努力，再次为用户带来惊艳的Web应用体验吧~详细使用方法请参考：https://rax.js.org/pwa
