diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 6c246b1d0..affcf763a 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -6,12 +6,12 @@ version: 2 updates: - package-ecosystem: npm # See documentation for possible values - directory: "/" # Location of package manifests + directory: '/' # Location of package manifests open-pull-requests-limit: 10 schedule: - interval: "weekly" - - package-ecosystem: "github-actions" - directory: "/" + interval: 'weekly' + - package-ecosystem: 'github-actions' + directory: '/' open-pull-requests-limit: 10 schedule: interval: monthly diff --git a/.gitpod.yml b/.gitpod.yml index 8113b45a4..41805e3e7 100644 --- a/.gitpod.yml +++ b/.gitpod.yml @@ -7,4 +7,4 @@ ports: onOpen: ignore vscode: extensions: - - sysoev.language-stylus@1.11.0:xX39oruAJ5UQzTNVRdbBaQ== \ No newline at end of file + - sysoev.language-stylus@1.11.0:xX39oruAJ5UQzTNVRdbBaQ== diff --git a/README.md b/README.md index 8c665fc5a..f49c7d536 100644 --- a/README.md +++ b/README.md @@ -62,12 +62,12 @@ Move to [awesome-docsify](https://github.com/docsifyjs/awesome-docsify#showcase) ## Similar projects -| Project | Description | -| ------------------------------------------------ | ---------------------------------------- | -| [Docusaurus](https://docusaurus.io) | Docusaurus makes it easy to maintain Open Source documentation websites | -| [GitBook](https://www.gitbook.com) | Where technical teams document | -| [MkDocs](https://www.mkdocs.org) | Project documentation with Markdown | -| [VuePress](https://vuepress.vuejs.org) | Vue-powered Static Site Generator | +| Project | Description | +| -------------------------------------- | ----------------------------------------------------------------------- | +| [Docusaurus](https://docusaurus.io) | Docusaurus makes it easy to maintain Open Source documentation websites | +| [GitBook](https://www.gitbook.com) | Where technical teams document | +| [MkDocs](https://www.mkdocs.org) | Project documentation with Markdown | +| [VuePress](https://vuepress.vuejs.org) | Vue-powered Static Site Generator | ## Contributing diff --git a/SECURITY.md b/SECURITY.md index 1b9f6f908..f57d273a0 100644 --- a/SECURITY.md +++ b/SECURITY.md @@ -6,7 +6,7 @@ If you believe you have found a security vulnerability in docsify, please report **Please do not report security vulnerabilities through our public GitHub issues.** -Send email via :email: maintainers@docsifyjs.org to us. +Send email to us via :email: maintainers@docsifyjs.org. Please include as much of the following information as possible to help us better understand the possible issue: diff --git a/build/build.js b/build/build.js index 6a3726ed5..eb03b80ed 100644 --- a/build/build.js +++ b/build/build.js @@ -32,83 +32,89 @@ async function build(opts) { nodeResolve(), replace({ __VERSION__: version, - }) + }), ], onwarn(message) { if (message.code === 'UNRESOLVED_IMPORT') { throw new Error( `Could not resolve module ` + - message.source + - `. Try running 'npm install' or using rollup's 'external' option if this is an external dependency. ` + - `Module ${message.source} is imported in ${message.importer}` - ) + message.source + + `. Try running 'npm install' or using rollup's 'external' option if this is an external dependency. ` + + `Module ${message.source} is imported in ${message.importer}` + ); } - } + }, }) .then(bundle => { - const dest = 'lib/' + (opts.output || opts.input) + const dest = 'lib/' + (opts.output || opts.input); - console.log(dest) + console.log(dest); return bundle.write({ format: 'iife', - output: opts.globalName ? {name: opts.globalName} : {}, + output: opts.globalName ? { name: opts.globalName } : {}, file: dest, - strict: false - }) - }) + strict: false, + }); + }); } async function buildCore() { - const promises = [] + const promises = []; - promises.push(build({ - input: 'src/core/index.js', - output: 'docsify.js', - })) + promises.push( + build({ + input: 'src/core/index.js', + output: 'docsify.js', + }) + ); if (isProd) { - promises.push(build({ - input: 'src/core/index.js', - output: 'docsify.min.js', - plugins: [uglify()] - })) + promises.push( + build({ + input: 'src/core/index.js', + output: 'docsify.min.js', + plugins: [uglify()], + }) + ); } - await Promise.all(promises) + await Promise.all(promises); } async function buildAllPlugin() { const plugins = [ - {name: 'search', input: 'search/index.js'}, - {name: 'ga', input: 'ga.js'}, - {name: 'gtag', input: 'gtag.js'}, - {name: 'matomo', input: 'matomo.js'}, - {name: 'emoji', input: 'emoji.js'}, - {name: 'external-script', input: 'external-script.js'}, - {name: 'front-matter', input: 'front-matter/index.js'}, - {name: 'zoom-image', input: 'zoom-image.js'}, - {name: 'disqus', input: 'disqus.js'}, - {name: 'gitalk', input: 'gitalk.js'} - ] + { name: 'search', input: 'search/index.js' }, + { name: 'ga', input: 'ga.js' }, + { name: 'gtag', input: 'gtag.js' }, + { name: 'matomo', input: 'matomo.js' }, + { name: 'emoji', input: 'emoji.js' }, + { name: 'external-script', input: 'external-script.js' }, + { name: 'front-matter', input: 'front-matter/index.js' }, + { name: 'zoom-image', input: 'zoom-image.js' }, + { name: 'disqus', input: 'disqus.js' }, + { name: 'gitalk', input: 'gitalk.js' }, + ]; const promises = plugins.map(item => { return build({ input: 'src/plugins/' + item.input, - output: 'plugins/' + item.name + '.js' - }) - }) + output: 'plugins/' + item.name + '.js', + }); + }); if (isProd) { plugins.forEach(item => { - promises.push(build({ - input: 'src/plugins/' + item.input, - output: 'plugins/' + item.name + '.min.js', - plugins: [uglify()] - })) - }) + promises.push( + build({ + input: 'src/plugins/' + item.input, + output: 'plugins/' + item.name + '.min.js', + plugins: [uglify()], + }) + ); + }); } - await Promise.all(promises) + await Promise.all(promises); } async function main() { @@ -118,41 +124,37 @@ async function main() { atomic: true, awaitWriteFinish: { stabilityThreshold: 1000, - pollInterval: 100 - } + pollInterval: 100, + }, }) .on('change', p => { - console.log('[watch] ', p) - const dirs = p.split(path.sep) + console.log('[watch] ', p); + const dirs = p.split(path.sep); if (dirs[1] === 'core') { - buildCore() + buildCore(); } else if (dirs[2]) { - const name = path.basename(dirs[2], '.js') + const name = path.basename(dirs[2], '.js'); const input = `src/plugins/${name}${ /\.js/.test(dirs[2]) ? '' : '/index' - }.js` + }.js`; build({ input, - output: 'plugins/' + name + '.js' - }) + output: 'plugins/' + name + '.js', + }); } }) .on('ready', () => { - console.log('[start]') - buildCore() - buildAllPlugin() - }) + console.log('[start]'); + buildCore(); + buildAllPlugin(); + }); } else { - await Promise.all([ - buildCore(), - buildAllPlugin() - ]) + await Promise.all([buildCore(), buildAllPlugin()]); } } -main().catch((e) => { - console.error(e) - process.exit(1) -}) - +main().catch(e => { + console.error(e); + process.exit(1); +}); diff --git a/build/css.js b/build/css.js index 1047c5868..71a9dc947 100644 --- a/build/css.js +++ b/build/css.js @@ -1,47 +1,48 @@ -import fs from 'fs' -import path from 'path' -import {spawn} from 'child_process' +import fs from 'fs'; +import path from 'path'; +import { spawn } from 'child_process'; const relative = path => new URL(path, import.meta.url); -const args = process.argv.slice(2) +const args = process.argv.slice(2); fs.readdir(relative('../src/themes'), (err, files) => { - if (err) { - console.error('err', err) - process.exit(1) - } - files.map(async (file) => { - if (/\.styl/g.test(file)) { - const stylusBin = ['node_modules', 'stylus', 'bin', 'stylus'].join(path.sep) - let cmdargs = [ - stylusBin, - `src/themes/${file}`, - '-u', - 'autoprefixer-stylus' - ] - cmdargs = [...cmdargs, ...args] + if (err) { + console.error('err', err); + process.exit(1); + } + files.map(async file => { + if (/\.styl/g.test(file)) { + const stylusBin = ['node_modules', 'stylus', 'bin', 'stylus'].join( + path.sep + ); + let cmdargs = [ + stylusBin, + `src/themes/${file}`, + '-u', + 'autoprefixer-stylus', + ]; + cmdargs = [...cmdargs, ...args]; - const stylusCMD = spawn('node', cmdargs, { shell: true }) + const stylusCMD = spawn('node', cmdargs, { shell: true }); - stylusCMD.stdout.on('data', (data) => { - console.log(`[Stylus Build ] stdout: ${data}`); - }); + stylusCMD.stdout.on('data', data => { + console.log(`[Stylus Build ] stdout: ${data}`); + }); - stylusCMD.stderr.on('data', (data) => { - console.error(`[Stylus Build ] stderr: ${data}`); - }); + stylusCMD.stderr.on('data', data => { + console.error(`[Stylus Build ] stderr: ${data}`); + }); - stylusCMD.on('close', (code) => { - const message = `[Stylus Build ] child process exited with code ${code}` + stylusCMD.on('close', code => { + const message = `[Stylus Build ] child process exited with code ${code}`; - if (code !== 0) { - console.error(message); - process.exit(code) - } - console.log(message); - }); - } else { - return + if (code !== 0) { + console.error(message); + process.exit(code); } - - }) -}) + console.log(message); + }); + } else { + return; + } + }); +}); diff --git a/build/mincss.js b/build/mincss.js index 05b8d770e..3e4206066 100644 --- a/build/mincss.js +++ b/build/mincss.js @@ -1,15 +1,18 @@ import cssnano from 'cssnano'; -import path from 'path' -import fs from 'fs' +import path from 'path'; +import fs from 'fs'; -const files = fs.readdirSync(path.resolve('lib/themes')) +const files = fs.readdirSync(path.resolve('lib/themes')); files.forEach(file => { - file = path.resolve('lib/themes', file) - cssnano.process(fs.readFileSync(file)).then(result => { - fs.writeFileSync(file, result.css) - }).catch(e => { - console.error(e) - process.exit(1) - }) -}) + file = path.resolve('lib/themes', file); + cssnano + .process(fs.readFileSync(file)) + .then(result => { + fs.writeFileSync(file, result.css); + }) + .catch(e => { + console.error(e); + process.exit(1); + }); +}); diff --git a/docs/_media/example.html b/docs/_media/example.html index d35ee1624..9820b4c1e 100644 --- a/docs/_media/example.html +++ b/docs/_media/example.html @@ -1 +1 @@ -

