src/js/sw.js

@@ -1,4 +1,58 @@
+/* global self, caches */
 import { precacheAndRoute } from 'workbox-precaching'
 
-// eslint-disable-next-line no-undef
 precacheAndRoute(self.__WB_MANIFEST)
+
+const CACHE_NAME = 'static-v2'
+const OFFLINE_URL = 'offline.html'
+
+self.addEventListener('install', event => {
+  console.log('Install!')
+
+  event.waitUntil(
+    caches.open(CACHE_NAME).then(cache => {
+      return cache.addAll([
+        '/',
+        '/js/bundle.js',
+        '/css/index.css',
+        '/fonts/OpenSans-Bold.ttf',
+        '/fonts/OpenSans-Bold.woff',
+        '/fonts/OpenSans-Bold.woff2',
+        '/fonts/OpenSans-Regular.ttf',
+        '/fonts/OpenSans-Regular.woff',
+        '/fonts/OpenSans-Regular.woff2',
+        '/favicon.ico',
+        '/favicon.svg',
+        OFFLINE_URL
+      ])
+    })
+  )
+
+  self.skipWaiting()
+})
+
+self.addEventListener('fetch', (event) => {
+  // Нам нужно вызвать функцию event.respondWith(), только если это запрос на переход между
+  // HTML-страницами.
+  if (event.request.mode === 'navigate') {
+    event.respondWith(
+      (async () => {
+        try {
+          const preloadResponse = await event.preloadResponse
+          if (preloadResponse) {
+            return preloadResponse
+          }
+
+          const networkResponse = await fetch(event.request)
+          return networkResponse
+        } catch (error) {
+          console.log('Не удалось получить данные; вместо этого возвращаем страницу для автономного режима.', error)
+
+          const cache = await caches.open(CACHE_NAME)
+          const cachedResponse = await cache.match(OFFLINE_URL)
+          return cachedResponse
+        }
+      })()
+    )
+  }
+})

src/pages/note.njk

@@ -1,4 +1,7 @@
 <main>
+    <a href="/" class="block p-1 rounded-xl">
+        {{ '/src/images/logo.svg' | svgContents("max-h-12 block w-[50vw]") | safe }}
+    </a>
     <article class="article-content">
         <h1>{{ note.data.title | safe }}</h1>
         {{ note.templateContent | safe }}

src/pages/offline.11tydata.js

@@ -0,0 +1,5 @@
+module.exports = {
+  layout: 'base.njk',
+
+  permalink: '/offline.html'
+}

src/pages/offline.njk

@@ -0,0 +1,2 @@
+<h1>Отсутствует подключение к сети</h1>
+<a href="/">Вернуться на главную</a>