差分

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

--- 00.ionic4:09.ionic4でpwa [2019/02/23] – [ソースコード] 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様、、、
@@ 行 315: / 行 314: @@
 <iframe width="560" height="315" src="https://www.youtube.com/embed/n_cYHVAFROA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </html>
+ポイントは、GitHubにpushする前に、ローカルパソコンで、以下のコマンドを入力しておくことです。
+（Ionic3のときはNetlifyの方で、npm run build --prod とすればよかったのですが、今回は、そのコマンドだと、私の場合はPWA化されませんでした。）
 <code>
 npm install --save-dev ionic
 </code>
+最初からコードを書くと、以下のようになります。
+<code>
+ionic start ionic4-pwa6 sidemenu --type=angular
+cd ionic4-pwa6
+ng add @angular/pwa
+npm install --save-dev ionic
+</code>
+{{:00.ionic4:pasted:20190223-075743.png}}
+から、GitHubにpushして、Netlifyにデプロイ。Netlifyでのコマンドは
+<code>
+ionic build --prod
+www
+</code>
+うまくいったようです。PWAとしてスマホでも『ホーム画面に追加』ができそうです。
+{{:00.ionic4:pasted:20190223-080433.png}}
+Netlify用ソースコード
+https://github.com/adash333/ionic4-pwa6
+DEMO
+https://loving-wright-2a163f.netlify.com
 ===== サイト内PWAリンク =====