To infinity and Beyond!

\ No newline at end of file +

To infinity and Beyond!

diff --git a/docs/cdn.md b/docs/cdn.md index 05fff3c28..52c992464 100644 --- a/docs/cdn.md +++ b/docs/cdn.md @@ -6,7 +6,7 @@ Recommended: [jsDelivr](//cdn.jsdelivr.net), which will reflect the latest versi ```html - + @@ -18,7 +18,10 @@ Alternatively, use [compressed files](#compressed-file). ```html - + @@ -28,7 +31,10 @@ Alternatively, use [compressed files](#compressed-file). ```html - + @@ -36,7 +42,10 @@ Alternatively, use [compressed files](#compressed-file). ```html - + diff --git a/docs/cover.md b/docs/cover.md index bf8c3c54e..1be3b39ce 100644 --- a/docs/cover.md +++ b/docs/cover.md @@ -11,8 +11,8 @@ Set `coverpage` to **true**, and create a `_coverpage.md`: ``` @@ -81,7 +81,7 @@ Now, you can set ```js window.$docsify = { - coverpage: ['/', '/zh-cn/'] + coverpage: ['/', '/zh-cn/'], }; ``` @@ -91,7 +91,7 @@ Or a special file name window.$docsify = { coverpage: { '/': 'cover.md', - '/zh-cn/': 'cover.md' - } + '/zh-cn/': 'cover.md', + }, }; ``` diff --git a/docs/custom-navbar.md b/docs/custom-navbar.md index 0d05a243f..d1722fbd5 100644 --- a/docs/custom-navbar.md +++ b/docs/custom-navbar.md @@ -27,8 +27,8 @@ Alternatively, you can create a custom markdown-based navigation file by setting ``` @@ -36,8 +36,8 @@ Alternatively, you can create a custom markdown-based navigation file by setting ```markdown -* [En](/) -* [chinese](/zh-cn/) +- [En](/) +- [chinese](/zh-cn/) ``` !> You need to create a `.nojekyll` in `./docs` to prevent GitHub Pages from ignoring files that begin with an underscore. @@ -51,19 +51,19 @@ You can create sub-lists by indenting items that are under a certain parent. ```markdown -* Getting started +- Getting started - * [Quick start](quickstart.md) - * [Writing more pages](more-pages.md) - * [Custom navbar](custom-navbar.md) - * [Cover page](cover.md) + - [Quick start](quickstart.md) + - [Writing more pages](more-pages.md) + - [Custom navbar](custom-navbar.md) + - [Cover page](cover.md) -* Configuration - * [Configuration](configuration.md) - * [Themes](themes.md) - * [Using plugins](plugins.md) - * [Markdown configuration](markdown.md) - * [Language highlight](language-highlight.md) +- Configuration + - [Configuration](configuration.md) + - [Themes](themes.md) + - [Using plugins](plugins.md) + - [Markdown configuration](markdown.md) + - [Language highlight](language-highlight.md) ``` renders as @@ -80,7 +80,7 @@ If you use the [emoji plugin](plugins#emoji): @@ -91,6 +91,6 @@ you could, for example, use flag emojis in your custom navbar Markdown file: ```markdown -* [:us:, :uk:](/) -* [:cn:](/zh-cn/) +- [:us:, :uk:](/) +- [:cn:](/zh-cn/) ``` diff --git a/docs/deploy.md b/docs/deploy.md index 9ac3ca50f..ce6a82a07 100644 --- a/docs/deploy.md +++ b/docs/deploy.md @@ -96,14 +96,14 @@ When using the HTML5 router, you need to set up redirect rules that redirect all ## AWS Amplify -1. Set the routerMode in the Docsify project `index.html` to *history* mode. +1. Set the routerMode in the Docsify project `index.html` to _history_ mode. ```html ``` @@ -125,17 +125,15 @@ frontend: - '**/*' cache: paths: [] - ``` 6. Add the following Redirect rules in their displayed order. Note that the second record is a PNG image where you can change it with any image format you are using. | Source address | Target address | Type | -|----------------|----------------|---------------| -| /<*>.md | /<*>.md | 200 (Rewrite) | -| /<*>.png | /<*>.png | 200 (Rewrite) | -| /<*> | /index.html | 200 (Rewrite) | - +| -------------- | -------------- | ------------- | +| /<\*>.md | /<\*>.md | 200 (Rewrite) | +| /<\*>.png | /<\*>.png | 200 (Rewrite) | +| /<\*> | /index.html | 200 (Rewrite) | ## Docker @@ -144,10 +142,10 @@ frontend: You need prepare the initial files instead of making them inside the container. See the [Quickstart](https://docsify.js.org/#/quickstart) section for instructions on how to create these files manually or using [docsify-cli](https://github.com/docsifyjs/docsify-cli). - ```sh - index.html - README.md - ``` + ```sh + index.html + README.md + ``` - Create Dockerfile @@ -180,4 +178,3 @@ frontend: ```sh docker run -itp 3000:3000 --name=docsify -v $(pwd):/docs docsify/demo ``` - diff --git a/docs/embed-files.md b/docs/embed-files.md index 936494bcb..f06d121f8 100644 --- a/docs/embed-files.md +++ b/docs/embed-files.md @@ -26,11 +26,11 @@ Currently, file extensions are automatically recognized and embedded in differen These types are supported: -* **iframe** `.html`, `.htm` -* **markdown** `.markdown`, `.md` -* **audio** `.mp3` -* **video** `.mp4`, `.ogg` -* **code** other file extension +- **iframe** `.html`, `.htm` +- **markdown** `.markdown`, `.md` +- **audio** `.mp3` +- **video** `.mp4`, `.ogg` +- **code** other file extension Of course, you can force the specified type. For example, a Markdown file can be embedded as a code block by setting `:type=code`. @@ -74,6 +74,7 @@ Example: If you embed the file as `iframe`, `audio` and `video`, then you may need to set the attributes of these tags. ?> Note, for the `audio` and `video` types, docsify adds the `controls` attribute by default. When you want add more attributes, the `controls` attribute need to be added manually if need be. + ```md [filename](_media/example.mp4 ':include :type=video controls width=100%') ``` @@ -114,11 +115,11 @@ Start by viewing a gist on `gist.github.com`. For the purposes of this guide, we Identify the following items from the gist: -Field | Example | Description ---- | --- | --- -**Username** | `anikethsaha` | The gist's owner. -**Gist ID** | `c2bece08f27c4277001f123898d16a7c` | Identifier for the gist. This is fixed for the gist's lifetime. -**Filename** | `content.md` | Select a name of a file in the gist. This needed even on a single-file gist for embedding to work. +| Field | Example | Description | +| ------------ | ---------------------------------- | -------------------------------------------------------------------------------------------------- | +| **Username** | `anikethsaha` | The gist's owner. | +| **Gist ID** | `c2bece08f27c4277001f123898d16a7c` | Identifier for the gist. This is fixed for the gist's lifetime. | +| **Filename** | `content.md` | Select a name of a file in the gist. This needed even on a single-file gist for embedding to work. | You will need those to build the _raw gist URL_ for the target file. This has the following format: diff --git a/docs/language-highlight.md b/docs/language-highlight.md index e95823d03..0ea9b6618 100644 --- a/docs/language-highlight.md +++ b/docs/language-highlight.md @@ -2,10 +2,10 @@ Docsify uses [Prism](https://prismjs.com) to highlight code blocks in your pages. Prism supports the following languages by default: -* Markup - `markup`, `html`, `xml`, `svg`, `mathml`, `ssml`, `atom`, `rss` -* CSS - `css` -* C-like - `clike` -* JavaScript - `javascript`, `js` +- Markup - `markup`, `html`, `xml`, `svg`, `mathml`, `ssml`, `atom`, `rss` +- CSS - `css` +- C-like - `clike` +- JavaScript - `javascript`, `js` Support for [additional languages](https://prismjs.com/#supported-languages) is available by loading the language-specific [grammar files](https://cdn.jsdelivr.net/npm/prismjs@1/components/) via CDN: @@ -29,7 +29,7 @@ echo "hello" ``` ```php -function getAdder(int $x): int +function getAdder(int $x): int { return 123; } @@ -48,18 +48,19 @@ echo "hello" ``` ```php -function getAdder(int $x): int +function getAdder(int $x): int { return 123; } ``` ## Highlighting Dynamic Content + Code blocks [dynamically created from javascript](https://docsify.js.org/#/configuration?id=executescript) can be highlighted using the method `Prism.highlightElement` like so: ```javascript -const code = document.createElement("code"); +const code = document.createElement('code'); code.innerHTML = "console.log('Hello World!')"; -code.setAttribute("class", "lang-javascript"); +code.setAttribute('class', 'lang-javascript'); Prism.highlightElement(code); ``` diff --git a/docs/markdown.md b/docs/markdown.md index 6adc7f035..5cca17b92 100644 --- a/docs/markdown.md +++ b/docs/markdown.md @@ -9,10 +9,10 @@ window.$docsify = { renderer: { link() { // ... - } - } - } -} + }, + }, + }, +}; ``` ?> Configuration Options Reference: [marked documentation](https://marked.js.org/#/USING_ADVANCED.md) @@ -24,9 +24,9 @@ window.$docsify = { markdown(marked, renderer) { // ... - return marked - } -} + return marked; + }, +}; ``` ## Supports mermaid @@ -43,14 +43,17 @@ window.$docsify = { markdown: { renderer: { code(code, lang) { - if (lang === "mermaid") { + if (lang === 'mermaid') { return /* html */ ` -
${mermaid.render('mermaid-svg-' + num++, code)}
+
${mermaid.render( + 'mermaid-svg-' + num++, + code + )}
`; } return this.origin.code.apply(this, arguments); - } - } - } -} + }, + }, + }, +}; ``` diff --git a/docs/more-pages.md b/docs/more-pages.md index ed4082fb0..ab7d8fd40 100644 --- a/docs/more-pages.md +++ b/docs/more-pages.md @@ -34,8 +34,8 @@ First, you need to set `loadSidebar` to **true**. Details are available in the [ ``` @@ -45,8 +45,8 @@ Create the `_sidebar.md`: ```markdown -* [Home](/) -* [Guide](guide.md) +- [Home](/) +- [Guide](guide.md) ``` You need to create a `.nojekyll` in `./docs` to prevent GitHub Pages from ignoring files that begin with an underscore. @@ -76,9 +76,9 @@ You can specify `alias` to avoid unnecessary fallback. window.$docsify = { loadSidebar: true, alias: { - '/.*/_sidebar.md': '/_sidebar.md' - } - } + '/.*/_sidebar.md': '/_sidebar.md', + }, + }; ``` @@ -90,8 +90,9 @@ A page's `title` tag is generated from the _selected_ sidebar item name. For bet ```markdown -* [Home](/) -* [Guide](guide.md "The greatest guide in the world") + +- [Home](/) +- [Guide](guide.md 'The greatest guide in the world') ``` ## Table of Contents @@ -106,8 +107,8 @@ A custom sidebar can also automatically generate a table of contents by setting ``` diff --git a/docs/pwa.md b/docs/pwa.md index 464f0c5be..3e9e0c755 100644 --- a/docs/pwa.md +++ b/docs/pwa.md @@ -8,7 +8,7 @@ It is also very easy to use. Create a `sw.js` file in your project's root directory and copy the following code: -*sw.js* +_sw.js_ ```js /* =========================================================== @@ -19,24 +19,24 @@ Create a `sw.js` file in your project's root directory and copy the following co * Register service worker. * ========================================================== */ -const RUNTIME = 'docsify' +const RUNTIME = 'docsify'; const HOSTNAME_WHITELIST = [ self.location.hostname, 'fonts.gstatic.com', 'fonts.googleapis.com', - 'cdn.jsdelivr.net' -] + 'cdn.jsdelivr.net', +]; // The Util Function to hack URLs of intercepted requests -const getFixedUrl = (req) => { - const now = Date.now() - const url = new URL(req.url) +const getFixedUrl = req => { + const now = Date.now(); + const url = new URL(req.url); // 1. fixed http URL // Just keep syncing with location.protocol // fetch(httpURL) belongs to active mixed content. // And fetch(httpRequest) is not supported yet. - url.protocol = self.location.protocol + url.protocol = self.location.protocol; // 2. add query for caching-busting. // Github Pages served with Cache-Control: max-age=600 @@ -44,10 +44,10 @@ const getFixedUrl = (req) => { // Until cache mode of Fetch API landed, we have to workaround cache-busting with query string. // Cache-Control-Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=453190 if (url.hostname === self.location.hostname) { - url.search += (url.search ? '&' : '?') + 'cache-bust=' + now + url.search += (url.search ? '&' : '?') + 'cache-bust=' + now; } - return url.href -} + return url.href; +}; /** * @Lifecycle Activate @@ -56,8 +56,8 @@ const getFixedUrl = (req) => { * waitUntil(): activating ====> activated */ self.addEventListener('activate', event => { - event.waitUntil(self.clients.claim()) -}) + event.waitUntil(self.clients.claim()); +}); /** * @Functional Fetch @@ -71,10 +71,10 @@ self.addEventListener('fetch', event => { // Stale-while-revalidate // similar to HTTP's stale-while-revalidate: https://www.mnot.net/blog/2007/12/12/stale // Upgrade from Jake's to Surma's: https://gist.github.com/surma/eb441223daaedf880801ad80006389f1 - const cached = caches.match(event.request) - const fixedUrl = getFixedUrl(event.request) - const fetched = fetch(fixedUrl, { cache: 'no-store' }) - const fetchedCopy = fetched.then(resp => resp.clone()) + const cached = caches.match(event.request); + const fixedUrl = getFixedUrl(event.request); + const fetched = fetch(fixedUrl, { cache: 'no-store' }); + const fetchedCopy = fetched.then(resp => resp.clone()); // Call respondWith() with whatever we get first. // If the fetch fails (e.g disconnected), wait for the cache. @@ -83,29 +83,36 @@ self.addEventListener('fetch', event => { event.respondWith( Promise.race([fetched.catch(_ => cached), cached]) .then(resp => resp || fetched) - .catch(_ => { /* eat any errors */ }) - ) + .catch(_ => { + /* eat any errors */ + }) + ); // Update the cache with the version we fetched (only for ok status) event.waitUntil( Promise.all([fetchedCopy, caches.open(RUNTIME)]) - .then(([response, cache]) => response.ok && cache.put(event.request, response)) - .catch(_ => { /* eat any errors */ }) - ) + .then( + ([response, cache]) => + response.ok && cache.put(event.request, response) + ) + .catch(_ => { + /* eat any errors */ + }) + ); } -}) +}); ``` ## Register Now, register it in your `index.html`. It only works on some modern browsers, so we need to check: -*index.html* +_index.html_ ```html ``` diff --git a/index.html b/index.html index 9bc8ad0bb..17d28d098 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,12 @@ - +