オフラインファーストアプリ（Chrome - Android、Safari iOS）の接続チェックを無効にする方法

Question

オフラインで最初に作成されたウェブアプリを構築しています。私はredux-offline libを使って自分の状態をIndexedDBに保存しています。このアプリはデスクトップ上ですばらしく動作します。ウェブから切断してアプリを更新すると、すべてのデータがIndexedDBから再調整されます。しかし、私はAndroid（またはiPhone）で同じことをしようとするとき。飛行機モードに入ってアプリを更新しようとすると、「あなたはオフラインです」というメッセージが表示されます。 dinasaurエラー（Chrome版）ここで

は、私は今、それが関連している私のマニフェストファイルに持っているものです。

{ 
    "short_name": "...", 
    "name": "...", 
    "manifest_version": 2, 
    "offline_enabled": true, 
    "start_url": "/events", 
    "theme_color": "#000000", 
    "background_color": "...", 
    "display": "standalone", 
    "default_locale": "en", 
    "description": "...", 
    "permissions": [ 
    "unlimitedStorage" 
    ], 
    "icons": [{...}] 
} 

は、ここに私のsw.jsです：

var CACHE_NAME = 'my-cache-v1'; 
var urlsToCache = [ 
    '/', 
    '/index.html', 
    '/dist/bundle.css', 
    '/dist/bundle.js', 
    '/assets/font-awesome/fonts/fontawesome-webfont.woff2', 
    '/assets/fonts/...', 
    '/assets/images/...', 
    '/assets/images/favicon.ico', 
    '/assets/tinymce/tinymce.min.js', 
    '/assets/activity_notification.mp3', 
]; 

self.addEventListener('install', function(event) { 
    // Perform install steps 
    event.waitUntil(
    caches.open(CACHE_NAME) 
     .then(function(cache) { 
     console.log('ServiceWorker: Opened cache'); 
     return cache.addAll(urlsToCache); 
     }) 
); 
}); 

は、ここでのindex.htmlでの私の輸入です：

if ('serviceWorker' in navigator) { 
    navigator.serviceWorker.register('/sw.js') 
    .then(function(registration) { console.log('ServiceWorker registration successful with scope: ', registration.scope); }) 
    .catch(function(err) { console.log('ServiceWorker registration failed: ', err); }); 
    } 

私のJavaScriptバンドルを含むすべての静的リソースは、サービスワーカーを使用してキャッシュされます。私はバンドルからのコンソール出力を見るので、うまくいきます。

すべてのデータがIndexedDBにあることがわかります。私はオフラインのディーノを見ているときに、それは開発者のコ​​ンソールに表示されません。 Androidは、オフラインであれば何もしないようにしているようです。

GET ...url... net::ERR_INTERNET_DISCONNECTED ...url... 
Navigated to data:text/html,chromewebdata 

このチェックを無効にする方法はありますか？それについて正しい方法は何ですか？

Answer 1

ウェブアプリケーションマニフェストのstart_urlは、/eventsに設定されています。これは、Android搭載端末のホーム画面からウェブアプリケーションを起動するたびにナビゲートされるURLです。

あなたのfetchイベントハンドラが含まれていませんでしたが、私はそれが/のキャッシュされた内容で/eventsためのナビゲーション要求に応答しないことを仮定している、とあなたは/eventsが明示的にキャッシュに追加されていません。

• 利用/代わりの/eventsstart_urlとして：/と/eventsが別個のHTMLページを表しているか否か
  あなたがに基づいていくつかのオプションを持っています。
• /とは別のページであることを前提として、プリキャッシュのURLリストに/eventsを追加します。
• 実際に同じページの場合（同じHTMLのすべてのナビゲーションに応答する1ページのアプリケーションを作成しているため）、そのページの複数のコピーを別々のURLに保存するのは効率的ではありません。代わりにevent.request.mode === 'navigate'かどうかを確認するためのチェックを行うfetchイベントハンドラを作成する必要があります。その場合は、常に/のキャッシュレスポンスで応答してください。
• また、sw-precacheのようなツールを使用して、ビルドプロセスの一部としてサービスワーカーを生成することもできます。ビルドの出力に基づいてアセットのリストを維持するように設定できます。共通のHTMLのキャッシュレスポンスで応答することで、単一ページのアプリケーションの場合はautomatically handle all navigationsにすることができます。