差分

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

--- 00.ionic4:09.ionic4でpwa [2019/02/16] – [メモ] 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サイトを利用できる
 といったことが可能になります。もちろん、『プッシュ通知』なども備えることができるそうです。（個人的にプッシュ通知は嫌いですが。）
@@ 行 16: / 行 16: @@
 今回は、http://www.jomendez.com/2018/06/05/add-home-screen-pwas/をIonic4で写経して、Add to HomeScreen(A2HP)ボタンを実装し、Firebase Hostingにデプロイするところまでやってみたいと思います。
+===== PWAメニュー =====
-===== すること =====
+[[00.ionic4:09.ionic4でpwa|Ionic4でPWA(Progressive Web Apps)]] ← このページ
-  -Ionic4のtabsデフォルトアプリをPWA化する
-  -Tab1に、Add to HomeScreen(A2HP)ボタンを実装する
-  -Netlifyにデプロイして、Androidスマホでホーム画面にアプリを追加し、オフラインで起動してみる
-今回は、http://www.jomendez.com/2018/06/05/add-home-screen-pwas/をIonic4で写経してみます。
+[[03.初めてのjavascriptでおみくじアプリ:おみくじアプリのpwa化|おみくじアプリのPWA化]]
+[[z_blog:2019:190220_angular7でpwa|Angular7でPWAをNetlifyにデプロイ]]
-https://ionicframework.com/docs/publishing/progressive-web-app
-作成中
+===== すること =====
+  -Ionic4のtabsデフォルトアプリをPWA化する
+  -Tab1に、Add to HomeScreen(A2HP)ボタンを実装する
+  -Firebase Hostingにデプロイして、Androidスマホでホーム画面にアプリを追加し、オフラインで起動してみる
-ソースコード
+  -同じアプリを、Netlifyにデプロイしてみる。Androidスマホでホーム画面にアプリを追加し、オフラインで起動してみる
+今回は、http://www.jomendez.com/2018/06/05/add-home-screen-pwas/をIonic4で写経してみます。
+https://ionicframework.com/docs/publishing/progressive-web-app　も参考にします。
+ソースコード
+https://github.com/adash333/ionic4-pwa2
 DEMO
@@ 行 60: / 行 68: @@
 @angular/pwa 0.13.1
 firebase-tools@6.3.1
 </code>
@@ 行 230: / 行 235: @@
     <ion-button
       expand="full"
-      (click)="add_to_home(event)"
+      (click)="add_to_home()"
       *ngIf="showBtn">
         Install
@@ 行 275: / 行 280: @@
   }
-  add_to_home(e){
+  add_to_home(){
     debugger
     // hide our user interface that shows our button
@@ 行 295: / 行 300: @@
 https://www.smashingmagazine.com/2018/09/pwa-angular-6/
+===== ソースコード =====
+https://github.com/adash333/ionic4-pwa2
+DEMO
+https://minutes-b77c0.firebaseapp.com/
+同じものをNetlifyにデプロイしようとすると、以下のような手順となります。
+===== Netlifyにデプロイにトライ =====
+ググったところ、さすがJosh様、、、
+<html>
+<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リンク =====
+ PWAメニュー
+[[00.ionic4:09.ionic4でpwa|Ionic4でPWA(Progressive Web Apps)]] ← このページ
+[[03.初めてのjavascriptでおみくじアプリ:おみくじアプリのpwa化|おみくじアプリのPWA化]]
+[[z_blog:2019:190220_angular7でpwa|Angular7でPWAをNetlifyにデプロイ]]