Как предварительно выбрать внешние HTML-страницы в сафари? - PullRequest
Новая
       29

Как предварительно выбрать внешние HTML-страницы в сафари?

2 голосов
/ 25 июня 2019

В настоящее время я использую nextJS (с реагированием), и он отлично работает. Я также использую ссылку предварительной выборки данных для ссылок предварительной выборки в приложении, и это работает потрясающе.

У меня есть требование предварительно выбрать пару страниц, созданных с использованием nextJ, но запущенных как отдельное приложение. Я попытался использовать тег rel = prefetch / rel = next, и он отлично работает на chrome и firefox, но похоже, что safari не поддерживает теги prefetch.

Затем я попытался использовать пакет npmjs , но даже это не могло заставить сафари использовать страницу из дискового кэша. Интересно то, что я вижу, как вызовы предварительной выборки (через выборку) идут на вкладке сети в safari (при загрузке страницы), но когда я нажимаю на целевую ссылку html, она все равно получает данные из сети, а не из дискового кэша.

Я также пытался использовать методы api кеша для сервисных работников, чтобы выяснить, не заставит ли это сафари отображать страницу из кеша, и я вижу, как происходят вызовы извлечения, но safari не использует данные из кеша, когда я нажимаю целевой URL. 

render(){
    const cacheName = 'testcache';
    const deviceURL = this.props.device.PDPPageURL.toString().replace(/^.*\.com/g, "");
    if(typeof(window) !== 'undefined' && window){
    if ('caches' in window) {
        caches.open(cacheName).then(cache => {
        cache.add(deviceURL).then(() => {
            console.log('\n  Apple urls Added to cache ');
        });
        });
    }

Есть ли обходной путь для реализации этого требования во всех браузерах?

1 Ответ

0 голосов
/ 09 июля 2019

Первоначальный подход с отложенной загрузкой в ​​порядке, если клиент его поддерживает. Однако есть сценарии, в которых этого недостаточно для создания великолепной UIX. Вот почему следовать по пути PWA - это следующий шаг.

Я вижу здесь две вещи, которые, по моему пониманию, в React и SW вы, вероятно, не правильно применяете.

  1. render (). Метод должен быть направлен на «рендеринг» желаемого представления, а не на выполнение логической нагрузки или других вещей. По причинам тестирования я понял и все в порядке, просто примечание на случай необходимости. Если вы посмотрите эти примеры на официальном сайте и среди других ресурсов (с использованием jsx или нет), то на нем нет загрязнения. Я видел вид больших визуализаций, но если вы внимательно наблюдаете, то это не более чем «рендеринг» кода. Проверить этот курс .

  2. Cache API. Кусок кода, который вы показываете, только сохраняет / сохраняет, но не уверен, что у вас есть другая часть, когда вы используете метод match для поиска ресурса и заставляет извлечь его из Кеш как ты сказал нужен. Кроме того, в Cache есть система управления версиями, поэтому самый простой способ создать новый Cache - обновить его версию.

    Cache API не обязателен для использования с SW API, поэтому, если это не нужно, вероятно, сосредоточьтесь на его использовании отдельно. Однако цель интеграции обоих заключается в том, чтобы сделать приложение доступным в автономном режиме, что является конечной целью приложения WPA. 

    self.addEventListener('fetch', function(event) {
console.log(event.request.url);
event.respondWith(
    caches.match(event.request).then(function(response) {
        return response || fetch(event.request);
    })
);
    * +1025 *});

    Вы можете найти здесь хороший способ интеграции React с кешем API, но также использует SW для создания PWA.

...