Found Solution For External API failing , .js api's failed .

[thediveshsharma]

Hi If you are someone who's facing issues with third party API's failing such as google, facebook, one signal . Kindly use this approach.

In your next config :-

const withPWA = require('next-pwa')({
dest: 'public',
swSrc: 'service-worker.js', //this file needs to be added in root of the project//
register: true, //auto register service worker//
sw: '/sw.js', //can keep any name for service-worker//
skipWaiting: true, //skip waiting to register service worker//
});

service-worker.js (used to implement caching strategy for PWA)

import { skipWaiting, clientsClaim } from 'workbox-core';
import { ExpirationPlugin } from 'workbox-expiration';
import { NetworkOnly, NetworkFirst, CacheFirst, StaleWhileRevalidate } from 'workbox-strategies';
import { registerRoute, setDefaultHandler, setCatchHandler } from 'workbox-routing';
import { matchPrecache, precacheAndRoute, cleanupOutdatedCaches } from 'workbox-precaching';

skipWaiting();
clientsClaim();

// must include following lines when using inject manifest module from workbox
// https://developers.google.com/web/tools/workbox/guides/precache-files/workbox-build#add_an_injection_point
const WB_MANIFEST = self.__WB_MANIFEST;
// Precache fallback route and image
WB_MANIFEST.push({
url: '/fallback',
revision: '1234567890',
});
precacheAndRoute(WB_MANIFEST);

cleanupOutdatedCaches();
registerRoute(
'/',
new NetworkFirst({
cacheName: 'start-url',
plugins: [
new ExpirationPlugin({
maxEntries: 1,
maxAgeSeconds: 14400,
purgeOnQuotaError: !0,
}),
],
}),
'GET'
);
registerRoute(
/^https://fonts.(?:googleapis|gstatic).com/./i,
new CacheFirst({
cacheName: 'google-fonts',
plugins: [
new ExpirationPlugin({
maxEntries: 4,
maxAgeSeconds: 14400,
purgeOnQuotaError: !0,
}),
],
}),
'GET'
);
registerRoute(
/.(?:eot|otf|ttc|ttf|woff|woff2|font.css)$/i,
new StaleWhileRevalidate({
cacheName: 'static-font-assets',
plugins: [
new ExpirationPlugin({
maxEntries: 4,
maxAgeSeconds: 14400,
purgeOnQuotaError: !0,
}),
],
}),
'GET'
);
// disable image cache, so we could observe the placeholder image when offline
registerRoute(
/.(?:jpg|jpeg|gif|png|svg|ico|webp)$/i,
new NetworkOnly({
cacheName: 'static-image-assets',
plugins: [
new ExpirationPlugin({
maxEntries: 64,
maxAgeSeconds: 14400,
purgeOnQuotaError: !0,
}),
],
}),
'GET'
);
registerRoute(
/.(?:js)$/i,
new StaleWhileRevalidate({
cacheName: 'static-js-assets',
plugins: [
new ExpirationPlugin({
maxEntries: 32,
maxAgeSeconds: 14400,
purgeOnQuotaError: !0,
}),
],
}),
'GET'
);
registerRoute(
/.(?:css|less)$/i,
new StaleWhileRevalidate({
cacheName: 'static-style-assets',
plugins: [
new ExpirationPlugin({
maxEntries: 32,
maxAgeSeconds: 14400,
purgeOnQuotaError: !0,
}),
],
}),
'GET'
);
registerRoute(
/.(?:json|xml|csv)$/i,
new NetworkFirst({
cacheName: 'static-data-assets',
plugins: [
new ExpirationPlugin({
maxEntries: 32,
maxAgeSeconds: 14400,
purgeOnQuotaError: !0,
}),
],
}),
'GET'
);
registerRoute(
//auth/.$/i,
new NetworkFirst({
cacheName: 'apis',
networkTimeoutSeconds: 10,
plugins: [
new ExpirationPlugin({
maxEntries: 16,
maxAgeSeconds: 14400,
purgeOnQuotaError: !0,
}),
],
}),
'GET'
);
registerRoute(
/.*/i,
new NetworkFirst({
cacheName: 'others',
networkTimeoutSeconds: 10,
plugins: [
new ExpirationPlugin({
maxEntries: 32,
maxAgeSeconds: 14400,
purgeOnQuotaError: !0,
}),
],
}),
'GET'
);

// following lines gives you control of the offline fallback strategies
// https://developers.google.com/web/tools/workbox/guides/advanced-recipes#comprehensive_fallbacks

// Use a stale-while-revalidate strategy for all other requests.
setDefaultHandler(new NetworkFirst());

// This "catch" handler is triggered when any of the other routes fail to
// generate a response.
setCatchHandler(({ event }) => {
// The FALLBACK_URL entries must be added to the cache ahead of time, either
// via runtime or precaching. If they are precached, then call
// matchPrecache(FALLBACK_URL) (from the workbox-precaching package)
// to get the response from the correct cache.
//
// Use event, request, and url to figure out how to respond.
// One approach would be to use request.destination, see
// https://medium.com/dev-channel/service-worker-caching-strategies-based-on-request-types-57411dd7652c
switch (event.request.destination) {
case 'document':
// If using precached URLs:
return matchPrecache('/fallback');
// return caches.match('/fallback')
break;
case 'image':
// If using precached URLs:
return matchPrecache('/static/images/fallback.png');
// return caches.match('/static/images/fallback.png')
break;
case 'font':
// If using precached URLs:
// return matchPrecache(FALLBACK_FONT_URL);
// return caches.match('/static/fonts/fallback.otf')
// break
default:
// If we don't have a fallback, just return an error response.
return Response.error();
}
});

now just use this to avoid third party api failing.

If it still fails check your CSP if it is configured properly in next.config (I missed this and ruined 2 days of hardwork)

I hope it helps someone

[ImBIOS]

@thediveshsharma It seems this repo is dead and the maintainer cannot be contacted for so long now. I've made an immediate response by resurrecting this repo ImBIOS/next-pwa.