feat(pwa): implement precache

content/pages/offline.md

@@ -5,4 +5,4 @@ template = "page.html"
 draft = false
 +++
 
-## No internet
+## No cache/page found

static/sw-load.js

@@ -1,3 +1,5 @@
+const data = new String(document.currentScript.getAttribute('data-cache'));
+const cacheList = data.split(" ");
 const registerServiceWorker = async () => {
   if ("serviceWorker" in navigator) {
     try {
@@ -11,6 +13,7 @@ const registerServiceWorker = async () => {
         console.log("Service worker installed");
       } else if (registration.active) {
         console.log("Service worker active");
+        registration.active.postMessage(cacheList);
       }
     } catch (error) {
       console.error(`Registration failed with ${error}`);

static/sw.js

@@ -5,7 +5,6 @@ oninstall = (event) => {
     (async () => {
       const cache = await caches.open(cacheName);
       await cache.add("/offline/");
-      console.log("Service worker added offline page");
     })(),
   );
 };
@@ -31,6 +30,18 @@ onfetch = (event) => {
   }));
 };
 
+onmessage = (event) => {
+  const data = event.data;
+  console.log("Service worker started precache", data);
+  event.waitUntil(
+    (async () => {
+      const cache = await caches.open(cacheName);
+      await cache.addAll(data)
+        .catch((error) => console.log("Service worker failed precache", error));
+    })(),
+  );
+};
+
 onactivate = (event) =>  {
   event.waitUntil(
     (async () => {

templates/partials/head.html

@@ -111,7 +111,8 @@
   <link rel="stylesheet" type="text/css" href="{{ get_url(path="/syntax-theme-dark.css", cachebust=true) }}" media="(prefers-color-scheme: dark)" integrity="sha512-{{ get_hash(path="/syntax-theme-dark.css", sha_type=512, base64=true) | safe }}">
   {% endif %}
   {% if config.extra.manifest %}
-  <script defer src="{{ get_url(path='sw-load.js', trailing_slash=false, cachebust=true) | safe }}" integrity="sha512-{{ get_hash(path='sw-load.js', sha_type=512, base64=true) | safe }}"></script>
+  {% set posts = get_section(path="posts/_index.md") %}
+  <script defer src="{{ get_url(path='sw-load.js', trailing_slash=false, cachebust=true) | safe }}" integrity="sha512-{{ get_hash(path='sw-load.js', sha_type=512, base64=true) | safe }}" data-cache="{% if config.taxonomies %}{% for taxonomy in config.taxonomies %}{% set inner_taxonomy = get_taxonomy(kind=taxonomy.name) %}{{ inner_taxonomy.permalink | safe }} {% for term in inner_taxonomy.items %}{{ term.permalink | safe }} {% endfor %}{% endfor %}{% endif %}{% for post in posts.pages %}{{ post.permalink | safe }} {% if post.assets %}{% for asset in post.assets %}{{ config.base_url ~ asset | safe }} {% endfor %}{%endif%}{% endfor %}{% for link in config.extra.menu.links %}{{ get_url(path=link.url) | safe }} {% endfor %}/{% if config.extra.menu.posts == true %} {{ config.base_url ~ "/posts/" | safe }}{% endif %}{% for link in config.extra.images.categories %}{% if link.image is not matching("^http[s]?://") %} {{ link.image | safe }}{% endif %}{% endfor %}{% if config.extra.images.home is not matching("^http[s]?://") %} {{ config.extra.images.home | safe }}{% endif %}{% if config.extra.images.post_list is not matching("^http[s]?://") %} {{ config.extra.images.post_list | safe }}{% endif %}{% if config.extra.images.default_post is not matching("^http[s]?://") %} {{ config.extra.images.default_post | safe }}{% endif %}"></script>
   {% endif %}
   {% if page.extra.image %}
     <style>{{ macros::image_style(url=page.extra.image) }}</style>

templates/taxonomy_list.html

@@ -4,10 +4,10 @@
     <div class="inner-post content">
       {% block date %}{{ super() }}{% endblock date%}
       <div class="entry-meta">
-        <p>{% for term in terms %}#<a href="{{ config.base_url ~ "/" ~ taxonomy.name ~ "/" ~ term.name }}">{{ term.name }}</a><sup>{{ term.pages | length }}</sup> {% endfor %}</p>
+        <p>{% for term in terms %}#<a href="{{ config.base_url ~ "/" ~ taxonomy.name ~ "/" ~ term.name ~ "/" | safe }}">{{ term.name }}</a><sup>{{ term.pages | length }}</sup> {% endfor %}</p>
       </div>
       {%- for term in terms %}
-        <h2 class="entry-title"><a href="{{ config.base_url ~ "/" ~ taxonomy.name ~ "/" ~ term.name }}">#</a>{{ term.name | safe}}</h2>
+        <h2 class="entry-title"><a href="{{ config.base_url ~ "/" ~ taxonomy.name ~ "/" ~ term.name ~ "/" | safe }}">#</a>{{ term.name | safe}}</h2>
         <ul>
         {%- for page in term.pages %}
           <li class="entry-info"><a href="{{ page.permalink | safe }}">{{ page.title | safe }}</a> <time datetime="{{ page.date }}">{{ page.date | date(format="%F") }}</time></li>