====== Angular7でPWAをNetlifyにデプロイ ======

2019年2月現在、<wrap hi>[[00.ionic4:09.ionic4でpwa|Ionic4でPWA(Progressive Web Apps)]]</wrap>にて、Ionic4でFirebase HostingにPWAをデプロイすることはできたのですが、私の技術では、Netlifyにデプロイしても、PWAを機能させることができません。

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

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

https://swfz.hatenablog.com/entry/2018/08/15/080034
{{:z_blog:2019:pasted:20190220-083620.png}}

===== 開発環境 =====
WindowsでのAngular7(Ionic4)環境構築方法については、<wrap hi>[[00.ionic4:01.windowsでionicを始める方法#オプション：nvm-windowsでNode.jsのバージョン管理|WindowsでIonicを始める方法]]</wrap>をご覧ください。
<code>
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
</code>

今回構築した環境
<code>
@angular/pwa 0.13.1
</code>

===== すること =====
  -Angular7アプリをPWA化
  -Netlifyにデプロイ
  -Androidスマホにインストール

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

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

===== 新規Angular7アプリの作成 =====
  -VisualStudioCodeでWindowsのC:/js/フォルダを開く
  -Ctrl+@でターミナル画面を開いて、以下を入力します
<code>
ng new angular7-pwa --style=scss --routing
</code>
5分くらいかかった気がします。
{{:z_blog:2019:pasted:20190220-094235.png}}
{{:z_blog:2019:pasted:20190220-095132.png}}
{{:z_blog:2019:pasted:20190220-095151.png}}

<code>
cd angular7-pwa
ng serve
</code>
{{:z_blog:2019:pasted:20190220-100220.png}}

Chromeで、http://localhost:4200/　を開くと、以下のようになります。
{{:z_blog:2019:pasted:20190220-100407.png}}

===== PWA化 =====
以下を入力します。
<code>
ng add @angular/pwa
</code>
{{:z_blog:2019:pasted:20190221-194437.png}}

src/ngsw-config.json
src/manifest.json
の2つのファイルが作成されています。
{{:z_blog:2019:pasted:20190221-194901.png}}
{{:z_blog:2019:pasted:20190221-194912.png}}

===== ビルド =====
productionモードでbuildします。Angularの場合、今回は、dist/angular7-pwa/ フォルダに作成されます。以下を入力します。
<code>
ng build --aot --prod
</code>
{{:z_blog:2019:pasted:20190221-195423.png}}

===== GitHubにpush(アップロード) =====
Netlifyにデプロイするために、GitHubにpushします。

  -https://github.com/ にログインして、"angular7-pwa"という名前で新規レポジトリを作成
  -ローカルパソコンのVisualStudioCodeのターミナル画面で以下を入力。

<code>
git add .
git commit -m "first commit"
git remote add origin https://github.com/adash333/angular7-pwa.git
git push -u origin master
</code>
{{:z_blog:2019:pasted:20190221-195750.png}}
{{:z_blog:2019:pasted:20190221-195820.png}}
{{:z_blog:2019:pasted:20190221-195910.png}}

{{:z_blog:2019:pasted:20190221-200137.png}}
{{:z_blog:2019:pasted:20190221-200154.png}}

===== Netlifyにデプロイ =====
  -https://www.netlify.com/ にログイン
  -New Site from Gitをクリック
  -GitHubをクリックして、認証を確認
  -先ほどの"angular7-pwa.git"を選んでクリック
{{:z_blog:2019:pasted:20190221-200314.png}}
{{:z_blog:2019:pasted:20190221-200339.png}}
{{:z_blog:2019:pasted:20190221-200401.png}}
{{:z_blog:2019:pasted:20190221-200501.png}}
  *以下のように入力して、Deploy site をクリック。しばらく待ちます。
{{:z_blog:2019:pasted:20190221-200627.png}}
  *デプロイが終了したら、リンクをクリック
{{:z_blog:2019:pasted:20190221-201235.png}}
https://vigorous-spence-33c567.netlify.com/
  *PWA化されているようです
{{:z_blog:2019:pasted:20190221-201355.png}}
  *自分のAndroidスマホでサイトにアクセスして、ホーム画面に追加できるか試してみます。
{{:z_blog:2019:pasted:20190221-201933.png}}
  *PWAとしてホーム画面に追加に追加することができ、その後、オフラインにしても、起動しました。
{{:z_blog:2019:pasted:20190221-202022.png}}

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













===== 見出し =====