サルでもわかるWEBプログラミング

フリーソフトのみでホームページ作成

現在位置: index.html » z_blog » 2019 » 190220_angular7でpwa

トレース:

z_blog:2019:190220_angular7でpwa

差分

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

この比較画面へのリンク

--- z_blog:2019:190220_angular7でpwa [2019/02/21] – [新規Angular7アプリの作成] 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アプリの作成 =====
@@ 行 68: / 行 79: @@
 {{: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のリンク =====

z_blog/2019/190220_angular7でpwa.1550778886.txt.gz · 最終更新: 2019/02/21 by adash333