CSS和PWA：构建进步网络应用程序的一些技巧

渐进式网络应用程序（PWAS）：深入研究CSS和开发

>

随着移动设备的兴​​起，在线景观发生了巨大变化。网站已经从单个版本到台式机/移动变化，响应式设计，最后是本机移动应用程序。 最新的迭代是渐进式Web应用程序（PWA），旨在融合最好的网络和本机应用体验。本文探讨了CSS技术对于PWA开发至关重要。

密钥概念：

PWA

PWA将本机应用程序的可靠性，速度和引人入胜的体验与网络的可访问性相结合，消除了对App Store下载的需求。 PWA开发类似于标准Web应用程序开发，但需要一个

文件（控制PWA外观），服务工作者（启用离线功能），并仔细管理站点资产，包括CSS。
• >至关重要的CSS注意事项包括平台特定的UI依从性，设备功能设计以及实施优雅的降级/渐进式增强。 精益，极简主义的设计是最佳性能的关键。
• 诸如创建React应用，Angular和Ionic之类的框架简化了PWA的开发，但会影响性能；仔细考虑他们的使用。manifest.json
> Google Lighthouse（例如Google Lighthouse）的性能监视工具对于优化PWA速度和响应能力是无价的。
• 理解PWA：
>三个核心PWA功能地址典型的Web应用程序缺点：

可靠性：

> PWAS负载可靠，即使网络连接较差，也可以模仿本机应用程序，与标准网页不同。

速度：

PWA性能仍然保持一致，无论位置，网络速度或其他外部因素如何
1. >参与：> PWA提供与本机应用相似的身临其境的全屏体验，没有App Store安装，并且经常支持推送通知。
Google倡导了PWA的采用，其受欢迎程度正在迅速增长。 正如DUDA首席执行官Itai Sadan在2018年CloudFest上指出的那样：“进步的Web应用程序代表了下一个伟大的飞跃……他们采用了本机应用程序的最佳方面……并将其纳入响应式网站。”
3. PWA开发要点：> PWA开发与标准Web应用程序开发相似，需要HTTP进行部署（Localhost测试是可以接受的）。 关键要求包括：

   1. 清单文件（manifest.json）：此JSON文件控制PWA在设备的主屏幕上的外观，定义名称，图标，颜色等。CSS在这里不直接涉及；纯粹是配置。 （下面显示的示例）

      

   2. 服务工作者：一个独立于浏览器运行的JavaScript文件，拦截网络请求，缓存资源和处理推送通知。这是离线能力的基础。 （下面的示例摘要）

      <code class="language-javascript">self.addEventListener('install', function(e) {
      e.waitUntil(
        caches.open('airhorner').then(function(cache) {
          return cache.addAll([
            '/',
            '/index.html',
            '/index.html?homescreen=1',
            '/?homescreen=1',
            '/styles/main.css',
            '/scripts/main.min.js',
            '/sounds/airhorn.mp3'
          ]);
        })
      );
      });</code>

   3. >

      >网站资产（包括CSS）：在服务工作者安装期间，安装了所有站点资产，包括CSS，JavaScript和媒体文件。 这是CSS样式生效的地方。

   PWAS的

   CSS注意事项：> 几个关键决策会影响CSS实施：

   • >平台特定的UIS：

     避免使用特定于平台的UIS可防止用户疏远用户，并减少对潜在变化的平台设计的依赖。通常建议采用一种平台不足的方法，同时努力采用类似天然的行为。

     >
   >设备功能：
   • 所有平台的设计，包括台式机（Chrome已经支持桌面PWAS）。 使用CSS和服务工作人员根据可用资源来调整功能。

   优雅的降解和渐进式增强： css固有的优美降解（忽略了无支撑的属性）应通过渐进的增强来补充。 在使用诸如服务工作者之类的功能之前，请测试API支持：

   • <code class="language-javascript">if (!('serviceWorker' in navigator)) {
       console.log('Service Worker not supported');
       return;
     }</code>

     一般建议：
   >平衡用户经验与开发资源的经验。 利用设计标准（例如材料设计）和框架（例如Bootstrap）进行平台 - 静态设计。 有条件的CSS加载基于平台（使用
   • 或

     ，尽管后者的可靠性较低），但可以增加复杂性。 navigator.platformnavigator.userAgent> PWA框架：

   框架加速了PWA的开发，但会对性能产生负面影响。 明智地使用它们，尤其是在初始学习阶段。 后来，争取精益，极简主义样式表和平台 - 不合Stic设计。

   创建React App：

   提供PWA开发的React组件。>

   • Google的框架提供本机PWA支持（

     ）。>

     

   • > ionic：>利用角度，科尔多瓦和内置服务工作者/对跨平台PWA开发的支持。

     

   PWA性能优化： 保持速度和参与至关重要。 保持CSS苗条和极简主义。 考虑：

   > http/2服务器使用
   对于关键CSS
   > NetworkInformationApi和缓存
   • rel=preload插入关键CSS
   • 资源最小化和优化
   • Google Lighthouse
   >
   • >此性能监控工具（集成到Chrome DevTools中）生成详细的报告，以帮助优化PWA性能。

   结论：

   使用CSS开发PWA需要仔细考虑性能和响应能力。 尽管许多Web开发技术都适用，但有关框架使用的明智决定，CSS优化对于创造高性能，引人入胜的用户体验至关重要。 切记优先考虑精益，高效的设计。

以上是CSS和PWA：构建进步网络应用程序的一些技巧的详细内容。更多信息请关注PHP中文网其他相关文章！