Angualr 的渐进网络应用程序
创建你的 Angular 渐进式应用
PWA的两项主要要求是： Service Worker 和 网页Manifest。 虽然可以手动将这两者添加到应用程序中， Angular 团队有一个
@angular/pwa 软件包，可以用于实现自动化。
@angular/pwa 软件包将自动添加一个 service worker 和一个应用 Minifest 到应用程序。 要将此软件包添加到应用程序，请执行：
$ ng add @angular/pwa一旦此软件包被添加，运行
ionic build--prod and
www 目录将准备好部署为 PWA。
默认情况下，
@angular/pwa包带有Augular标识的应用图标。 请务必更新 ` manifest以使用正确的应用名称，并替换图标。
注意：像 Service Workers 和许多 JavaScript API（如地理定位）这样的功能需要应用程序在安全环境中托管。 当通过托管服务部署应用时，需要使用 HTTPS 来使用 Service Workers。
Service Worker 配置
在 @angular/pwa` 被添加之后，一个新的 `ngsw-config.json` 文件将在项目的根目录创建。 此文件负责配置Angular的服务工人机制如何处理缓存资源。 默认情况下，将提供以下内容：
>
>
{
"$schema": "./node_modules/@angular/service-worker/config/schema.json",
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/*.css",
"/*.js"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**",
"/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
]
}
}
]
}
这里有两个部分，一个是应用特定资源 (JS, CSS, HTML) 和应用程序需要时加载的资源。 Depending on your app, these options can be customized. 更详细的指南，请阅读 来自Augular的官方指南
应用部署
Firebase
Firebase主机为渐进网络应用提供了许多好处，包括由于CDN提供了快速响应时间， HTTPS 默认启用，并支持 HTTP2 推送。
首先，在 Firebase中创建项目。
接下来，在指令终端中安装FirebaseCLI：
$ npm install -g firebase-tools
安装Firebase CLI后, 在你的Ionic目录下执行 firebase init 。 指令终端会提示：
"Which Firebase CLI features do you want to set up for this folder?" 选择 "Hosting: Configure and deploy Firebase Hosting sites."
"Select a default Firebase project for this directory:" 选择你在 Firebase 创建的网页.
"What do you want to use as your public directory?" 输入 "www".
注意：解答以下两个问题将确保应用的路由、重新加载和深入连接：
Configure as a single-page app (rewrite all urls to /index.html)?" 输入 "Yes".
"File www/index.html already exists. Overwrite?" 输入 "No".
生成了一个 firebase.json 配置文件，配置应用程序进行部署。
最后需要做的事情是确保缓存标题设置正确。 请将 headers 片段添加到 firebase.json 文件。 完整的 firebase.json 如下：
{
"hosting": {
"public": "www",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [
{
"source": "/build/app/**",
"headers": [
{
"key": "Cache-Control",
"value": "public, max-age=31536000"
}
]
},
{
"source": "ngsw-worker.js",
"headers": [
{
"key": "Cache-Control",
"value": "no-cache"
}
]
}
]
}
}
关于 firebase.json 特性的更多信息，请参阅 Firebase文档。
接下来，执行下列指令来打包你的应用程序：
$ ionic build --prod
最后, 执行下列指令来部署应用程序:
$ firebase deploy
完成后，应用程序将生效。
