与服务人员建立PWA和create-react-app

2020年12月30日11:20:03 发表评论 32 次浏览

本文概述

本教程介绍了有关使用Service Worker通过create-react-app(CRA)构建渐进式Web应用程序(PWA)的知识。我们将首先解释PWA, 然后讨论什么是服务人员, 最后, 回顾设置CRA的服务人员的步骤。

关于渐进式Web应用程序

渐进式Web应用程序是一种增强型Web应用程序, 它具有与本机或特定于平台的应用程序相同的功能。

例如, 渐进式Web应用程序可以直接安装在用户的主屏幕上, 并且可以在独立窗口中运行。这些应用程序在恶劣的网络条件下可以快速可靠地运行, 甚至可以脱机运行。

考虑一下你的典型移动用户在使用应用程序时如何在不断变化的环境中移动。它们可能始于具有可靠高速网络的建筑物-很棒。然后, 他们走到街上, 在那儿失去了wifi并回到了蜂窝连接。

他们可能会捕获到强大的4G甚至5G信号……或者可能遇到只有3G的低服务水平。即使根本没有连接, 它们如何在所有网络条件下都保留在你的应用程序上?

渐进式Web应用程序使你无论身在何处都能吸引用户, 并在任何网络环境中为他们提供快速可靠的用户体验。

什么是服务人员?

服务人员是一种特殊的网络工作者拦截来自Web应用程序的网络请求并控制如何处理这些请求。特别是, 服务工作者可以管理资源的缓存以及从缓存中检索这些资源, 从而支持离线优先模式这对PWA至关重要

服务人员为运行渐进式Web应用程序提供必要的支持。

服务工作者采用JavaScript文件的形式, 该JavaScript文件在与主浏览器线程不同的独立线程中运行。

最新版本的CRA内置了对注入清单来自的插件工作箱, 用于处理服务人员的编译并将其注入到你应用的预缓存列表中。

我们为制作了一个自定义演示.
不完全是。点击这里查看.

与服务人员建立PWA和create-react-app1

设置服务人员以创建"反应应用"

先决条件

开始之前, 你需要做几件事:

  • 确保你使用的是create-react-app 4或更高版本
  • 确保你的生产Web服务器支持HTTPS

提示:出于安全原因, 服务工作者和渐进式Web应用程序功能只能在HTTPS上运行。用户仍然可以通过HTTP运行你的应用, 但是他们将无法访问离线优先模式以及服务人员可以使用的所有其他重要功能。

现在, 我们准备进入设置过程。

1.)创建一个项目并添加一个service-worker.js文件

要利用CRA与Workbox的InjectManifest插件集成, 你需要做的就是使用自定义PWA模板创建一个新项目:

npx create-react-app my-app --template cra-template-pwa

模板会自动添加一个src / service-worker.js文件到你的项目。该文件包含一个基本的服务人员, 你可以稍后再根据自己的喜好进行自定义。

或者, 如果你希望使用TypeScript而不是JavaScript编写应用, 请按照以下方法创建一个包含入门程序的项目src / service-worker.js文件:

npx create-react-app my-app --template cra-template-pwa-typescript

2.)注册服务人员

默认情况下, 在你注册服务工作者之前, 他们不会活跃并可以使用。要了解更多信息, 你可以阅读以下内容的基础知识服务人员的生命周期.

转到src / index.js在你的项目中找到以下行:

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://cra.link/PWA
serviceWorker.unregister();

要注册服务工作者以供使用, 只需修改最后一行, 使其看起来像这样:

serviceWorker.register();

的src / service-worker.js现在, 文件已注册, 并准备在为用户提供脱机优先体验方面发挥关键作用。

3.)定制服务人员

发起人src / service-worker.js你使用添加的文件cra-模板-pwaorcra-template-pwa-typescript模板附带了支持渐进式Web应用程序的基本逻辑。如果你想扩展应用程序的离线优先功能, 则可以轻松自定义src / service-worker.js.

小费:要支持预缓存, 请确保你分配了自我.__ WB_MANIFEST值设置为InjectManifest插件可以识别的变量。插件需要查看此值才能生成用于预缓存的URL清单。

有关如何自定义广告的一些示例src / service-worker.js文件包括:

  • 使用其他服务人员包从工作箱
  • 添加推送通知
  • 微调背景数据同步
  • 集中更新共享地理位置或陀螺仪数据
  • 增加了处理来自不同域的流量的能力

作为服务人员API随着PWA的不断发展, 你可以期待能够支持更多功能和用例。

4.)帮助用户浏览你的渐进式Web应用程序

现在, 你已经配置了项目以支持服务人员, 现在是时候确保你的用户已经准备好并且能够充分利用离线优先模式了。自渐进式网络应用表现有些不同通过标准的网络应用程序, 最好对你的用户进行培训, 以便他们可以充分利用其经验。

你可以通过显示提示他们的应用内消息来帮助你的用户:

  • 使用支持服务人员的浏览器-例如Chrome, Firefox, Opera, Samsung Internet, Safari或Edge。 (注意:在私有或隐身模式下, 任何浏览器均不支持服务人员)。
  • 注意该应用何时离线工作。服务工作人员最初填充缓存后, 向你的用户显示一条消息, 通知他们现在可以离线使用该应用程序。
  • 关闭现有的浏览器标签以查看最新更新。默认情况下, 服务工作者在获取内容更新后将保持待机状态。结果, 用户只有在关闭所有打开的标签并加载新页面后才能看到更改。

总结

多亏了create-react-app与Workbox的强大集成, 将你的标准网络应用转变为PWA并不费力。一旦你设置服务人员以支持脱机优先用户体验, 你的应用程序将能够随时随地吸引更多用户。

全面了解生产React应用

调试React应用程序可能很困难, 尤其是当用户遇到难以重现的问题时。如果你有兴趣监视和跟踪Redux状态, 自动显示JavaScript错误以及跟踪缓慢的网络请求和组件加载时间,

尝试notlogy

.

与服务人员建立PWA和create-react-app2
LogRocket仪表板免费试用横幅

日志火箭就像Web应用程序的DVR, 实际上记录了React应用程序中发生的一切。你可以汇总并报告问题发生时应用程序所处的状态, 而不用猜测为什么会发生问题。 notlogy还监视你的应用程序的性能, 并使用客户端CPU负载, 客户端内存使用情况等指标进行报告。

notlogy Redux中间件软件包在你的用户会话中增加了一层可见性。 notlogy记录Redux存储中的所有操作和状态。

现代化如何调试React应用程序-免费开始监控.

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: