serviceworkerは `モバイル

Question

ベローにトリガされませんonupdatefound`私は私のserviceworkerを登録する方法である：

if ('serviceWorker' in navigator) { 
    window.addEventListener('load',() => { 
    function updateOnlineStatus() { 
     SnackBar.show({ 
     text: navigator.onLine ? onlineMsg : offlineMsg, 
     backgroundColor: '#000000', 
     actionText: close, 
     actionTextColor: '#d2de2f', 
     customClass: 'custom-snackbar', 
     }); 
    } 
    window.addEventListener('online', updateOnlineStatus); 
    window.addEventListener('offline', updateOnlineStatus); 
    navigator.serviceWorker.register('sw.js').then((reg) => { 
     reg.onupdatefound =() => { 
     const installingWorker = reg.installing; 
     installingWorker.onstatechange =() => { 
      switch (installingWorker.state) { 
      case 'installed': 
       if (navigator.serviceWorker.controller) { 
       SnackBar.show({ 
        text: refreshMsg, 
        backgroundColor: '#000000', 
        actionText: refresh, 
        actionTextColor: '#d2de2f', 
        onActionClick:() => { location.reload(); }, 
        customClass: 'custom-snackbar', 
       }); 
       } else { 
       console.info(availableMsg); 
       } 
       break; 
      case 'redundant': 
       console.info(redundantMsg); 
       break; 
      default: 
       break; 
      } 
     }; 
     }; 
    }).catch((e) => { 
     console.error(errorMsg, e); 
    }); 
    }); 
} 

このserviceworkerは仕事箱でビルド時に生成されます。これらの通知は、しかし決して私の携帯に（Ubuntuの+ chrome 59.0.3071.115）私のコンピュータ上に表示されるので、

は、私は少し心配ですonupdatefoundは決してありませんように（android 6.0.1 + chrome 59.0.3071.125）

リモートデバッグ機能を使用して分析した後、それが見えます私の携帯電話で引き起こされる

私は、任意の提案やアドバイスが

---

を理解されるであろう

...ウェブサイトの新しいバージョンが保留されていることを知っているだろう、モバイル上の訪問者のことを考え、UXについては非常に悪い感じ編集1：このウェブページの「ブラウザの互換性」の詳細については、https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/onupdatefoundをご覧ください。 Android用Chromeのこの機能のサポートは不明です。

ブラウザでonupdatefoundイベントをサポートしていない場合は、フォールバック/回避策がありますか？

---

編集2：私は、

accept-ranges: bytes 
cache-control: max-age=0, no-cache, no-store, must-revalidate 
content-encoding: br 
content-language: fr-FR 
content-length: 1636 
content-type: application/javascript; charset=utf-8 
date: Fri, 21 Jul 2017 13:04:06 GMT 
expires: Wed, 11 Jan 1984 05:00:00 GMT 
last-modified: Tue, 18 Jul 2017 02:58:30 GMT 
pragma: no-cache 

をお勧めチューニング仕事箱の罰金について：

<Files sw.js> 
    Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate" 
    Header set Pragma "no-cache" 
    Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT" 
</Files> 

生成：ジェフに応じて、
sw.jsヘッダが.htaccessファイルで管理されていますまだ掘り下げる時間がありませんでしたので、簡単にworkbox-buildをgulpファイルに使用しています。しかし、私はうまくいけば

// Service Worker generation 
gulp.task('bundle-sw', gulp.series('generate-sitemap',() => { 
    return wbBuild.generateSW({ 
    globDirectory: gulpOutputDir, 
    swDest: `${gulpOutputDir}/sw.js`, 
    globPatterns: ['**/*.{html,png,xml,css,ico,txt,json,svg,js,map,gif,jpeg,jpg,bmp,cur,webp,woff2}'], 
    skipWaiting: true, 
    clientsClaim: true, 
    }) 
    .then(() => { 
    console.warn('Service worker generated.'); 
    }) 
    .catch((err) => { 
    console.error(`[ERROR] This happened: ${err}`); 
    }); 
})); 

あなたはそれがskipWaiting: trueが原因である可能性がありと思います:)でしょうか？

---

編集3：ありいけないtestはクロム、モバイル、またはFirefox上のログにoutputedされた場合でも、更新メッセージは、Chromeのみ

Answer 1

にスローされるBroadcastChannel

navigator.serviceWorker.register('/sw.js').then((reg) => { 
    console.log('test'); 
    const updateChannel = new BroadcastChannel('precache-updates'); 
    updateChannel.addEventListener('message', event => { 
    console.log(`Cache updated: ${event.data.payload.updatedUrl}`); 
    }); 
}).catch((e) => { 
    console.error(errorMsg, e); 
}); 

にしようサービス雇用者登録時にupdatefoundイベントが公開されていないプラットフォームを考慮する、AndroidとLinuxのChromeのサービスワーカーの実装に違いがあります。 （MDNは必ずしも正式なものではありません）

このような予測不可能なアップデートを過去にデバッグしたときは、HTTPキャッシュとsw.jsスクリプトとのやりとりが原因でした。 sw.jsのサービスを提供しているときに使用しているヘッダCache-Controlを確認できますか？

また、Workboxを使用していると言えば、更新されたリソースを確認するためのより高度な方法があります。 workbox-swのprecache()メソッドを使用している場合は、workbox-broadcast-cache-updateプラグイン（デフォルトで有効）は、特定のキャッシュされたリソースが更新されたときに通知し、ブロードキャストチャネルAPIを使用してページ上でそのメッセージを待機することができます。これにより、あらかじめキャッシュされている可能性のあるランダムな画像のような重要度の低いリソースではなく、HTMLのような最も重要なリソースが変更されたときにのみSnackBarを表示することができます。

Answer 2

あなたが疑ったように、Service Workerから問題が発生したわけではありません。

私は最初から始め、イベントが公開されなくなるまで、コードを1つずつ追加してこの問題の原因を特定しようとしました。私はそれを理解した：それはthree.jsアニメーションで使用される "高価な"ループのためだった。

このコードを作業者に入れた後、私のページはモバイルまたはFirefoxでこれらのイベントを捕捉でき、ユーザの通知は正常に機能します！あなたの助け:)