Fetchevent respondwith received safari ошибка - Решение и исправление самых разных ошибок на TopOshibok.ru

Looks like no one’s replied in a while. To start the conversation again, simply

ask a new question.

I have a Macbook Air (2017) running macos Big Sur V11.4.

On Safari, when trying to go to outlook.com, the following error is shown and the page cannot be refreshed:

Safari can’t open the page “https://outlook.office.com/mail/“. The error is: “FetchEvent.respondWith received an error: Returned response is null.”

(WebKitServiceWorker:0)

The error does not persist in Incognito mode, Chrome or any other browser. The internet connection is all good — it’s not that.

Ive trawled the internet to no avail. Please let me know of any possible fixes.

MacBook Air

Posted on Jul 1, 2021 1:52 PM

On this Mac, site opens without any issue.

Go step by step and test.

1. Quit Safari, launch Safari holding the Shift key down.

https://support.apple.com/en-us/HT203987

2. Startup in Safe Mode. https://support.apple.com/guide/mac-help/start-up-your-mac-in-safe-mode-mh21245/mac.

Quote:

It also does a basic check of your startup disk, similar to using First Aid in Disk Utility.

And it deletes some system caches, including font caches and

the kernel cache, which are automatically created again as needed.

3. Clear History

https://support.apple.com/guide/safari/clear-your-browsing-history-sfri47acf5d6/mac

Please read the article before clearing history,

this is like a low level resetting of Safari without affecting passwords and bookmarks.

4. If Safari doesn’t open a webpage or isn’t working as expected

https://support.apple.com/en-us/HT204098

Posted on Jul 2, 2021 4:57 AM

Environment

Name	Version
msw	0.25.0
browser	Safari 14.0.2
OS	MacOS Catalina

Request handlers

// Example of declaration. Provide your code here.
import { setupWorker } from 'msw'

const handlers = [
  graphql.query('MeQuery', (_req, res, ctx) => {
    return res(
      ctx.data({
        ...
      }),
    );
  }),
  ...
];

const worker = setupWorker(...handlers)

worker.start()

Actual request

// Example of making a request. Provide your code here.
export const getMe = async () => {
  try {
    const response = await fetch(MOCK_URL, {
      headers: {
        'Content-Type': 'application/json',
      },
      method: 'POST',
      body: meQuery(),
    });
    ...
  } catch {
    ...
  }
};

Current behavior

On Chrome & Firefox, everything is fine. In Safari, it seems like the request gets intercepted, as I see the mock response in the console, but then the service worker throws an error, causing the fetch call to catch with error
[Error] FetchEvent.respondWith received an error: Returned response is null. (see screenshot). Not sure why it’s trying to connect to localhost:8642. That’s the local server I run when not using mocks.

Expected behavior

The fetch should return the mock response and not throw an error.

Screenshots

Источник

I can download the website using the service Worker on Android Chrome, macOS Chrome as well as Safari and on Windows Chrome for offline use. When I try to download the website to iOS 12.1 Safari it works first. But when I close Safari, go offline and reopen Safari, I get the following error message:

Safari can’t open the Site.

Error: «FetchEvent.respondWith received an error: TypeError: There
seems to be no connection to the Internet.»

==== AND in the console ====

FetchEvent.respondWith received an error: Returned response is null

Below you can see the scripts in text form. Unfortunately, I can hardly report anything about the problem, because I don’t understand it and hope for some knowledgeable people

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;
                });
            })
        );
    }
});

Источник

Recently I have been working on a PWA for a client. I chose to use Gatsby to build out the front end and luckily it comes with some great plugins to help with building PWAs. Mainly the offline and manifest plugins. After configuring those and building out the proof of concept, I deploy the site to Netlify and started testing on different devices.

It all goes off without a hitch until I get to iPad Safari… Where after adding the app to the Home Screen and playing around with it, I turn off my wifi to test the offline mode. And I am met with this lovely error:

Error: "FetchEvent.respondWith received an error: TypeError: There seems to be no connection to the Internet."

Enter fullscreen mode

Exit fullscreen mode

You are correct error, there is no internet connection, that is the point.

After spending a while Googling, as you do, I found two things.

Apple doesn’t like the term PWA, kinda irrelevant but worth noting.
A LOT of other people were having the same issue.

I tried several StackOverflow and Github solutions, with no luck. Eventually, I decided to go back to basics and create the most bare-bones PWA I could find. Which lead me to this tutorial on Medium by James Johnson. It was the Hello World of PWAs. Literally. Anyway, I followed the tutorial, deployed on Netlify and proceeded to test on iPad, with no issues! So something was wrong with the Gatsby build and not the iPad.

I made two changes to my project, which were all pushed at the same time and ended up fixing my issue. In all honesty, I am not 100% sure which one was the actual fix and at this point, I am too scared to test.

1. I added apple specific metadata

These tags were mentioned in the tutorial I followed above. After looking at the built version of the site, I noticed these apple specific meta tags weren’t being generated.

