QCON全球软件开发大会于4月20日至22日在北京举行。作为世界信息技术峰会主办的世界顶级技术大会，共邀请了2500名高级开发人员参加会议。百度高级工程师彭星被邀请参加会议。他还分享了百度在PWA前端实践中的探索和探索。更佳实践。本文基于彭星的演讲。
    
     PWA是一个颠覆性的网络侧概念，在国外已被广泛接受，许多网站已经转化为PWA，并取得了很好的效果。理想情况下，微博、饥饿等许多大型网站已经转变为PWA，并且有更多的网站正在转型。
    
     可靠性指的是PWA的安全性，它只能在HTTPS上运行。另一方面，当网络不稳定或不稳定时，仍然可以访问PWA。
    
     通过增加桌面的粘性和推送离线消息，用户可以获得第二次访问，并依靠良好的用户体验来吸引用户再次访问。
    
     PWA不是单独的技术，包括Web应用程序清单、服务工作者、Push API通知API、App Shell App Skeleton等等。我们将关注一些技术和解决相关问题的方法。
    
     Web应用程序清单是一种技术解决方案，用于支持站点在主屏幕上创建图标，并定制PWA启动屏幕的图标和颜色，如下所示：
    
     虽然Web应用程序清单是强大的，但在技术上并不困难。它是一个外部链JSON文件，它通过链接：Link（=）清单HRF= /资产/清单来引入。JSON>文件的详细内容如下：
    
     服务工作者是PWA中更重要的概念之一。它是一个特殊的Web工作者，独立于浏览器的主线程运行。它可以拦截用户的网络请求，操作缓存，并支持推和后台同步。
    
     Service.r使用Cache Storage、Cache API来操作本地缓存，以及获取API来请求服务器端数据，不管是否存在网络连接，还是出现404,500个站点，都允许用户查看专门定制的错误页面，而不是浏览器默认的404页。
    
     PWA通常是SPA，通常使用App Shell来设计模型，App Shell是PWA中非常重要的概念，那么什么是App Shell呢
    
     App Shell是指支持页面所需的HTML、CSS和JavaScript资源的更小集合。一旦脱机，就可以确保在重复访问用户时提供即时、可靠和良好的性能。下面的截图向用户展示了应用程序外壳
    
     如上所示，App Shell呈现标题部分，因此主体部分在加载数据之前是白色的，这对用户体验非常不利，有一个术语叫做App Skeleton，在将数据呈现在白色屏幕位置之前，尽量不要出现长时间的白色屏幕。
    
     App Skeleton需要在尽可能短的时间内呈现给用户，所以通常，App Skeleton将被编译成HTML，就像下面的代码一样，期望浏览器在加载HTML之后显示骨架屏幕。
    
     但是骨架屏幕将被阻塞，直到CSS文件被加载，并且浏览器不会呈现骨架屏幕，因此用户将看到白色屏幕的时间比预期的长。很少有站点会注意到，即使生成了骨架屏幕，也不一定能解决CSS加载的问题。防止骨架屏幕被渲染，比如饥饿的PWA主页。
    
     那么，我们怎样才能解决这个问题呢它可以通过Link的预加载来解决，这并不妨碍HTML的渲染。在加载预加载的资源之后，它将更改回样式表，并调用mount以显示JS的呈现结果。
    
     除了通过预加载的这个解决方案之外，您还可以将链接从CSS链接到JS中，而VUE项目默认为JS中的CSS。
    
     PWA的全名是Progressive Web Apps，意味着它是增量的，也就是说，它是在现有的基础上逐渐添加的，从而改善用户体验，不需要回推，整个站点都在进行转换。
    
     SEO是每个站点都关心的问题，PWA通常是SPA，众所周知，传统的搜索引擎不能通过JS索引来渲染页面，那么，我们需要解决这个问题。
    
     首先，百度不是传统的搜索引擎，百度、谷歌都能够对移动SPA页面进行索引。所以对于其他搜索引擎来说，解决PWA搜索引擎优化问题的唯一方法就是服务器端渲染（SSR），现在市场上的主流MVVM框架提供了SSR解决方案，比如React、Vu。E、San等等。
    
     SSR页面是服务器直接输出，内容页面同时输出，那么如何将这种方法与Service.r结合起来脱机以及如何实现App Shell的启动效果呢我们采用服务人员+应用程序外壳+ SSR+解决方案（VUE/Engule/SAN）来完美地解决这个问题。
    
     在第一个请求中，服务器直接在SSR之后输出内容，在加载页面之后注册Service.r，并且Service.r在安装阶段预缓存一些静态文件或其他资源。这里，我们添加了一个具有/appshell地址的请求，该请求返回App SHell的HTML的内容，其中包含来自JS和CSS的代码，可以作为Vue:HTML的示例来引用
    
     http://Github.com /Lavas Project /Lavas模板VU/BLB/Basic基本/PulsAppSHIL.VUE
    
     在第二个请求上，服务工作者根据请求确定当前请求是否是页面请求。模式= =导航。如果是，预缓存/AppStk HTML结构返回到页面。在渲染之后，AppShell通过当前URL请求相应的JS和数据来呈现页面。
    
     这样，不仅可以解决SEO问题，站点可以完全脱机，而且缩短了白屏时间，更重要的是，还可以大大降低服务器SSR带来的压力。NT请求都是前向渲染。
    
     PWA在2017年初，只有Chrome和Firefox支持PWA，经过一年的发展，中国的主流浏览器都支持PWA，iOS也在新的11.3版本中支持PWA。
    
     BOW（Brilliant Open Web）团队是一个专门的Web技术开发团队，致力于促进Open Web技术的发展，使Web成为开发人员的首选。