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.