質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.47%
Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

PWA(Progressive Web Apps)

PWA(Progressive Web Apps)は、アプリのようなWebサイトを指します。仕様が異なる様々なデバイスで表示でき、インストールも不要。さらに訪問し続けることでユーザーについて学び、強力なPWAとなります。

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

Android

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

Q&A

0回答

1202閲覧

PWAで現在のウィンドウを上書きさせずに、新規ウインドウを開かせる方法を知りたい

k.t.est

総合スコア49

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

PWA(Progressive Web Apps)

PWA(Progressive Web Apps)は、アプリのようなWebサイトを指します。仕様が異なる様々なデバイスで表示でき、インストールも不要。さらに訪問し続けることでユーザーについて学び、強力なPWAとなります。

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

Android

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

0グッド

0クリップ

投稿2020/06/24 02:05

androidで、PWA化したサイトをインストール & 通知を許可にした状態で、受けたプッシュ通知をタップすると指定サイトが開かれていない場合は新規ウィンドウを立ち上げるようにService Worker上に記載しています。
PCだとPWAのアプリを立ち上げていても、指定サイトが開いていない場合は問題なく新規ウィンドウがアプリで立ち上がるのですが、androidの場合は当該PWAのアプリを立ち上げていると現在のアプリウィンドウが上書きされて、新規のウィンドウが立ち上げられてしまい現在のウィンドウを保持できない状態です。
現在のウィンドウと新規ウィンドウを並存させたいのですが、どのようにすればよいでしょうか?
それともアプリ扱いなので、2つ以上は立ち上げられない仕様なのでしょうか?

(ちなみに当該アプリを立ち上げて、このアプリ上でwindow.openすると上記のような現在ウィンドウの上書きではなく、アプリ前面にもう一画面追加されているような挙動で、元のページはwindow.openした新規ページを閉じないと表示されないようになっています。)

ご教示頂ければ幸いです。

##前提条件

  • android (動作確認しているOSはandroid7.0です)
  • PWAのアプリを開いている状態

##コード

manifest

1//manifest.json 2//ホーム画面への追加を実装するために、displayはbrowser以外を指定 3{ 4 "name":"hoge", 5 "short_name":"hoge", 6 "icons": [{ 7 "src": "/image/hoge.png", 8 "sizes":"192x192", 9 "type": "image/png" 10 },{ 11 "src": "/image/hoge.png", 12 "sizes":"512x512", 13 "type": "image/png" 14 }], 15 "start_url": "/?v=hs", 16 "display": "standalone", 17 "background_color": "#FFFFFF", 18 "theme_color": "#FFFFFF", 19 "gcm_sender_id": "hogehoge" 20}

js

1//service worker(Firebase Cloud Messaging対応) 2 3// 表示したNotificationがclickしたら呼ばれる 4self.addEventListener('notificationclick', function (event) { 5 event.notification.close(); 6 // ページを表示する 7 focusWindow(); 8}); 9 10function focusWindow(event) { 11 const myPage = self.location.origin; 12 const urlToOpen = new URL('/hoge.php', self.location.origin).href; 13 const promiseChain = clients.matchAll({ 14 type: 'window', 15 includeUncontrolled: true 16 }) 17 .then((windowClients) => { 18 let matchingClient = null; 19 // ブラウザのタブ、windowを検索 20 for (let i = 0; i < windowClients.length; i++) { 21 const windowClient = windowClients[i]; 22 // フォアグラウンド時 23 // 開いているページなのでそのまま 24 if (windowClient.url.indexOf("hoge.php") !== -1) { 25 matchingClient = windowClient; 26 break; 27 } 28 } 29 // バックグラウンド時 30 // 該当のページに遷移する 31 if (matchingClient) { 32 return matchingClient.focus(); 33 } else { 34 // クローズ時 35 // ページを新規に開く 36 return clients.openWindow(urlToOpen).then( 37 (windowClient) =>{ 38 if(windowClient){ 39 windowClient.focus(); 40 } 41 } 42 ); 43 } 44 }); 45 event.waitUntil(promiseChain); 46} 47 48// クローズ時 49// ページを新規に開く 50function openWindow(event) { 51 const myPage = self.location.origin; 52 const promiseChain = clients.openWindow(myPage); 53 event.waitUntil(promiseChain); 54} 55

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問