搜索文档 /

React中的进步Web应用

让你的React应用成为PWA

PWA的两个主要要求是 服务人员 A. 网络清单 .虽然可以手动将这两种功能添加到应用程序中,但Create React app (CRA)和Ionic CLI已经提供了这一功能。betway东盟体育app

index.ts 对于你的应用程序,有一个呼叫 serviceWorker.unregister () 功能。基本CRA提供有服务工人作为选择选择功能,因此必须启用它。启用,呼叫 serviceWorker.register ()


              进口
             反应
              
             
              “反应”
              
             
              进口
             ReactDOM
              
             
              “react-dom”
              
             
              进口
             应用程序
              
             
              ”。/应用程序
              
             
              进口
             
              
             
              作为
             服务工作者
              
             
              ”。/ serviceWorker '
              
             ReactDOM
              
              使成为
              
              <
             应用程序
              /
              >
              
             文档
              
              getElementById
              
              “根”
              
              
              
             
              //如果你想让你的应用离线工作和加载更快,你可以改变
             
              //未注册()到注册()。请注意,有一些陷阱。
             
              //了解更多服务人员:https://bit.ly/CRA-PWA
             
              / / serviceWorker.unregister ();
             服务工作者
              
              注册
              
              
              
复制 复制

一旦这个包被添加,运行 betway东盟体育app离子构建 建造 目录将准备部署为PWA。

默认情况下,react应用程序包的应用图标带有Ionic标志。betway东盟体育app确保更新清单以使用正确的应用程序名称,并替换图标。

注意:像Service Workers和许多JavaScript api(如地理位置)这样的特性要求应用程序托管在一个安全的上下文中。当通过宿主服务部署应用程序时,请注意需要使用HTTPS才能充分利用service Workers。

服务人员配置

默认情况下,CRA/React Scripts带有预先配置的Service Worker设置 工具箱的Webpack插件 .这使用了缓存优先策略,这意味着你的应用程序将从缓存加载,即使网络返回一个新版本的应用程序。

由于性质或CRA / React脚本,因此为此的配置是反应脚本的内部,这意味着无法自定义,而不会从React脚本中弹出。目前,离子CLI不支持弹出的Rbetway东盟体育appeact应用程序,因此如果采用此动作,则需要使用NPM /纱线脚本而不是离子CLI。

部署

重火力点

Firebase托管为进步Web应用程序提供了许多好处,包括cdn的快速响应时间,默认启用HTTPS,以及支持 HTTP2推

首先,如果没有现成的, 创建项目 在重火力点。

接下来,在终端中,安装Firebase命令行:


              
              npm
             
              安装
             - g firebase-tools

安装Firebase CLI后,运行 重火力点init 在你的离子项目中。betway东盟体育appCLI提示:

“你想为这个文件夹设置哪些Firebase CLI特性?” 选择“托管:配置和部署Firebase托管站点”。

"为这个目录选择一个默认的Firebase项目:" 选择您在Firebase网站上创建的项目。

“你想用什么作为你的公共目录?” 输入“构建”。

注意:回答下面两个问题将确保路由、硬加载和深度链接在应用程序中工作:

配置为单页应用程序(重写所有url到/index.html)? 输入“是的”。

"文件构建/index.html已经存在。覆盖吗?” 进入“不”。

一个 firebase.json 生成配置文件,配置应用程序的部署。

最后需要做的是确保缓存头被正确设置。为此,添加a 片段的 firebase.json 文件。完整的 firebase.json 看起来像:


              
             
              “托管”
              
             
              
             
              “公共”
              
             
              “构建”
              
             
              “忽略”
              
             
              
             
              “firebase.json”
              
             
              “* * / *”。
              
             
              “* * / node_modules / * *”
             
              
              
             
              “重写”
              
             
              
             
              
             
              “源”
              
             
              “* *”
              
             
              “目的地”
              
             
              “/ index . html”
             
              
             
              
              
             
              “标题”
              
             
              
             
              
             
              “源”
              
             
              “/ * *”
              
             
              “标题”
              
             
              
             
              
             
              “关键”
              
             
              “cache - control”
              
             
              “价值”
              
             
              “公共,最大年龄= 31536000”
             
              
             
              
             
              
             
              
             
              
             
              
复制 复制

有关的更多信息 firebase.json 属性,看到 重火力点文档

接下来,通过运行以下命令构建应用程序的优化版本:


              
             betway东盟体育app离子构建——刺激

最后,通过运行来部署应用程序:


              
             重火力点部署

完成后,应用程序将是实时的。

以前的
平台跑龙套
下一个
离子反应中的覆盖层betway东盟体育app
Baidu