搜索文档 /

Angular中的渐进Web应用

让你的Angular应用成为PWA

PWA的两个主要要求是 服务人员 和一个 网络清单 .虽然可以手动将这两者添加到应用中,但Angular团队有一个 @angular / pwa 软件包,可用于自动化此操作。

@angular / pwa 包将自动添加一个service worker和一个app manifest到app中。要将这个包添加到app中,运行:


              
             ng
              添加
             @angular / pwa

一旦添加了这个包,就运行 betway东盟体育app离子构建——刺激 www 目录将准备好部署为PWA。

默认情况下, @angular / pwa 包的应用图标带有Angular的logo。请确保更新清单以使用正确的应用程序名称,并替换图标。

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

服务人员配置

@angular / pwa 已经添加,一个新的 ngsw-config.json 文件将在项目的根目录中创建。该文件负责配置Angular的service worker机制如何处理缓存资产。默认情况下,将提供以下内容:


              
             
              “美元模式”
              
             
              ”。/ node_modules / @angular /管理局的职员/ config / schema.json”
              
             
              “指数”
              
             
              “/ index . html”
              
             
              “assetgroup”
              
             
              (
             
              
             
              “名称”
              
             
              “应用程序”
              
             
              “installMode”
              
             
              “预取”
              
             
              “资源”
              
             
              
             
              “文件”
              
             
              (
             
              “/ ico”位于
              
             
              “/ index . html”
              
             
              “/ * . css”
              
             
              “/ * . js”
             
              
             
              
             
              
              
             
              
             
              “名称”
              
             
              “资产”
              
             
              “installMode”
              
             
              “懒”
              
             
              “updateMode”
              
             
              “预取”
              
             
              “资源”
              
             
              
             
              “文件”
              
             
              (
             
              “/资产/ * *”
              
             
              “/ *(带结束。| svg | cur | jpg | png | webp gif | |传递| ttf woff | | woff2 | ani)”
             
              
             
              
             
              
             
              
             
              
复制 复制

这里有两个部分,一个是应用程序特定的资源(JS, CSS, HTML)和应用程序将按需加载的资产。根据应用程序的不同,可以自定义这些选项。欲了解更详细的指南,请阅读 Angular团队的官方指南。

部署

重火力点

Firebase托管为Progressive Web Apps提供了许多好处,包括由于cdn而导致的快速响应时间、默认启用的HTTPS以及对 HTTP2推

首先,如果还没有可用, 创建项目 在重火力点。

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


              
              npm
             
              安装
             - g firebase-tools

注意:如果您是第一次使用firebase-tools,请使用 重火力点登录 命令。

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

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

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

“您希望使用什么作为您的公共目录?” 进入“www”。

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

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

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

一个 firebase.json 生成Config文件,开始配置待部署的app。

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


              
             
              “托管”
              
             
              
             
              “公共”
              
             
              “www”
              
             
              “忽略”
              
             
              (
             
              “firebase.json”
              
             
              “* * / *”。
              
             
              “* * / node_modules / * *”
             
              
              
             
              “重写”
              
             
              (
             
              
             
              “源”
              
             
              “* *”
              
             
              “目的地”
              
             
              “/ index . html”
             
              
             
              
              
             
              “头”
              
             
              (
             
              
             
              “源”
              
             
              “/构建/ app / * *”
              
             
              “头”
              
             
              (
             
              
             
              “关键”
              
             
              “cache - control”
              
             
              “价值”
              
             
              “公共信息= 31536000”
             
              
             
              
             
              
              
             
              
             
              “源”
              
             
              “ngsw-worker.js”
              
             
              “头”
              
             
              (
             
              
             
              “关键”
              
             
              “cache - control”
              
             
              “价值”
              
             
              “no - cache”
             
              
             
              
             
              
             
              
             
              
             
              
复制 复制

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

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


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

最后,运行以下命令部署应用程序:


              
             重火力点部署

完成后,该应用程序将上线。

Baidu