cache codemirror dependencies when installing PWA

Hunter
Friday, July 11th, 2025 at 4:51 PM


sw.js+23-4
sw.js
   -const CACHE_NAME = 'web-workshop-v1';
 1 +const CACHE_NAME = 'web-workshop-v2';
 2  const urlsToCache = [
 3    '/',
 4    '/index.html',
   -  '/manifest.json'
 5 +  '/manifest.json',
 6 +  // CodeMirror dependencies
 7 +  'https://esm.sh/@codemirror/view@6',
 8 +  'https://esm.sh/@codemirror/state@6', 
 9 +  'https://esm.sh/@codemirror/commands@6',
10 +  'https://esm.sh/@codemirror/lang-html@6',
11 +  'https://esm.sh/@fsegurai/codemirror-theme-github-dark',
12 +  'https://esm.sh/@codemirror/language@6'
13  ];
14  
15  // Function to discover and cache all files in directories

49    event.waitUntil(
50      caches.open(CACHE_NAME)
51        .then(async cache => {
   -        // Cache core files
   -        await cache.addAll(urlsToCache);
52 +        // Cache core files first
53 +        const coreFiles = urlsToCache.filter(url => !url.startsWith('https://'));
54 +        await cache.addAll(coreFiles);
55 +        
56 +        // Cache external dependencies with better error handling
57 +        const externalFiles = urlsToCache.filter(url => url.startsWith('https://'));
58 +        for (const url of externalFiles) {
59 +          try {
60 +            await cache.add(url);
61 +          } catch (error) {
62 +            console.log(`Failed to cache ${url}:`, error);
63 +          }
64 +        }
65 +        
66          // Cache directory files
67          await cacheDirectoryFiles(cache, ['/images/', '/pages/']);
68        })