将已经转化为PWA的Angular项目在GitLab Pages上发布，只需5分钟

1 年 ago

韵, 科

2 minutes

PWA是一种功能，可将Web应用程序安装到手机设备上，就像安装原生应用程序一样。（无需经过应用商店，可以从浏览器上进行安装）

实际上与原生应用有很多不同之处，但它具有足够的功能，例如可以设置应用图标和启动画面，支持推送通知等，作为一个简单的应用程序来说已经十分满足需求了。

因为对应自身很容易，所以我打算写关于如何将Angular项目变成PWA并通过GitLab Pages进行公开的方法。

创建一个Angular项目

创建项目

我将创建一个Angular项目模板。

ng new angular-pwa --routing --style=scss

渐进式网络应用程序的支持

参考资料中给出的，执行以下命令。

ng add @angular/pwa --project angular-pwa

以下的文件将被添加/更新

CREATE ngsw-config.json (620 bytes)
CREATE src/manifest.webmanifest (1079 bytes)
CREATE src/assets/icons/icon-128x128.png (1253 bytes)
CREATE src/assets/icons/icon-144x144.png (1394 bytes)
CREATE src/assets/icons/icon-152x152.png (1427 bytes)
CREATE src/assets/icons/icon-192x192.png (1790 bytes)
CREATE src/assets/icons/icon-384x384.png (3557 bytes)
CREATE src/assets/icons/icon-512x512.png (5008 bytes)
CREATE src/assets/icons/icon-72x72.png (792 bytes)
CREATE src/assets/icons/icon-96x96.png (958 bytes)
UPDATE angular.json (3894 bytes)
UPDATE package.json (1372 bytes)
UPDATE src/app/app.module.ts (604 bytes)
UPDATE src/index.html (478 bytes)

为了进行GitLab Pages的部署所需的修改

由於GitLab Pages是作為{帳戶名}.gitlab.io的子目錄進行公開，所以需要進行一些修改。

修改Angular的构建设置

设置baseHref和deployUrl。

{
  "projects": {
    "angular-pwa": {
      "architect": {
        "build": {
          "options": {
            "baseHref": "/angular-pwa/",
            "deployUrl": "/angular-pwa/",
       ・・・

修改PWA清单文件。

请在start_url中设置安装后的首页URL。
如果不设置这个，即使启动了已安装的应用程序，也不会显示页面。

{
  "start_url": "/angular-pwa/",
  ・・・

在package.json中添加生产环境构建脚本

"scripts": {
    ・・・
    "build:prod": "ng build --prod",
    ・・・
}

添加 .gitlab-ci.yml

为了自动部署到GitLab Pages，我们将创建CI配置文件。
由于有一个空白HTML模板，我们将参考它创建.gitlab-ci.yml文件，以适用于Angular。

image: node:latest

pages:
  stage: deploy
  script:
  - npm install
  - npm run build --prod
  - mkdir public
  - mv dist/angular-pwa/* public
  artifacts:
    paths:
    - public
  only:
  - master