【问题标题】:What is a progressive web app in layman's terms?通俗地说,什么是渐进式网络应用程序?
【发布时间】:2017-11-01 13:23:33
【问题描述】:

我已经从事开发人员多年,但我无法理解 PWA 到底是什么。

例如,如果一个应用在手机上运行,​​它就是一个原生应用。我可以指向它并告诉人们“看起来它是一个原生应用程序”。

在类似的意义上,什么是 PWA?它在哪里运行?我可以指向哪个应用并判断它是 PWA?

根据我在网上阅读的内容,我认为 PWA 是一个拥有现代技术并为用户提供“类似原生应用”体验的网站。

我的理解正确吗?

总而言之,它是一个有原生体验的网站? 如果是这样,用户如何将普通网站从 PWA 中分离出来?

【问题讨论】:

  • 我写了一系列关于 PWA 的文章:dev.to/paco_ita/… 你可以看看。我从基础开始,将它们与原生应用程序进行比较,然后深入研究技术细节以提供有关该主题的广泛描述。

标签: native progressive-web-apps


【解决方案1】:

渐进式网络应用 (PWA) 的概念是 Google 于 2015 年底提出的。它们基本上是网络应用程序(网站),但外观和感觉与其他原生移动应用程序相似。支持渐进式网络应用的网站可以提供离线工作、推送通知和设备硬件访问等功能。

渐进式网络应用的好处:

1.更小更快: 渐进式 Web 应用程序的大小比原生应用程序小得多。他们甚至不需要安装。那就是它们不会浪费磁盘空间并且加载速度非常快。

2。响应式界面: 支持渐进式 Web 应用 (PWA) 的网页能够自动适应各种屏幕尺寸。它可以是智能手机、平板电脑、台式机或笔记本电脑。

3.无需更新: 大多数移动应用程序都需要每周定期更新。与普通网站一样,渐进式网络应用 (PWA) 始终会在发生用户交互时加载最新的更新版本,无需应用或 Play 商店批准。

4.成本效益: 原生移动应用需要分别为Android和iOS设备开发,开发成本非常高。另一方面,渐进式 Web 应用具有相同的功能,但价格只是之前价格的一小部分。

5. SEO优势: 渐进式网络应用程序可以被搜索引擎发现并且加载速度超快。就像其他网站一样,它们的链接也是可共享的。换句话说,这提供了良好的用户体验并导致 SEO 排名提升。

6.离线功能: 由于 Service Worker API 的支持,PWA 可以在离线或低互联网连接的情况下访问。

7.安全性: PWA 通过 HTTPS 连接交付,并在每次交互时保护用户数据。

8.推送通知: 通过推送通知的支持,PWA 可以轻松地与用户交互,并提供非常棒的用户体验。

9.绕过应用商店: PWA 不需要 App Store 或 Google Play 商店的支持。他们的更新版本可以直接从网络服务器加载,而不需要应用商店的批准。另一方面,如果需要任何新的更新,本机应用程序需要几天的批准。有被拒绝或禁止的可能性。

10.零安装: 在浏览过程中,渐进式网络应用程序在手机和平​​板电脑上拥有自己的图标,就像移动应用程序一样,但无需经历繁琐而缓慢的 App Store 安装过程。

渐进式网络应用的缺点:

1.较少使用系统功能: 目前,渐进式 Web 应用程序对原生系统功能的访问权限比原生应用程序有限。此外,并非所有浏览器都支持其全部功能,但可能在不久的将来,它将成为新的开发标准。

2。更多 Android - 更少 Apple 的 iOS: 目前,Android 设备最支持渐进式 Web 应用程序。 Apple 的 iOS 只是部分支持。

3.无审核标准: 渐进式网络应用程序不需要任何适用于应用商店原生应用程序的审查系统。它可能会使流程更快,但缺乏应用商店的促销优惠。

渐进式网络应用清单: 渐进式 Web 应用程序的清单很广泛。我在这里描述了它的主要几项。 1. HTTPS 2. Web 应用清单 - manifest.json 3. 服务人员 4.响应式设计 5. 应用图标 6. 3G首次加载也很快

结论: 渐进式网络应用程序提供了巨大的可能性。尽管预计在不久的将来会有很多功能和浏览器适应性。但是,市场上已经存在的任何东西都足以显示出强大的移动存在。

访问视频博客:https://www.youtube.com/watch?v=NVXP-RzA0Eo

