差分

このページの2つのバージョン間の差分を表示します。

--- z_blog:2019:190220_angular7でpwa [2019/02/20] – [Angular7でPWAをNetlifyにデプロイ] adash333
+++ z_blog:2019:190220_angular7でpwa [2019/02/21] (現在) – [Netlifyにデプロイ] adash333
@@ 行 27: / 行 27: @@
 @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>
+分くらいかかった気がします。
+{{: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