差分

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

--- 00.ionic4:10.ionic4とcapacitorでgps取得 [2019/08/28] – [サイトのPWA化] adash333
+++ 00.ionic4:10.ionic4とcapacitorでgps取得 [2019/09/01] (現在) – [tab1.page.tsの編集] adash333
@@ 行 1: / 行 1: @@
 ====== 10.ionic4とcapacitorでgps取得 ======
  ---//2019/08/28 更新//
+Vue.jsとOpenstreetMapを用いた方法を記載させて頂きました。
+→[[https://i-doctor.sakura.ne.jp/font/?p=40732|Vue.jsとleaflet.jsとOpenStreetMapで現在値を地図表示するPWAを作成してみる]]
 以下のサイトを写経してみたいと思います。
@@ 行 12: / 行 15: @@
 DEMOサイト
-https://happy-goldberg-809fba.netlify.com/
+https://suspicious-pare-d3ae32.netlify.com/
 ===== 開発環境 =====
@@ 行 61: / 行 64: @@
 src/app/tab1/tab1.page.html を以下のように編集します。
+<code html>
+<ion-card>
+  <ion-card-header>
+    <ion-card-title>Coordinates</ion-card-title>
+  </ion-card-header>
+  <ion-card-content>
+    <ion-item>Latitude: {{ latitude }}</ion-item>
+    <ion-item>Longitude: {{ longitude }}</ion-item>
+  </ion-card-content>
+</ion-card>
+</code>
 （変更前）
@@ 行 71: / 行 87: @@
 src/app/tab1/tab1.page.ts を以下のように編集します。
+<code javascript>
+import { Geolocation} from '@capacitor/core';
+//一部省略
+export class Tab1Page {
+  latitude: number;
+  longitude: number;
+  constructor() {
+    this.getLocation();
+  }
+  async getLocation() {
+    const position = await Geolocation.getCurrentPosition();
+    this.latitude = position.coords.latitude;
+    this.longitude = position.coords.longitude;
+  }
+}
+</code>
 （変更前）
@@ 行 155: / 行 192: @@
 許可　をクリックすると、ちゃんと緯度と経度が表示されました。これはすごく簡単！
-===== サイトのPWAにtryするもうまくいかず =====
+===== サイトのPWAにtry(新しくNetlifyのサイトを作成する必要あり) =====
 せっかくなので、オフラインでも動作してほしいと思うので、PWA化したいと思います。
@@ 行 221: / 行 258: @@
+ちなみに、開発サーバですと、以下の2つのコマンドで、pwa化できていました。
+<code>
+ionic build --prod
+npx node-static ./www --spa --port=9000
+</code>
+{{:00.ionic4:pasted:20190828-130712.png}}
+{{:00.ionic4:pasted:20190828-130851.png}}
+ということで、この www/ フォルダをZIPファイルにしてNetlifyにZIPファイルを投げ込んだら、PWAアプリになりました。なぜGitHubからのデプロイでうまくいかないのか、原因は分かりません。。。
+{{:00.ionic4:pasted:20190828-131649.png}}
+PWA化したDEMOサイト
+https://epic-edison-2e341f.netlify.com/tabs/tab1
+{{:00.ionic4:pasted:20190828-131810.png}}
+新しくNetlifyのサイトを作成したら、PWA化されていました。
+https://suspicious-pare-d3ae32.netlify.com/tabs/tab1
+===== (オプション)Add to HomeScreenボタンの追加 =====
+http://i-doctor.sakura.ne.jp/web/doku.php?id=00.ionic4:09.ionic4%E3%81%A7pwa#%E3%83%A1%E3%83%A2　を参考に、Add to HomeScreenボタンを追加します。
+[[https://gist.github.com/adash333/879641b7d021530c163cae4e3e9c502e|src/app/tab1/tab1.page.html]]
+<code>
+// 一部省略
+  <ion-button expand="full" (click)="add_to_home()" *ngIf="showBtn">
+    Install
+  </ion-button>
+</code>
+{{:00.ionic4:pasted:20190828-140934.png}}
+[[https://gist.github.com/adash333/879641b7d021530c163cae4e3e9c502e|src/app/tab1/tab1.page.ts]]
+<code>
+// 一部省略
+export class Tab1Page {
+  showBtn: boolean = false;
+  deferredPrompt;
+  constructor() {
+  }
+  ngOnInit(){
+    window.addEventListener('beforeinstallprompt', (e) => {
+      // Prevent Chrome 67 and earlier from automatically showing the prompt
+      e.preventDefault();
+      // Stash the event so it can be triggered later on the button event.
+      this.deferredPrompt = e;
+    // Update UI by showing a button to notify the user they can add to home screen
+      this.showBtn = true;
+    });
+    //button click event to show the promt
+    window.addEventListener('appinstalled', (event) => {
+     alert('installed');
+    });
+    if (window.matchMedia('(display-mode: standalone)').matches) {
+      alert('display-mode is standalone');
+    }
+  }
+  add_to_home(){
+    debugger
+    // hide our user interface that shows our button
+    // Show the prompt
+    this.deferredPrompt.prompt();
+    // Wait for the user to respond to the prompt
+    this.deferredPrompt.userChoice
+      .then((choiceResult) => {
+        if (choiceResult.outcome === 'accepted') {
+          alert('User accepted the prompt');
+        } else {
+          alert('User dismissed the prompt');
+        }
+        this.deferredPrompt = null;
+      });
+  };
+}
+</code>
+{{:00.ionic4:pasted:20190828-141129.png}}
+{{:00.ionic4:pasted:20190828-141146.png}}
+インストールボタンができました。
+{{:00.ionic4:pasted:20190828-145604.png}}
@@ 行 236: / 行 358: @@
 DEMOサイト
-https://happy-goldberg-809fba.netlify.com/
+https://suspicious-pare-d3ae32.netlify.com/
@@ 行 268: / 行 389: @@
 ===== リンク =====
+前：[[00.ionic4:09.ionic4でpwa|Ionic4でPWA(Progressive Web Apps)]]
+次：[[00.ionic4:11.IonicとLeafletで地図表示|00.ionic4:11.IonicとLeafletで地図表示]]
 [[00.ionic4:index.html|スマホ用ホームページ&amp;スマホアプリ作成ソフトIonic4]]