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
あなたの回答
tips
プレビュー