reactjs - PWA only 绿地项目的优缺点？

Question

我们的团队正在启动新项目，最初考虑将 react-native 作为构建在其上的框架(我们中的大多数人现在已经在 React 生态系统中工作了一段时间)。

我们也在讨论仅基于 PWA 的方法，因为很快就会支持 Safari，Chrome 已经有很多可用的 API，桌面 PWA 即将推出。

我想向社区询问与仅 PWA 方法相关的可能并发症，以下是我们想到的缺点:

1) 在 App/Play 商店中没有存在/可发现性

2) 无法访问某些 api，例如 NFC...(但从 https://whatwebcando.today 在 chrome 中的外观来看，我们将可以访问我们需要的所有内容)

3)流畅的用户体验将很难实现(尽管很可能做到 60fps)

4)用户对PWA的安装/使用过程不太熟悉，可能会觉得疏远

5) 获得良好的缓存/网络和性能体验所需的大量知识(不过，我们已经从 Web 应用程序开发中了解了大部分知识)

一些优势

1)应用商店没有削减应用内数字内容购买

2)真正适用于所有平台移动和桌面的代码库

3) 用户设备重量更轻

4) 完全控制发布过程

5) 简单快速的更新

6) 我们的团队将使用他们已经熟悉的工具开发更高质量的代码，而不是学习 react native 的原生部分。

假设项目在 7 到 9 个月后上线，PWA 是一种可行的前进方式吗？

Answer 1

像我们这里的大多数人一样，我们也开始使用 PWA 并且遇到了一些类似的问题。尝试用我们的 PWA 启动经验来回答您的问题。

剧透警报:现在可以在 PWA 中创建生产就绪、高性能、一次编写、随处运行的应用程序。向做过的人学习- Ali express和 Twitter . Here is one best article关于我们今天拥有的不同选择的比较。

问题:1) 在 App/Play 商店中没有存在/可发现性

答案: PWA 应用程序可以打包为应用程序(如 Android 的 .apk)并在应用程序商店中发布。这适用于所有平台(iOS、Android、UWP)。这是一个方便的打包工具( https://www.pwabuilder.com/ )。

它所做的是将您的站点(URL)打包到托管的 Web 应用程序(如果支持)(UWP)中，或者通过创建 Web View 并包装您的应用程序(iOS、Android)来使用 Cordova 作为 polyfil。希望 Android 很快会提供避免这种 polyfil 的选项。在此之前，我们可以使用 Cordova 进行包装，并且仍然可以利用 PWA 功能(例如 Service Worker-离线缓存。iOS 仅从 10.3 开始支持 Service Worker)。

当然，进入应用商店也伴随着应用商店 yield 分享的成本。仍然使用 PWA 的“添加到主页选项”，你可以慢慢地绕过应用商店获得新的用户群。如果您使用付费应用程序空间，则是增加收入的一个好后门。

问题:2) 无法访问某些 api，例如 NFC...(但从 https://whatwebcando.today 在 chrome 中的外观来看，我们将可以访问我们需要的所有内容)

答案:如果你用cordova 包装你的应用程序(如上面的解决方案-PWA builder)，你可以使用cordova 插件来处理不支持的事情......比如NFC。这将关闭所有硬件访问限制。随着支持开始出现，我们可以继续用 PWA 方式替换。这基本上就是 PWA 中的“渐进式”:)

问题 :3) 很难实现流畅的 UX(尽管很可能达到 60fps)

答案:是的，您无法击败 native 应用程序的 FPS。但是使用 PWA，对于大多数应用程序(不包括游戏、大量动画的应用程序)来说并不重要，考虑到 Service Worker-缓存和其他 PWA 功能，应用程序可以快速且流畅地加载到没有任何框架人眼可以检测到的滴剂。你不需要超过 60fps 来实现这一目标。 Here is some good explanation如果你用谷歌搜索为什么 60fps，你会发现很多这样的文章。

如果您的目标是企业环境中的任何特定硬件，您可以测试设备的 FPS here在支持 PWA 的最新版本浏览器中(目前 Chrome 是一个不错的选择)。

问题 4) 用户对 PWA 安装/使用过程不太熟悉，可能会觉得疏远。

答案:正如第一个答案中提到的，您可以继续将您的 PWA 站点作为应用程序(托管应用程序)在应用程序商店中使用，并将 PWA 的优势扩展到 Web 浏览器中。 PWA 应用程序也为浏览器中的用户带来好处(如离线功能)，并且要求用户“添加到主屏幕”的选项是您通过 PWA 获得的另一个好处(增加用户参与度)。

问题 5) 获得良好的缓存/网络和性能体验所需的大量知识(不过，我们已经从 Web 应用程序开发中了解了大部分知识)

答案:上面的 PWA 构建器链接还可以帮助您生成“服务 worker ”，它以不太复杂的方式解决您的缓存问题。是的，将会有很多最佳实践，并且随着 PWA 的发展，事情会不断发生。不过，您不必准备好一切才能开始。您可以从一个基本的 Service Worker 和 list 文件开始，将其添加到主屏幕/将其打包为应用程序商店的应用程序，并且随着您的进展，您可以继续在其上添加更多 PWA 内容。

以上所有工作都将带来您提到的好处，值得犯错