PWA化したAngularプロジェクトをGitLab Pagesに５分で公開する

PWAとはWebアプリをスマホのネイティブアプリのように端末にインストールすることができる機能です。
（ストアを介さず、ブラウザ上からインストールできます）

実際のネイティブアプリと異なる点は多いですが、アプリアイコンやスプラッシュスクリーンを設定出来たり、プッシュ通知にも対応する等、単純なアプリとしては十分な機能を備えています。

対応自体は簡単に出来るので、今回はAngularプロジェクトのPWA化と、そのプロジェクトをGitLab Pagesを使って公開する方法を書いてみようと思います。

# Angularプロジェクトを作成

## プロジェクトを作成

Angularプロジェクトのテンプレートを作成します。

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

## PWA対応

[リファレンス](https://angular.jp/guide/service-worker-getting-started)を参考に、以下のコマンドを実行します。

```
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`を設定します。

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

### PWAマニフェストを修正

`start_url`にインストール後TOPページとなるURLを設定します。
ここを設定しないと、インストールしたアプリを起動しても画面が表示されません。。

```src/manifest.webmanifest
{
  "start_url": "/angular-pwa/",
  ・・・
```

## package.jsonに本番ビルドスクリプトを追加

```package.json
"scripts": {
    ・・・
    "build:prod": "ng build --prod",
    ・・・
}
```

## .gitlab-ci.ymlを追加

GitLab Pagesへ自動でデプロイするため、CI設定ファイルを作成します。
[プレーンHTMLのテンプレート](https://gitlab.com/pages/plain-html/blob/master/.gitlab-ci.yml)があるので、それを参考にAngular向けに`.gitlab-ci.yml`を作成します。

```.gitlab-ci.yml
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
```

### ポイント
- npm コマンドを動かすため、イメージを`node:latest`
- GitLab Pagesへデプロイするため、本番ビルドしたものをpublicディレクトリに移動

# GitLabへプッシュ

angular-pwaというプロジェクトを作成し、そこにプッシュします
https://gitlab.com/teracy55/angular-pwa

masterへプッシュするとパイプラインが動き始めます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/38a81ee0-657b-eb86-f47c-0a221f6722ae.png)


## GitLab Pagesを確認

パイプラインが終了し、正常にPagesへデプロイできている場合、「settings -> Pages」でURLを確認することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/9b545a53-6c1f-6f1a-ab3b-c0699be2faa4.png)
※実際にアクセスできるようになるまで、少し時間がかかるため待ちます
（5分で公開できなくてすみません。。。）

# PWA対応できているか確認する

PWA対応ができていると、アドレスバーに⊕マークが表示され、PCの場合はデスクトップ上にインストールできるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/0752a15e-88f0-9d90-ea11-8498ae38dbf2.png)


Androidスマホだとホーム画面に追加する旨を確認するバーが画面下部に表示されます
![Screenshot_20191109-112142.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/21f00b49-f8cf-b72c-5c48-19f38b3433a9.jpeg)



## Lighthouseで確認

Chromeの拡張機能である`Lighthouse`を使うと、対象のページがPWA対応できているか確認することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/02005ea0-6a99-6abb-c8b9-413d2c322864.png)

　　　　　　　　　　　　　　　　　　　　↓

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/c568d1ab-94b5-5b4e-6e97-c2dd25538714.png)


# 最後に

PWA対応したAngularプロジェクトを簡単に公開することができました。
スマホアプリ開発の知識がなくてもスマホ向けのアプリが作れてしまうので、かなり便利です。

Webアプリをスマホ対応したいといった場合に、アプリを作る前にPWA対応で十分でないか検討するのもありかと思います。