目次

Angular7でPWAをNetlifyにデプロイ

2019年2月現在、Ionic4でPWA(Progressive Web Apps)にて、Ionic4でFirebase HostingにPWAをデプロイすることはできたのですが、私の技術では、Netlifyにデプロイしても、PWAを機能させることができません。

まずは、Angular7でNetlifyにPWAをデプロイしてみたいと思います。

以下のサイトをAngular7で写経してみたい。

https://swfz.hatenablog.com/entry/2018/08/15/080034

開発環境

WindowsでのAngular7(Ionic4)環境構築方法については、WindowsでIonicを始める方法をご覧ください。

Panasonic CF-RZ6
Windows10 Pro (1803)
VisualStudioCode
git version 2.20.1.windows.1

Node v10.15.1
npm 6.4.1
@angular/cli 7.3.1

今回構築した環境

@angular/pwa 0.13.1

すること

  1. Angular7アプリをPWA化
  2. Netlifyにデプロイ
  3. Androidスマホにインストール

ソースコード
https://github.com/adash333/angular7-pwa

DEMO
https://vigorous-spence-33c567.netlify.com/

新規Angular7アプリの作成

  1. VisualStudioCodeでWindowsのC:/js/フォルダを開く
  2. Ctrl+@でターミナル画面を開いて、以下を入力します
ng new angular7-pwa --style=scss --routing

5分くらいかかった気がします。


cd angular7-pwa
ng serve

Chromeで、http://localhost:4200/ を開くと、以下のようになります。

PWA化

以下を入力します。

ng add @angular/pwa

src/ngsw-config.json
src/manifest.json
の2つのファイルが作成されています。

ビルド

productionモードでbuildします。Angularの場合、今回は、dist/angular7-pwa/ フォルダに作成されます。以下を入力します。

ng build --aot --prod

GitHubにpush(アップロード)

Netlifyにデプロイするために、GitHubにpushします。

  1. https://github.com/ にログインして、“angular7-pwa”という名前で新規レポジトリを作成
  2. ローカルパソコンのVisualStudioCodeのターミナル画面で以下を入力。
git add .
git commit -m "first commit"
git remote add origin https://github.com/adash333/angular7-pwa.git
git push -u origin master




Netlifyにデプロイ

  1. https://www.netlify.com/ にログイン
  2. New Site from Gitをクリック
  3. GitHubをクリックして、認証を確認
  4. 先ほどの“angular7-pwa.git”を選んでクリック





https://vigorous-spence-33c567.netlify.com/

Ionic4でも同じ方法でNetlifyにPWAとしてデプロイしたい、、、

ソースコード

https://github.com/adash333/angular7-pwa

DEMO
https://vigorous-spence-33c567.netlify.com/

AngularとPWAのリンク

https://www.smashingmagazine.com/2018/09/pwa-angular-6/
september 20, 2018 20 comments
Building A PWA Using Angular 6

見出し