搜索文件 /

渐进式网络应用反应

使您的React App A PWA

PWA的两个主要要求是一个 服务工作者 A. 网页清单 。虽然可以手动将这两个添加到应用程序,但是来自Create React App(CRA)和IONIC CLI的基础项目已经提供了这一点。betway东盟体育app

在里面 索引 对于您的应用程序,请拨打电话 serviceworker.unregister() 功能。基本CRA提供有服务工人作为选择选择功能,因此必须启用它。启用,呼叫 serviceworker.register()


              进口
             反应
              
             
              '反应'
              ;
             
              进口
             反应族
              
             
              '反应 -  dom'
              ;
             
              进口
             应用程序
              
             
              '。/应用程序'
              ;
             
              进口
             
              *
             
              作为
             服务工作者
              
             
              './serviceworker'
              ;
             反应族
              
              使成为
              
              <
             应用程序
              /
              >
              
             文档
              
              getelementbyid
              
              '根'
              的)
              的)
              ;
             
              //如果您希望将应用程序脱机并加载更快,可以更改
             
              //未注册()到注册()。请注意,有一些陷阱。
             
              //了解有关服务工作者的更多信息:https://bit.ly/cra-pwa
             
              // serviceworker.unregister();
             服务工作者
              
              登记
              
              的)
              ;
复制 复制

一旦添加此程序包运行 betway东盟体育app离子建设 建造 目录将准备好作为PWA部署。

默认情况下,React Apps Package附带应用程序图标的离子徽标。betway东盟体育app务必更新清单以使用正确的应用程序名称,并替换图标。

注意:服务工作人员和许多JavaScript API(例如地理位置)等功能要求应用程序在安全上下文中托管。通过托管服务部署应用程序时,请注意,将需要HTTPS来充分利用服务工作者。

服务工作者配置

默认情况下,CRA / React Scripts基于的预配置服务工作者设置 Workbox的WebPack插件 。这利用缓存第一个策略,这意味着您的应用程序将从缓存中加载,即使网络返回更新版本的应用程序。

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

部署

Firebase.

Firebase Hosting为渐进式Web应用提供了许多优势,包括默认情况下的CDN,HTTPS的快速响应时间,并支持 http2推

首先,如果尚未提供, 创建项目 在Firebase。

接下来,在终端中,安装Firebase CLI:


              $
              NPM.
             
              安装
             -g firebase-tools

使用Firebase CLI安装,运行 Firebase Init. 在您的离子项目中。betway东盟体育appCLI提示:

“您想要为此文件夹设置哪个Firebase CLI功能?” 选择“托管:配置和部署并部署Firebase托管站点。”

“选择此目录的默认Firebase项目:” 选择您在Firebase网站上创建的项目。

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

注意:接听以下两个问题将确保在应用程序中进行路由,硬重新加载和深度链接工作:

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

“文件构建/ index.html已存在。覆盖?” 输入“否”。

一种 Firebase.Json. 配置配置文件,配置应用程序以进行部署。

需要的最后一件事是确保正确设置缓存标头。为此,添加一个 标题 片段赛段 Firebase.Json. 文件。完整 Firebase.Json. 好像:


              {
             
              “托管”
              
             
              {
             
              “民众”
              
             
              “建造”
              
             
              “忽略”
              
             
              [
             
              “firebase.json”
              
             
              “** /。*”
              
             
              “** / node_modules / **”
             
              ]
              
             
              “重写”
              
             
              [
             
              {
             
              “来源”
              
             
              “**”
              
             
              “目的地”
              
             
              “/index.html”
             
              }
             
              ]
              
             
              “标题”
              
             
              [
             
              {
             
              “来源”
              
             
              “/ **”
              
             
              “标题”
              
             
              [
             
              {
             
              “钥匙”
              
             
              “缓存控制”
              
             
              “价值”
              
             
              “公共,最大年龄= 31536000”
             
              }
             
              ]
             
              }
             
              ]
             
              }
             
              }
复制 复制

有关更多信息 Firebase.Json. 属性,见 Firebase文档

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


              $
             betway东盟体育app离子构建 - 补充

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


              $
             Firebase部署

完成此后,该应用程序将居住。

以前的
平台实用程序
下一个
离子反应中的叠加betway东盟体育app
Baidu