00.ionic4:09.ionic4でpwa
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン最新のリビジョン両方とも次のリビジョン | ||
00.ionic4:09.ionic4でpwa [2019/02/16] – [ソースコード] adash333 | 00.ionic4:09.ionic4でpwa [2019/03/01] – [すること] adash333 | ||
---|---|---|---|
行 10: | 行 10: | ||
という流れが必要でしたが、PWAであれば、 | という流れが必要でしたが、PWAであれば、 | ||
-WEBサイトをIonicで作ってPWA化して公開 | -WEBサイトをIonicで作ってPWA化して公開 | ||
- | -ユーザはWEBサイトへ2回閲覧すれば、『ホーム画面に追加する』(A2HS: | + | -ユーザはWEBサイトを閲覧すれば、『ホーム画面に追加する』(A2HS: |
-以降、オフラインで、まるでスマホアプリのようにWEBサイトを利用できる | -以降、オフラインで、まるでスマホアプリのようにWEBサイトを利用できる | ||
といったことが可能になります。もちろん、『プッシュ通知』なども備えることができるそうです。(個人的にプッシュ通知は嫌いですが。) | といったことが可能になります。もちろん、『プッシュ通知』なども備えることができるそうです。(個人的にプッシュ通知は嫌いですが。) | ||
今回は、http:// | 今回は、http:// | ||
+ | |||
+ | ===== PWAメニュー ===== | ||
+ | |||
+ | [[00.ionic4: | ||
+ | |||
+ | [[03.初めてのjavascriptでおみくじアプリ: | ||
+ | |||
+ | [[z_blog: | ||
+ | |||
+ | |||
+ | |||
+ | |||
行 20: | 行 32: | ||
-Ionic4のtabsデフォルトアプリをPWA化する | -Ionic4のtabsデフォルトアプリをPWA化する | ||
-Tab1に、Add to HomeScreen(A2HP)ボタンを実装する | -Tab1に、Add to HomeScreen(A2HP)ボタンを実装する | ||
- | -Netlifyにデプロイして、Androidスマホでホーム画面にアプリを追加し、オフラインで起動してみる | + | -Firebase Hostingにデプロイして、Androidスマホでホーム画面にアプリを追加し、オフラインで起動してみる |
+ | |||
+ | -同じアプリを、Netlifyにデプロイしてみる。Androidスマホでホーム画面にアプリを追加し、オフラインで起動してみる | ||
今回は、http:// | 今回は、http:// | ||
行 54: | 行 68: | ||
@angular/ | @angular/ | ||
firebase-tools@6.3.1 | firebase-tools@6.3.1 | ||
- | |||
- | |||
- | |||
</ | </ | ||
行 297: | 行 308: | ||
- | 同じものをNetlifyにデプロイしようとしたが、どうしても、PWAにできなかった。 | + | 同じものをNetlifyにデプロイしようとすると、以下のような手順となります。 |
- | https://jovial-varahamihira-a83853.netlify.com | + | ===== Netlifyにデプロイにトライ ===== |
+ | ググったところ、さすがJosh様、、、 | ||
+ | < | ||
+ | <iframe width=" | ||
+ | </ | ||
+ | |||
+ | ポイントは、GitHubにpushする前に、ローカルパソコンで、以下のコマンドを入力しておくことです。 | ||
+ | (Ionic3のときはNetlifyの方で、npm run build --prod とすればよかったのですが、今回は、そのコマンドだと、私の場合はPWA化されませんでした。) | ||
+ | < | ||
+ | npm install --save-dev ionic | ||
+ | </ | ||
+ | |||
+ | 最初からコードを書くと、以下のようになります。 | ||
+ | |||
+ | < | ||
+ | ionic start ionic4-pwa6 sidemenu --type=angular | ||
+ | cd ionic4-pwa6 | ||
+ | ng add @angular/ | ||
+ | npm install --save-dev ionic | ||
+ | </ | ||
+ | {{: | ||
+ | から、GitHubにpushして、Netlifyにデプロイ。Netlifyでのコマンドは | ||
+ | < | ||
+ | ionic build --prod | ||
+ | www | ||
+ | </ | ||
+ | うまくいったようです。PWAとしてスマホでも『ホーム画面に追加』ができそうです。 | ||
+ | {{: | ||
+ | |||
+ | Netlify用ソースコード | ||
+ | https://github.com/ | ||
+ | |||
+ | DEMO | ||
+ | https:// | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== サイト内PWAリンク ===== | ||
+ | |||
+ | | ||
+ | |||
+ | [[00.ionic4: | ||
+ | |||
+ | [[03.初めてのjavascriptでおみくじアプリ: | ||
+ | |||
+ | [[z_blog: | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
===== PWAについての参考リンク ===== | ===== PWAについての参考リンク ===== |
00.ionic4/09.ionic4でpwa.txt · 最終更新: 2019/08/28 by adash333