z_blog:2019:190220_angular7でpwa
差分
このページの2つのバージョン間の差分を表示します。
次のリビジョン | 前のリビジョン | ||
z_blog:2019:190220_angular7でpwa [2019/02/20] – 作成 adash333 | z_blog:2019:190220_angular7でpwa [2019/02/21] (現在) – [Netlifyにデプロイ] adash333 | ||
---|---|---|---|
行 9: | 行 9: | ||
https:// | https:// | ||
{{: | {{: | ||
+ | |||
+ | ===== 開発環境 ===== | ||
+ | WindowsでのAngular7(Ionic4)環境構築方法については、< | ||
+ | < | ||
+ | Panasonic CF-RZ6 | ||
+ | Windows10 Pro (1803) | ||
+ | VisualStudioCode | ||
+ | git version 2.20.1.windows.1 | ||
+ | |||
+ | Node v10.15.1 | ||
+ | npm 6.4.1 | ||
+ | @angular/ | ||
+ | </ | ||
+ | |||
+ | 今回構築した環境 | ||
+ | < | ||
+ | @angular/ | ||
+ | </ | ||
+ | |||
+ | ===== すること ===== | ||
+ | -Angular7アプリをPWA化 | ||
+ | -Netlifyにデプロイ | ||
+ | -Androidスマホにインストール | ||
+ | |||
+ | ソースコード | ||
+ | https:// | ||
+ | |||
+ | DEMO | ||
+ | https:// | ||
+ | |||
+ | ===== 新規Angular7アプリの作成 ===== | ||
+ | -VisualStudioCodeでWindowsのC:/ | ||
+ | -Ctrl+@でターミナル画面を開いて、以下を入力します | ||
+ | < | ||
+ | ng new angular7-pwa --style=scss --routing | ||
+ | </ | ||
+ | 5分くらいかかった気がします。 | ||
+ | {{: | ||
+ | {{: | ||
+ | {{: | ||
+ | |||
+ | < | ||
+ | cd angular7-pwa | ||
+ | ng serve | ||
+ | </ | ||
+ | {{: | ||
+ | |||
+ | Chromeで、http:// | ||
+ | {{: | ||
+ | |||
+ | ===== PWA化 ===== | ||
+ | 以下を入力します。 | ||
+ | < | ||
+ | ng add @angular/ | ||
+ | </ | ||
+ | {{: | ||
+ | |||
+ | src/ | ||
+ | src/ | ||
+ | の2つのファイルが作成されています。 | ||
+ | {{: | ||
+ | {{: | ||
+ | |||
+ | ===== ビルド ===== | ||
+ | productionモードでbuildします。Angularの場合、今回は、dist/ | ||
+ | < | ||
+ | ng build --aot --prod | ||
+ | </ | ||
+ | {{: | ||
+ | |||
+ | ===== GitHubにpush(アップロード) ===== | ||
+ | Netlifyにデプロイするために、GitHubにpushします。 | ||
+ | |||
+ | -https:// | ||
+ | -ローカルパソコンのVisualStudioCodeのターミナル画面で以下を入力。 | ||
+ | |||
+ | < | ||
+ | git add . | ||
+ | git commit -m "first commit" | ||
+ | git remote add origin https:// | ||
+ | git push -u origin master | ||
+ | </ | ||
+ | {{: | ||
+ | {{: | ||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | {{: | ||
+ | |||
+ | ===== Netlifyにデプロイ ===== | ||
+ | -https:// | ||
+ | -New Site from Gitをクリック | ||
+ | -GitHubをクリックして、認証を確認 | ||
+ | -先ほどの" | ||
+ | {{: | ||
+ | {{: | ||
+ | {{: | ||
+ | {{: | ||
+ | *以下のように入力して、Deploy site をクリック。しばらく待ちます。 | ||
+ | {{: | ||
+ | *デプロイが終了したら、リンクをクリック | ||
+ | {{: | ||
+ | https:// | ||
+ | *PWA化されているようです | ||
+ | {{: | ||
+ | *自分のAndroidスマホでサイトにアクセスして、ホーム画面に追加できるか試してみます。 | ||
+ | {{: | ||
+ | *PWAとしてホーム画面に追加に追加することができ、その後、オフラインにしても、起動しました。 | ||
+ | {{: | ||
+ | |||
+ | Ionic4でも同じ方法でNetlifyにPWAとしてデプロイしたい、、、 | ||
+ | |||
+ | ===== ソースコード ===== | ||
+ | https:// | ||
+ | |||
+ | DEMO | ||
+ | https:// | ||
+ | |||
+ | ===== AngularとPWAのリンク ===== | ||
+ | |||
+ | |||
+ | https:// | ||
+ | september 20, 2018 20 comments | ||
+ | Building A PWA Using Angular 6 | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
===== 見出し ===== | ===== 見出し ===== | ||
z_blog/2019/190220_angular7でpwa.1550652826.txt.gz · 最終更新: 2019/02/20 by adash333