【讨论】:

    【解决方案2】:

    PWA 是一个具有某些渐进式功能的网站,最显着的是能够离线加载或在连接不稳定的区域加载、快速加载、显示推送通知以及具有其他原生应用程序品质。 PWA 的好处是它们可以在任何浏览器上运行(因为它们是一个普通的网站,如果浏览器不支持 PWA,那么用户可以获得正常的网站体验),甚至是桌面浏览器。在移动设备上,通常会提示用户将 Web 应用程序安装到主屏幕,这几乎是瞬间发生的,并且由于网站已经加载,几乎不使用任何数据。这允许比原生应用程序更多的“下载”,从而提高参与度。有关 PWA 的另一个简要概述,Google has some great articles about them.

    从技术上讲,PWA 是一个包含两件事的网站:一个网络应用清单文件和一个服务工作者。

    清单是一个 JSON 文件(通常称为 manifest.json),其中包含有关渐进式 Web 应用程序的一些信息。它包含的信息类似于您将包含在本机应用程序中的信息。它具有名称、在主屏幕上显示的短名称、图标、方向等。Web 应用程序清单可用于任何站点(甚至非 PWA),以向浏览器提供更多信息并允许站点创建快捷方式在用户的主屏幕上,但它是 PWA 所必需的。 You can read more about it over on the Google Developer's site.

    Service Worker 是一个 JavaScript 文件,可以由浏览器安装以执行某些任务。该文件将在站点后台运行,可以执行缓存资源、拦截网络请求(执行从缓存返回数据等操作)、接收推送通知、后台同步等操作。当用户首次访问您的站点时这个 JS 文件被安装并开始运行。这是允许诸如离线功能之类的东西的文件。 You can read more about service workers on the Google Developer's site as well.

    【讨论】:

      【解决方案3】:

      粗略地说,PWA 是一个具有原生感觉的网络应用程序,可以安装到用户的主屏幕上,并且可以在 Internet 连接可用时通过可选的同步到服务器来启动和脱机工作。

      To be considered a Progressive Web App, your app must be:

      • 渐进式 - 为每个用户工作,无论浏览器选择如何, 因为它们是以渐进增强为核心原则构建的。

      • 响应式 - 适合任何外形尺寸、台式机、移动设备、平板电脑或其他任何设备 是下一个。

      • 独立于连接 - 增强了服务人员的工作能力 离线或在低质量的网络上。

      • App-like - 使用 app-shell 模型提供应用风格的导航和 互动。

      • 新鲜 - 由于 Service Worker 更新过程,始终保持最新状态。

      • 安全 - 通过 HTTPS 提供服务,以防止窥探并确保内容没有 被篡改了。

      • 可发现 - 由于 W3C,可识别为“应用程序” 清单和服务工作者注册范围允许搜索 引擎来找到它们。

      • 可重新参与 - 通过推送等功能轻松重新参与 通知。

      • 可安装 - 允许用户“保留”他们认为最有用的应用 他们的主屏幕没有应用商店的麻烦。

      • 可链接 - 通过 URL 轻松分享,无需复杂安装。

      【讨论】:

      • 谢谢。您能告诉我如何在 Windows 10 或 Android 的主屏幕上安装一个吗?
      • @krv 这是一个不同的问题,我还不知道答案。你最好开始一个新的话题。
      【解决方案4】:

      我认为 PWA 是一个相当广泛的术语。我说广泛是因为有很多方法可以开发和分发 PWA。在 Layman 的术语中,Progressive Web App 是一个“网站”,可以像原生应用程序一样有效地使用/显示。我相信这方面的一个例子是phonegap? phonegap 构建了一个“环绕/脚手架”应用程序,并在顶部显示了一个带有一些自定义 CSS 的网页。 (编者注:Phonegap 与渐进式 Web 应用程序无关。Phonegap 创建实际的原生应用程序。将网站包装在原生应用程序中与渐进式 Web 应用程序非常不同。)

      最近,尽管我一直在开发许多仅基于 React 的网站,我认为这是您目前可以获得的最接近 PWA 的网站(尤其是对于仅支持最小功能以鼓励您构建本机应用程序的 IOS他们的应用商店)。

      但是是的,它基本上是一个类似于应用程序的应用程序,它不是一个应用程序;从网页渲染 :thumbup:

      【讨论】:

        猜你喜欢
        • 2013-11-06
        • 2012-03-26
        • 1970-01-01
        • 1970-01-01
        • 2010-12-30
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2016-11-19
        相关资源
        最近更新 更多