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

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

現在位置: index.html » 00.ionic4 » 09.ionic4でpwa

トレース:

00.ionic4:09.ionic4でpwa

差分

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

この比較画面へのリンク

--- 00.ionic4:09.ionic4でpwa [2019/02/23] – [Netlifyにデプロイにトライ] adash333
+++ 00.ionic4:09.ionic4でpwa [2019/08/28] (現在) – [メモ] adash333
@@ 行 10: / 行 10: @@
 という流れが必要でしたが、PWAであれば、
   -WEBサイトをIonicで作ってPWA化して公開
-  -ユーザはWEBサイトへ2回閲覧すれば、『ホーム画面に追加する』(A2HS: Add to HomeScreen)画面が表示されて、追加する
+  -ユーザはWEBサイトを閲覧すれば、『ホーム画面に追加する』(A2HS: Add to HomeScreen)画面が表示されて、追加する
   -以降、オフラインで、まるでスマホアプリのようにWEBサイトを利用できる
 といったことが可能になります。もちろん、『プッシュ通知』なども備えることができるそうです。（個人的にプッシュ通知は嫌いですが。）
@@ 行 32: / 行 32: @@
   -Ionic4のtabsデフォルトアプリをPWA化する
   -Tab1に、Add to HomeScreen(A2HP)ボタンを実装する
-  -Netlifyにデプロイして、Androidスマホでホーム画面にアプリを追加し、オフラインで起動してみる
+  -Firebase Hostingにデプロイして、Androidスマホでホーム画面にアプリを追加し、オフラインで起動してみる
+  -同じアプリを、Netlifyにデプロイしてみる。Androidスマホでホーム画面にアプリを追加し、オフラインで起動してみる
 今回は、http://www.jomendez.com/2018/06/05/add-home-screen-pwas/をIonic4で写経してみます。
@@ 行 233: / 行 235: @@
     <ion-button
       expand="full"
-      (click)="add_to_home(event)"
+      (click)="add_to_home()"
       *ngIf="showBtn">
         Install
@@ 行 278: / 行 280: @@
   }
-  add_to_home(e){
+  add_to_home(){
     debugger
     // hide our user interface that shows our button
@@ 行 306: / 行 308: @@
-同じものをNetlifyにデプロイしようとしましたが、私の技術ではPWAにできませんでした。
+同じものをNetlifyにデプロイしようとすると、以下のような手順となります。
-https://jovial-varahamihira-a83853.netlify.com
 ===== Netlifyにデプロイにトライ =====
 ググったところ、さすがJosh様、、、
@@ 行 316: / 行 315: @@
 </html>
-最初からコードを書くと、以下のようになるか。
+ポイントは、GitHubにpushする前に、ローカルパソコンで、以下のコマンドを入力しておくことです。
+（Ionic3のときはNetlifyの方で、npm run build --prod とすればよかったのですが、今回は、そのコマンドだと、私の場合はPWA化されませんでした。）
+<code>
+npm install --save-dev ionic
+</code>
+最初からコードを書くと、以下のようになります。
 <code>
@@ 行 330: / 行 335: @@
 www
 </code>
+うまくいったようです。PWAとしてスマホでも『ホーム画面に追加』ができそうです。
+{{:00.ionic4:pasted:20190223-080433.png}}
+Netlify用ソースコード
+https://github.com/adash333/ionic4-pwa6
+DEMO
+https://loving-wright-2a163f.netlify.com

00.ionic4/09.ionic4でpwa.1550908667.txt.gz · 最終更新: 2019/02/23 by adash333