Ionic4アプリをPWA(Progressive Web Apps)化してNetlifyにデプロイ

Ionic4アプリをPWA化して、『ホーム画面に追加』できるようにしたい。

Firebase Hostingでのやり方については、以下をご覧ください。
Ionic公式サイト通りにやっています。)

http://i-doctor.sakura.ne.jp/web/doku.php?id=00.ionic4:09.ionic4%E3%81%A7pwa
image

(開発環境)

今回構築した環境

(1)Ionic4アプリの作成

C:/ionic/ フォルダを、VisualStudioCodeで開き、Ctrl+@でコマンドプロンプトを開き、以下を入力します。

何か聞かれたら、n + Enter と入力します。

(2)Ionic4アプリのPWA化とNetlifyにデプロイのための準備

最後の一行を入れないと、Netlifyにデプロイするときに、『ionic コマンドなんて知らないよ!』と言われてデプロイに失敗します。この最後の一行がNelifyにデプロイするときのポイントです。

(3)GitHubにpush(アップロード)

GitHubにログインして、新規レポジトリの作成から、『ionic4-pwa6』という名前で作成します。

git init

git add .

git commit -m “first commit”

git remote add origin https://github.com/adash333/ionic4-pwa6.git
git push -u origin master

(4)GitHub経由でNetlifyにデプロイ

Netlifyにログインして、New site from Git をクリック

image

GitHub をクリックしてGitHubアカウント認証

image

Create a new site の画面になるので、先ほどの ionic4-pwa6 をクリック

image

以下のように、ionic build –prod と、www と入力してから、Deploy site をクリック

image

数分待つと、無事、デプロイが完了し、リンク先をクリックすると、見られるようになります。

Androidスマホでサイトを見ると、『ホーム画面に追加』画面が表示されて、ホーム画面にアプリとして追加することができます。

image

(5)ソースコード

Netlify用ソースコード
https://github.com/adash333/ionic4-pwa6

DEMO
https://loving-wright-2a163f.netlify.com

参考:https://www.youtube.com/watch?v=n_cYHVAFROA
Hosting an Ionic Application with Continuous Integration on Netlify
Joshua Morony
2019/01/20 に公開

関連記事
Count per Day
    Popular Posts
    スポンサーリンク

    シェアする

    • このエントリーをはてなブックマークに追加

    フォローする