通俗地说,什么是渐进式网络应用程序?

What is a progressive web app in layman's terms?

我已经做了几年的开发人员,但我无法理解 PWA 到底是什么。

例如,如果某个应用 运行 在移动设备上运行 phone,则它是本机应用。我可以指着它告诉人们 "look it is a native app."

同理,什么是PWA?它在哪里运行?我可以指向哪个应用程序并告诉它它是 PWA?

根据我在网上阅读的内容,我觉得 PWA 是一个拥有现代技术并为用户提供 "native app like" 体验的网站。

我的理解正确吗?

总而言之,是一个原生体验的网站? 如果是这样,用户如何将普通网站与 PWA 分开?

粗略地说,PWA 是一种具有原生感觉的 Web 应用程序,可以安装到用户的主屏幕,并且可以在 Internet 连接可用时启动和离线工作,并可选择同步到服务器。

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

  • Progressive - Work for every user, regardless of browser choice, because they are built with progressive enhancement as a core tenet.

  • Responsive - Fit any form factor, desktop, mobile, tablet, or whatever is next.

  • Connectivity independent - Enhanced with service workers to work offline or on low quality networks.

  • App-like - Use the app-shell model to provide app-style navigation and interactions.

  • Fresh - Always up-to-date thanks to the service worker update process.

  • Safe - Served via HTTPS to prevent snooping and ensure content has not been tampered with.

  • Discoverable - Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them.

  • Re-engageable - Make re-engagement easy through features like push notifications.

  • Installable - Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.

  • Linkable - Easily share via URL and not require complex installation.

我认为 PWA 是一个相当宽泛的术语。我之所以说广泛,是因为有很多方法可以开发和分发 PWA。用外行人的话说,渐进式 Web 应用程序是 'web site',实际上 used/displayed 类似于本机应用程序。我相信这方面的一个例子是 phonegap 之类的东西?其中 phonegap 构建了一个应用程序 'surrounding/scaffolding' 并在顶部显示了一些自定义 CSS 的网页。 (编者注:Phonegap 与渐进式 Web 应用程序无关。Phonegap 创建实际的原生应用程序。将网站包装在原生应用程序中与渐进式 Web 应用程序非常不同。)

最近我一直在做很多基于 React 的网站,我认为这是目前你可以获得的最接近 PWA 的网站(特别是 IOS 只支持最小的功能来鼓励你为他们的应用程序商店构建本地应用程序)。

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

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

从技术上讲,PWA 是一个包含两个东西的网站:Web 应用程序清单文件和 Service Worker。

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

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

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

渐进式网络应用的优势:

1。更小更快: 渐进式网络应用程序的大小比本机应用程序小得多。他们甚至不需要安装。那就是他们没有浪费光盘 space 并且加载速度非常快。

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

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

4。成本效益: 需要为 Android 和 iOS 设备分别开发原生移动应用程序,并且它们的开发成本非常高。另一方面,渐进式网络应用程序具有相同的功能,但价格仅为之前的一小部分。

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

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

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

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

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

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

渐进式网络应用程序的缺点:

1。较少访问系统功能: 目前,Progressive Web Apps 对本机系统功能的访问比本机应用程序有限。此外,并非所有浏览器都支持其全部功能,但也许在不久的将来,它将成为新的开发标准。

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

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

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

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

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