Improve service worker

README.md

@@ -15,7 +15,7 @@ However, what makes NoPaste special is that it works with **no database**, and *
 -   🔀 You can access your data on **every NoPaste clone**, including [your own](https://github.com/bokub/nopaste/wiki/Deploy-your-own-version-of-NoPaste)
 -   🔍 Google **will not index** your data, even if your link is public
 
-> **Note:** This project is a copy of [Topaz's paste service][topaz-example], with a reworked design and a few additional features (syntax highlighting, line numbers, line wrapping, embedding...)
+> **Note:** This project is a copy of [Topaz's paste service][topaz-example], with a reworked design and a few additional features (syntax highlighting, line numbers, offline usage, embedding...)
 
 ## How it works
 
@@ -29,7 +29,9 @@ This process is done entirely **in your browser**, and the web server hosting No
 
 For example, [this is the CSS code used by NoPaste][example]
 
-## Embedded NoPaste snippets
+## Other features
+
+### Embedded NoPaste snippets
 
 You can include NoPaste code snippets into your own website by clicking the _Embed_ button and using the generated HTML code.
 
@@ -48,6 +50,21 @@ Here is an example of generated code and how it looks (click on the screenshot t
 
 Feel free to edit the `height` and `width` attributes, so they suit your needs
 
+### Offline usage
+
+When you visit NoPaste for the first time, its code is saved in your browser cache. After that, every NoPaste link you open
+will load really quick, even if your internet connexion is slow.
+
+What if you have no internet connexion at all? No problem, NoPaste will still work perfectly!
+
+### Editor features
+
+-   Syntax highlighting (use the language selector)
+-   Enable / disable line wrapping (use the button next to the language selector)
+-   Delete line (`Ctrl+D`)
+-   Multiple cursors (`Ctrl+Click`)
+-   Usual keyboard shortuts (`Ctrl+A`, `Ctrl+Z`, `Ctrl+Y`...)
+
 ## Maximum sizes for links
 
 NoPaste is great for sharing code snippets on various platforms.

sw.js

@@ -1,11 +1,16 @@
-const PRECACHE = 'precache-20201121c';
+const VERSION = '20201201';
-const RUNTIME = 'runtime';
+const PRECACHE = 'precache-' + VERSION;
+const MODES = 'modes-' + VERSION;
+
+// A regexp to detect mode files
+const MODE_REGEXP = /^https:\/\/cdn\.jsdelivr.net\/npm\/codemirror@.+?\/mode\//;
 
 // A list of local resources we always want to be cached.
 const PRECACHE_URLS = [
     '/',
     'script.js',
     'style.css',
+    'favicon.ico',
     'https://cdn.jsdelivr.net/npm/lzma@2.3.2/src/lzma_worker.min.js',
     'https://cdn.jsdelivr.net/combine/' +
         'npm/lzma@2.3.2/src/lzma.min.js,' +
@@ -43,7 +48,7 @@ self.addEventListener('install', (event) => {
 
 // The activate handler takes care of cleaning up old caches.
 self.addEventListener('activate', (event) => {
-    const currentCaches = [PRECACHE, RUNTIME];
+    const currentCaches = [PRECACHE, MODES];
     event.waitUntil(
         caches
             .keys()
@@ -61,7 +66,7 @@ self.addEventListener('activate', (event) => {
     );
 });
 
-// The fetch handler serves responses for same-origin resources from a cache.
+// The fetch handler serves responses from a cache.
 // If no response is found, it populates the runtime cache with the response
 // from the network before returning it to the page.
 self.addEventListener('fetch', (event) => {
@@ -74,7 +79,11 @@ self.addEventListener('fetch', (event) => {
                 return cachedResponse;
             }
 
-            return caches.open(RUNTIME).then((cache) => {
+            if (!event.request.url.match(MODE_REGEXP)) {
+                return fetch(event.request);
+            }
+
+            return caches.open(MODES).then((cache) => {
                 return fetch(event.request).then((response) => {
                     // Put a copy of the response in the runtime cache.
                     return cache.put(event.request, response.clone()).then(() => {