与自由职业者一起构建渐进式Web应用程序所需的一切-IDC帮帮忙

渐进式网络应用程序(PWA)风靡一时,并且有充分的理由。这些下一代移动网站比本机应用程序更容易实现,提供“类似应用程序”的UI / UX,并且在帮助企业提高其移动资产的投资回报率方面拥有令人印象深刻的记录。

Pinterest将其移动网站重建为PWA时,浏览时间增加了40%,广告收入增长了44%,与之前的移动网络体验相比,核心业务增长了60%。最重要的是,Pinterest仅用了三个月就用PWA彻底改造了它的移动存在。

渴望加入Pinterest和其他PWA成功故事的行列?这是与自由职业者建立PWA的起点。

1.从基本的WEB应用程序开始

构建PWA的初始步骤与构建任何其他现代Web应用程序的步骤相同。

  1. 从任何软件开发生命周期(SDLC)的典型规划和需求收集阶段开始。您可以在此定义应用程序的功能。
  2. 通过与UI / UX设计人员合作,将这些需求转换为具有线框,用户故事和模型的应用程序的蓝图。
  3. 后端开发人员的帮助下设置应用程序的服务器端(数据库和托管)。
  4. 前端开发人员的帮助下将这些设计转换为工作UI 。

流行的JavaScript框架(如Angular,React和Vue)支持PWA功能,因此很有可能您已经很好地开始使用PWA应用程序了。您可以使用Chrome的Lighthouse扩展程序来检查合规性。

2.让您的UI响应

响应式网页设计(RWD)是设计网页以根据最终用户设备的屏幕尺寸或方向自动调整大小和重新格式化的艺术。鉴于Web开发领域向移动优先理念的整体转变,这是必须的。这也是Google PWA清单上的项目之一。从诸如Bootstrap之类的CSS框架到诸如Gridset之类的工具,Web设计人员可以通过多种方式将RWD合并到您的PWA中。

3.使您的网络应用程序渐进

渐进增强是一种设计策略,其中首先加载网页的核心内容,然后根据最终用户的浏览器,连接或设备的功能逐步引入更细微的表示层和功能。它确保即使是拥有旧手机和3G连接的用户也能够享受基准级别的用户体验。一个前端开发人员可以通过建立一个应用程序外壳进步的应用:基本的HTML和CSS,这将使用户的东西看看其他比,而实际功能的JavaScript加载一个空白页。

4.通过HTTPS服务网页

HTTPS是Google PWA核对清单上的主要项目之一。S代表“安全”,表示某种形式的加密(通常是SSL或TLS)用于保护您的网站和用户浏览器之间的通信。使用服务工作者和构建PWA所需的其他功能也是必需的。要设置HTTPS,必须:

  • 使用专用IP地址托管一个人的网络应用程序。
  • 购买SSL / TSL或数字证书(基本上是唯一标识您网站的ID)。或者,如果您拥有自己的服务器,则可以免费设置自己的服务器。
  • 通过Web主机激活并安装证书(一天或两天等待)或在网络管理员的帮助下手动安装。
  • 在前端开发人员的帮助下,将所有网页从HTTP迁移到HTTPS

5.设立服务人员

服务工作者提供了一个强大的API来拦截和处理网络请求。此脚本可以在浏览器的后台运行,以提供推送通知和后台同步等功能。它也是PWA脱机工作能力背后的技术基础,允许应用程序从预先编码的响应缓存中运行。一个web开发人员熟悉使用动态缓存的工作的来龙去脉是与服务职工解锁PWA的全部潜力必须的。

6.使用应用清单为PWA设置图标

Web应用程序清单是一个JSON文件,用于描述PWA的元数据。清单告诉浏览器应用程序在用户的移动设备上“安装”后的行为,让您描述应用程序名称,图标和起始URL。Chrome需要显示“添加到主屏幕”提示,该提示允许用户将您的图标添加到设备的应用启动器或主屏幕。它还允许您控制PWA在启动后在浏览器中的显示方式(例如,隐藏地址栏看起来像本机应用程序)。应用程序清单可让前端开发人员快速轻松地进行设置。确保您的图形设计师将图标设计为您希望在用户主屏幕上显示的图标。

进一步阅读

简而言之,PWA是用户优先的,面向性能的Web应用程序,可以在本地安装以提供类似应用程序的用户体验。“渐进式”部分是为所有用户提供基线级别的质量,包括那些连接不良,浏览器和低价设备的用户。本文仅介绍了使用PWA可以执行的操作。查看Google的PWA核对表以获取完整的功能列表。Upwork的招聘总部充满了您可以用来帮助您建立自由职业者团队并将您的PWA项目变为现实的资源。