సంవత్సరాల క్రితం, నేను స్థానిక అప్లికేషన్లు నెట్వర్క్ కనెక్టివిటీ లేకపోవడం స్పందించింది ఎలా కొన్ని పరిశోధన చేసింది. విశ్లేషణకు లింక్ను నేను కోల్పోయాను (ఇది Google+ లోనే ఉంది), విస్తృతమైన వ్యాఖ్యానం అనేక స్థానిక అనువర్తనాలు అవి నేరుగా పనిచేయకుండా తిరస్కరించే ఇంటర్నెట్కు ముడిపడి ఉన్నాయి. వెబ్ అనువర్తనాలు చాలా వంటివి ధ్వనులు, అయినప్పటికీ వాటిని వెబ్ నుండి వేరు చేసే విషయం అనుభవం ఇప్పటికీ 'బ్రాండ్'గా ఉంది, బార్ట్ సింప్సన్ మీరు ఆన్లైన్ (ఉదాహరణకు) గా ఉండాలని, మరియు ఇంకా మెజారిటీ వెబ్ అనుభవాలు మీరు 'డినో' ను పొందుతారు (chrome: // dino చూడండి).

మేము ఇప్పుడు చాలాకాలం సేవా వర్కర్ మీద పని చేస్తున్నాము, మరియు ఒక సేవా వర్కర్చే పేజీలను నియంత్రించటానికి చాలా ఎక్కువ సైట్లు ఉన్నాయని మేము చూసినప్పుడు, నెట్వర్క్కు కానప్పుడు చాలా మెజారిటీ సైట్లు కూడా ఒక ప్రాథమిక ఫాల్బ్యాక్ అనుభవాన్ని కలిగి లేవు అందుబాటులో.

మేము ఒక పూర్తిగా పతనం-వెనుక పేజీని ఎలా నిర్మించాలో, మీరు పూర్తిగా ఆఫ్ లైన్-ఫస్ట్ అనుభవాన్ని సృష్టించకూడదని ఊహించి, మరియు 10 నిమిషాల్లో అతను దానిని సృష్టించాడని ఎలాంటి గైడెన్స్ ఉంటే నా మంచి చమ్ జేక్ని నేను అడిగాను. Check it out .

బ్రీవిటి కోసం, నేను ఈ కోడ్ను అతికించారు ఎందుకంటే ఇది కేవలం 20 లైన్లు మాత్రమే. ఇది ఆఫ్లైన్ ఆస్తులను కాష్ చేసి, ఆపై ప్రతి 'నావిగేషన్' పొందడం కోసం అది లోపాలు (నెట్వర్క్ కారణంగా) చూస్తే ఆపై అసలు కంటెంట్ స్థానంలో ఆఫ్లైన్ పేజీని అందిస్తుంది.

addEventListener('install', (event) => {
  event.waitUntil(async function() {
    const cache = await caches.open('static-v1');
    await cache.addAll(['offline.html', 'styles.css']);
  }());
});

// See https://developers.google.com/web/updates/2017/02/navigation-preload#activating_navigation_preload
addEventListener('activate', event => {
  event.waitUntil(async function() {
    // Feature-detect
    if (self.registration.navigationPreload) {
      // Enable navigation preloads!
      await self.registration.navigationPreload.enable();
    }
  }());
});

addEventListener('fetch', (event) => {
  const { request } = event;

  // Always bypass for range requests, due to browser bugs
  if (request.headers.has('range')) return;
  event.respondWith(async function() {
    // Try to get from the cache:
    const cachedResponse = await caches.match(request);
    if (cachedResponse) return cachedResponse;

    try {
      // See https://developers.google.com/web/updates/2017/02/navigation-preload#using_the_preloaded_response
      const response = await event.preloadResponse;
      if (response) return response;

      // Otherwise, get from the network
      return await fetch(request);
    } catch (err) {
      // If this was a navigation, show the offline page:
      if (request.mode === 'navigate') {
        return caches.match('offline.html');
      }

      // Otherwise throw
      throw err;
    }
  }());
});

అది అంతా. యూజర్ ఆన్లైన్లో ఉన్నప్పుడు వారు డిఫాల్ట్ అనుభవాన్ని చూస్తారు.

మరియు యూజర్ ఆఫ్లైన్లో ఉన్నప్పుడు, వారు ఫాల్బ్యాక్ పేజీని పొందుతారు.

ఈ సరళమైన స్క్రిప్ట్ చాలా శక్తివంతమైనది, మరియు అవును, అది ఇంకా మెరుగుపరుచుకున్నప్పుడు, నెట్వర్క్తో సమస్య ఉన్నప్పుడు మా వినియోగదారులకు మాట్లాడే విధంగా కూడా ఒక చిన్న మార్పు కూడా ప్రాథమికంగా మెరుగుపడగలదని నేను నమ్ముతున్నాను ప్రపంచవ్యాప్తంగా వినియోగదారుల కోసం వెబ్ యొక్క అవగాహన.

** నవీకరణ ** జేఫ్ఫ్రే పోస్నిక్ కిండిల్ నావిగేషన్ ప్రీలోడ్ ఉపయోగించి గురించి నాకు గుర్తుచేసుకున్నారు అన్ని అభ్యర్థనల కోసం SW బూట్లో వేచి ఉండకూడదు, మీరు మాత్రమే _ ఫిల్డ్స్_ నెట్వర్క్ అభ్యర్థనలను నియంత్రిస్తే ఇది చాలా ముఖ్యం.

Paul Kinlan

Trying to make the web and developers better.