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

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

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

Angularプロジェクトを作成

プロジェクトを作成

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

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

PWA対応

リファレンスを参考に、以下のコマンドを実行します。

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のテンプレートがあるので、それを参考に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へプッシュするとパイプラインが動き始めます

GitLab Pagesを確認

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

※実際にアクセスできるようになるまで、少し時間がかかるため待ちます
（5分で公開できなくてすみません。。。）

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

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

Androidスマホだとホーム画面に追加する旨を確認するバーが画面下部に表示されます

Lighthouseで確認

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

　　　　　　　　　　　　　　　　　　　　↓

最後に

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

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

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