Service Worker FechtEvent.respond с нулевым ответом на iOS 12.1 Safari - PullRequest
Новая
       15

Service Worker FechtEvent.respond с нулевым ответом на iOS 12.1 Safari

0 голосов
/ 22 ноября 2018

Я могу скачать сайт с помощью сервиса Worker на Android Chrome, MacOS Chrome, а также Safari и на Windows Chrome для автономного использования.Когда я пытаюсь загрузить веб-сайт на iOS 12.1 Safari , он сначала работает.Но когда я закрываю Safari, перехожу в автономный режим и снова открываю Safari, я получаю следующее сообщение об ошибке :

Safari не может открыть сайт.

Ошибка:«FetchEvent.respondWith получил ошибку: TypeError: Кажется, нет подключения к Интернету.»

==== И в консоли ====

FetchEvent.respondWith получилошибка: возвращенный ответ нулевой

Ниже вы можете увидеть сценарии в текстовом виде.К сожалению, я едва ли могу что-либо сообщить о проблеме, потому что я не понимаю ее и надеюсь на некоторых знающих людей:)

index.html 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>Offline App</h1>
</body>
<script>
    if('serviceWorker' in navigator) {
        navigator.serviceWorker.register('sw.js').then(function (registration) {
            console.log('Service Worker Registered');
        });
    }
</script>
</html>

sw.js 

/*
 Copyright 2014 Google Inc. All Rights Reserved.
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
 http://www.apache.org/licenses/LICENSE-2.0
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
*/

importScripts('cache-polyfill.js');

var CACHE_VERSION = 1;
var CURRENT_CACHES = {
    prefetch: 'prefetch-cache-v' + CACHE_VERSION
};

self.addEventListener('install', function(event) {
    var now = Date.now();

    var urlsToPrefetch = [
        '/pwa/index.html'
    ];

    console.log('Handling install event. Resources to prefetch:', urlsToPrefetch);

    event.waitUntil(
        caches.open(CURRENT_CACHES.prefetch).then(function(cache) {
            var cachePromises = urlsToPrefetch.map(function(urlToPrefetch) {
                var url = new URL(urlToPrefetch, location.href);
                url.search += (url.search ? '&' : '?') + 'cache-bust=' + now;

                var request = new Request(url, {mode: 'no-cors'});
                return fetch(request).then(function(response) {
                    if (response.status >= 400) {
                        throw new Error('request for ' + urlToPrefetch +
                            ' failed with status ' + response.statusText);
                    }

                    return cache.put(urlToPrefetch, response);
                }).catch(function(error) {
                    console.error('Not caching ' + urlToPrefetch + ' due to ' + error);
                });
            });

            return Promise.all(cachePromises).then(function() {
                console.log('Pre-fetching complete.');
            });
        }).catch(function(error) {
            console.error('Pre-fetching failed:', error);
        })
    );
});

self.addEventListener('activate', function(event) {
    var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) {
        return CURRENT_CACHES[key];
    });

    event.waitUntil(
        caches.keys().then(function(cacheNames) {
            return Promise.all(
                cacheNames.map(function(cacheName) {
                    if (expectedCacheNames.indexOf(cacheName) === -1) {
                        console.log('Deleting out of date cache:', cacheName);
                        return caches.delete(cacheName);
                    }
                })
            );
        })
    );
});

self.addEventListener('fetch', function(event) {
    if (!navigator.onLine) {

        event.respondWith(
            caches.match(event.request).then(function (response) {
                if (response) {

                    return response;
                }

                console.log('No response found in cache. About to fetch from network...');

                return fetch(event.request).then(function (response) {
                    console.log('Response from network is:', response);

                    return response;
                }).catch(function (error) {
                    console.error('Fetching failed:', error);
                    throw error;
                });
            })
        );
    }
});

1 Ответ

0 голосов
/ 22 ноября 2018

Извините, у меня пока нет ответа, но у меня возникла та же проблема с моим веб-приложением, и я потратил на него часы.Поэтому я хотел бы опубликовать все свои выводы здесь.

Шаги, чтобы проверить, может ли веб-приложение работать в автономном режиме в iOS 12

  1. Посетите веб-сайт с Safari (iOS 12 или 12.1)
  2. закрыть вкладку веб-сайта в Safari
  3. нажать кнопку «Домой» на iPhone, чтобы установить Safari на фон
  4. нажать кнопку питания iPhone, чтобы выключить экран
  5. нажмите кнопку питания iPhone еще раз, чтобы разбудить телефон
  6. отключите все сетевое подключение из центра управления iPhone (как Wi-Fi, так и сотовой связи)
  7. откройте Safari, посетите веб-сайт еще раз-> он должен работать в автономном режиме.

iOS 12 против iOS 11.3

Похоже, эта проблема появилась с iOS 12. Мой вебприложение (https://viewsbyme.com) отлично работало в автономном режиме на iOS 11.3, в которой мобильная версия Safari впервые представила Service Worker, но получила ответы от iOS 12 и iOS 12.1 в автономном режиме:

Safari не может открытьстраница. Ошибка была: «FetchEvent.respondWithполучено сообщение об ошибке: TypeError: Интернет-соединение, кажется, находится в автономном режиме. ».

Не уверен, связано ли это с этим отчетом об ошибке (он говорит« RESOLVED FIXED », но на самом деле еще нет, если вы прокрутите внизв конец ветки):

https://bugs.webkit.org/show_bug.cgi?id=190269

Примеры работающих и неработающих веб-приложений

В качестве примеров эти 2 PWAмогут работать в автономном режиме в iOS 12:

https://simpleoffline.website

https://www.currency -calc.com

И эти 2 PWA не могут работать в автономном режимев iOS 12 (но они отлично работают в Chrome на других платформах):

https://2048 -opera-pwa.surge.sh

https://voice-memos.appspot.com

Кажется очевидным, сравнив сценарии Service Worker между этими PWA и выяснив, что заставляет их работать, а не работать.Но я до сих пор не выяснил дельту.

...