If you’re not using Gatsby, I’d recommend adding these meta tags in the <head> of your pages, and seeing if it fixes your issue.

import { Helmet } from 'react-helmet'

const PageWrapper = ({ ... }) => {
  return (
    <Helmet>
      <meta name="apple-mobile-web-app-capable" content="yes" />
      <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
      <meta name="apple-mobile-web-app-title" content="App Title" />
    </Helmet>
  )
}

Enter fullscreen mode

Exit fullscreen mode

I used the react-helmet package to add additional metadata to all my pages. The meta tag that seems the most important would be apple-mobile-web-app-capable.

2. Updated the Workbox `globPatterns`

In my gatsby-config.js file, I updated the manifest plugin options to include cache_busting_mode: 'none', which is required when you specify a new globPattern. Then under the offline plugin I updated the workboxConfig to be:

workboxConfig: {
  globPatterns: ['**/*.{js,jpg,png,html,css}']
}

Enter fullscreen mode

Exit fullscreen mode

I found this pattern while diving into the StackOverflow rabbit hole (I can’t find the link again…).

That is it, after making those changes and pushing the code. The PWA started working on iPad devices. I’d say to test the first change before trying the second one (if you’re using Gatsby), it seems to be the more relevant change.

Hopefully, this has helped you in some way. I spent a few hours looking at this issue so I was pretty happy when it started working. Plus, why not share my solution so other people don’t have to spend hours pulling their hair out.

Peace! ✌️

Источник

davy.ai/
Programming /
[PWA][NEXT.JS][iOS] I sometimes cannot get data from server. The error message is FetchEvent.respondWith received an error: no-response: no-response

My PWA app sometimes cannot get data from server. It shows errors like:

FetchEvent.respondWith received an error: no-response: no-response
Fetch API cannot load
no internet connection

enter image description here om/ZcBm4.png”>

But if we reload the page, it could get data normally. And these bugs only happened in Safari. It is working well in Chrome or window devices.

I reference some page. But I don’t know these bugs caused by BE settings (CORS) or Safari.

My devices I am testing is iPhone XS, iOS 14.4
And I am using the newest ‘next-pwa’ version which means the workbox version is 6.5.4

"workbox-webpack-plugin": "^6.5.4",
"workbox-window": "^6.5.4"

Referenced Pages:

https://github.com/GoogleChrome/workbox/issues/1730

https://www.adro.codes/vault/pwa-fetch-respondwith-error-safari

https://stackoverflow.com/questions/53431195/service-worker-fechtevent-respondwith-response-is-null-on-ios-12-1-safari

Tags: MOBILE-SAFARI, NEXTJS13, PROGRESSIVE-WEB-APPS

Answer

Possible answer:

Troubleshooting PWA Fetch Errors in Safari

If your progressive web app (PWA) sometimes cannot get data from the server and shows errors like FetchEvent.respondWith received an error: no-response: no-response, Fetch API cannot load, or no internet connection, there are several steps you can take to diagnose and solve the issue. Here are some suggestions:
1. Check the network connection: Since the error message mentions “no internet connection”, make sure that your device is actually connected to a stable network and that your server is accessible from that network. You can try loading other websites or apps to see if they also have connectivity issues.
2. Inspect the console logs: Open the developer console in Safari (by clicking on “Develop” in the menu bar and selecting “Show Web Inspector”) and check the console logs for any relevant messages. You may see errors related to CORS (Cross-Origin Resource Sharing) policies, SSL certificates, or other network issues.
3. Test in other browsers: As you mentioned, the PWA works well in Chrome and on Windows devices, so try testing it on other browsers that support PWAs, such as Firefox, Edge, or Opera. If the issue only happens on Safari, it might be a browser-specific bug or limitation.
4. Update your PWA dependencies: Make sure that you are using the latest versions of the PWA-related packages in your project, such as next-pwa, workbox-webpack-plugin, and workbox-window. You can check their version numbers in your package.json file and compare them to the latest releases on their respective repositories.
5. Follow PWA best practices: Review the guidelines and best practices for building PWAs, such as caching strategies, service worker lifecycle, manifest file, and offline support. Workbox, the library used by next-pwa, provides many tools and strategies to optimize the performance and reliability of PWAs.
6. Seek help from the community: If you still cannot solve the issue on your own, try posting a question on relevant forums, such as the Workbox repository, the Next.js community, or Stack Overflow. Provide as much information as possible about your setup, code, and errors, and be patient and friendly in your interactions.
By taking these steps, you should be able to troubleshoot and fix the PWA fetch errors in Safari and improve the overall quality of your PWA. Happy coding!

Comments are closed.

Источник

Similar questions

Environment

Request handlers

Actual request

Current behavior

Expected behavior

Screenshots

1. I added apple specific metadata

2. Updated the Workbox globPatterns

Answer

Troubleshooting PWA Fetch Errors in Safari

2. Updated the Workbox `globPatterns`