New feature: PWA

_includes/head.html

@@ -144,4 +144,7 @@
 
   <script src="{{ site.baseurl }}/assets/js/dist/tooltip-loader.min.js" async></script>
 
+  <!-- PWA -->
+  <script src="{{ '/app.js' | relative_url }}" defer></script>
+
 </head>

_includes/panel.html

@@ -11,20 +11,10 @@
   <div class="access">
 
   {% if site.data.updates %}
-    {% assign MAX_SIZE = 5 %}
-    {% assign sum = 0 %}
-    {% assign sort_list = "" | split: "" %}
 
-    {% for entry in site.data.updates %}
+    {% include update_list.html %}
-      {% capture elem %}
-        {{- entry.lastmod -}}::{{- entry.filename -}}
-      {% endcapture %}
-      {% assign sort_list = sort_list | push: elem %}
-    {% endfor %}
 
-    {% assign sort_list = sort_list | sort | reverse %}
+    {% if update_list.size > 0 %}
-
-    {% if sort_list.size > 0 %}
 
     <div id="access-lastmod" class="post">
       <h3 data-toc-skip>
@@ -32,7 +22,7 @@
       </h3>
       <ul class="post-content pl-0 pb-1 ml-1 mt-2">
 
-      {% for item in sort_list %}
+      {% for item in update_list %}
         {% assign post_url = item | split: "::" | last | prepend: "/posts/" | append: "/" %}
         {% assign post = site.posts | where: "url", post_url | first %}
 
@@ -60,7 +50,11 @@
         {{- site.data.label.panel.trending_tags -}}
       </h3>
       <div class="d-flex flex-wrap mt-3 mb-1 mr-3">
-       {% include trending-tags.html %}
+      {% include trending-tags.html %}
+      {% for tag in trending_tags %}
+        {% capture url %}/tags/{{ tag | downcase | url_encode }}/{% endcapture %}
+        <a class="post-tag" href="{{ url | relative_url }}">{{ tag | replace: '-', ' ' }}</a>
+       {% endfor %}
       </div>
     </div>
 

_includes/trending-tags.html

@@ -1,27 +1,31 @@
-<!--
+{% comment %}
   The trending tags list
   v2.0
   https://github.com/cotes2020/jekyll-theme-chirpy
   © 2019 Cotes Chung
   MIT Licensed
--->
+{% endcomment %}
 
 {% assign MAX = 10 %}
 
 {% capture tags_array %}
   {% for tag in site.tags %}
-    {{ tag[1] | size }}:{{ tag[0] | replace: ' ', '-' }}
+    {{ tag[1] | size }}::{{ tag[0] | replace: ' ', '-' }}
   {% endfor %}
 {% endcapture %}
 
-{% assign trends = tags_array | split: " " | sort | reverse %}
+{% assign all_tags = tags_array | split: " " | sort | reverse %}
 {% assign count = 0 %}
 
-{% for trend in trends %}
+{% assign trending_tags = "" | split: "" %}
+
+{% for iter in all_tags %}
   {% assign count = count | plus: 1 %}
-  {% assign tag = trend | split: ":" | last  %}
+  {% assign tag = iter | split: "::" | last  %}
-  <a class="post-tag" href="{{ site.baseurl }}/tags/{{ tag | downcase | url_encode }}/">{{ tag | replace: '-', ' ' }}</a>
+
+  {% assign trending_tags = trending_tags | push: tag %}
+
   {% if count >= MAX %}
     {% break %}
   {% endif %}
-{% endfor %}
+{% endfor %}

_includes/update_list.html

@@ -0,0 +1,21 @@
+{% comment %}
+  Get the last 5 post from lastmod list.
+  v2.2
+  https://github.com/cotes2020/jekyll-theme-chirpy
+  © 2020 Cotes Chung
+  MIT License
+{% endcomment %}
+
+{% assign MAX_SIZE = 5 %}
+{% assign sum = 0 %}
+{% assign update_list = "" | split: "" %}
+
+{% for entry in site.data.updates %}
+  {% capture elem %}
+    {{- entry.lastmod -}}::{{- entry.filename -}}
+  {% endcapture %}
+
+  {% assign update_list = update_list | push: elem %}
+{% endfor %}
+
+{% assign update_list = update_list | sort | reverse %}

app.js

@@ -0,0 +1,12 @@
+---
+layout: compress
+# Chirpy v2.2
+# https://github.com/cotes2020/jekyll-theme-chirpy
+# © 2020 Cotes Chung
+# MIT Licensed
+---
+
+/* Registering Service Worker */
+if('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('{{ "/sw.js" | relative_url }}');
+};

assets/data/cache-list.js

@@ -0,0 +1,112 @@
+---
+# The list to be cached by PWA
+# Chirpy v2.2
+# https://github.com/cotes2020/jekyll-theme-chirpy
+# © 2020 Cotes Chung
+# MIT Licensed
+---
+
+var cacheList = [
+
+  /*--- CSS ---*/
+
+  '{{ "/assets/css/home.css" | relative_url }}',
+  '{{ "/assets/css/categories.css" | relative_url }}',
+  '{{ "/assets/css/tags.css" | relative_url }}',
+  '{{ "/assets/css/archives.css" | relative_url }}',
+  '{{ "/assets/css/page.css" | relative_url }}',
+  '{{ "/assets/css/post.css" | relative_url }}',
+  '{{ "/assets/css/category-tag.css" | relative_url }}',
+  '{{ "/assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.css" | relative_url }}',
+
+  /*--- Javascripts ---*/
+
+  '{{ "/assets/js/dist/commons.js" | relative_url }}',
+  '{{ "/assets/js/dist/timeago.min.js" | relative_url }}',
+  '{{ "/assets/js/dist/category-collapse.min.js" | relative_url }}',
+  '{{ "/assets/js/dist/toc.min.js" | relative_url }}',
+  '{{ "/assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.js" | relative_url }}',
+
+  /*--- HTML ---*/
+
+  /* Tabs */
+  {% for tab in site.data.tabs %}
+    {% capture item %}
+      {%- unless tab.name == 'Home' -%}
+        /tabs/{{ tab.name | downcase }}
+      {%- endunless -%}
+      {{- "/" -}}
+    {% endcapture %}
+    '{{ item | relative_url }}',
+  {% endfor %}
+
+  /* The posts of first Home page and recent update list */
+  {% assign post_list = "" | split: "" %}
+  {% assign sum = 0 %}
+
+  {% for post in site.posts %}
+    {% assign post_list = post_list | push: post.url %}
+    {% assign sum = sum | plus: 1 %}
+    {% if sum >= site.paginate %}
+      {% break %}
+    {% endif %}
+  {% endfor %}
+
+  {% include update_list.html %}
+  {% for item in update_list %}
+    {% assign url = item | split: "::" | last | prepend: "/posts/" | append: "/" %}
+    {% assign post_list = post_list | push: url %}
+  {% endfor %}
+
+  {% assign post_list = post_list | uniq %}
+
+  {% for url in post_list %}
+    '{{ url }}',
+  {% endfor %}
+
+  /* Trending tags */
+  {% include trending-tags.html %}
+  {% for tag in trending_tags %}
+    {% capture tag_url %}/tags/{{ tag | downcase | url_encode }}/{% endcapture %}
+    '{{ tag_url | relative_url }}',
+  {% endfor %}
+
+  /*--- Icons ---*/
+
+  {%- capture icon_url -%}
+    {{ "/assets/img/favicons" | relative_url }}
+  {%- endcapture -%}
+  '{{ icon_url }}/favicon.ico',
+  '{{ icon_url }}/apple-icon.png',
+  '{{ icon_url }}/apple-icon-precomposed.png',
+  '{{ icon_url }}/apple-icon-57x57.png',
+  '{{ icon_url }}/apple-icon-60x60.png',
+  '{{ icon_url }}/apple-icon-72x72.png',
+  '{{ icon_url }}/apple-icon-76x76.png',
+  '{{ icon_url }}/apple-icon-114x114.png',
+  '{{ icon_url }}/apple-icon-120x120.png',
+  '{{ icon_url }}/apple-icon-144x144.png',
+  '{{ icon_url }}/apple-icon-152x152.png',
+  '{{ icon_url }}/apple-icon-180x180.png',
+  '{{ icon_url }}/android-icon-192x192.png',
+  '{{ icon_url }}/favicon-32x32.png',
+  '{{ icon_url }}/favicon-96x96.png',
+  '{{ icon_url }}/favicon-16x16.png',
+  '{{ icon_url }}/ms-icon-144x144.png',
+  '{{ icon_url }}/manifest.json',
+  '{{ icon_url }}/browserconfig.xml',
+
+  /*--- Others ---*/
+
+  {% if site.google_analytics.pv.enabled %}
+    '{{ "/assets/data/pv-data.json" | relative_url }}',
+    '{{ "/assets/lib/countUp.min.js" | relative_url }}',
+    '{{ "/assets/js/dist/pageviews.min.js" | relative_url }}',
+  {% endif %}
+
+  '{{ "/assets/data/search.json" | relative_url }}',
+  '{{ "/404.html" | relative_url }}',
+
+  '{{ "/app.js" | relative_url }}',
+  '{{ "/sw.js" | relative_url }}'
+];

assets/data/pv-data.json

@@ -1,5 +1,4 @@
 ---
-layout: compress
 ---
 
 const proxyData = '{"url": "{{ site.google_analytics.pv.proxy_endpoint }}"}';

assets/data/search.json

@@ -1,5 +1,4 @@
 ---
-layout: compress
 ---
 
 [

assets/img/favicons/manifest.json

@@ -1,51 +1,58 @@
 ---
 layout: compress
-
+#
 # A part of the Favicons
-# v2.0
+# Chirpy v2.0
 # https://github.com/cotes2020/jekyll-theme-chirpy
 # © 2019 Cotes Chung
 # MIT License
 ---
 
+{% assign icon_url = "/assets/img/favicons/" | relative_url %}
+
 {
- "name": "App",
+  "name": "{{ site.title }}",
- "icons": [
+  "short_name": "{{ site.title }}",
-  {
+  "description": "{{ site.description }}",
-   "src": "{{ site.baseurl }}\/assets\/img\/favicons\/android-icon-36x36.png",
+  "icons": [
-   "sizes": "36x36",
+    {
-   "type": "image\/png",
+      "src": "{{ icon_url }}/android-icon-36x36.png",
-   "density": "0.75"
+      "sizes": "36x36",
-  },
+      "type": "image/png",
-  {
+      "density": "0.75"
-   "src": "{{ site.baseurl }}\/assets\/img\/favicons\/android-icon-48x48.png",
+    },
-   "sizes": "48x48",
+    {
-   "type": "image\/png",
+      "src": "{{ icon_url }}/android-icon-48x48.png",
-   "density": "1.0"
+      "sizes": "48x48",
-  },
+      "type": "image/png",
-  {
+      "density": "1.0"
-   "src": "{{ site.baseurl }}\/assets\/img\/favicons\/android-icon-72x72.png",
+    },
-   "sizes": "72x72",
+    {
-   "type": "image\/png",
+      "src": "{{ icon_url }}/android-icon-72x72.png",
-   "density": "1.5"
+      "sizes": "72x72",
-  },
+      "type": "image/png",
-  {
+      "density": "1.5"
-   "src": "{{ site.baseurl }}\/assets\/img\/favicons\/android-icon-96x96.png",
+    },
-   "sizes": "96x96",
+    {
-   "type": "image\/png",
+      "src": "{{ icon_url }}/android-icon-96x96.png",
-   "density": "2.0"
+      "sizes": "96x96",
-  },
+      "type": "image/png",
-  {
+      "density": "2.0"
-   "src": "{{ site.baseurl }}\/assets\/img\/favicons\/android-icon-144x144.png",
+    },
-   "sizes": "144x144",
+    {
-   "type": "image\/png",
+      "src": "{{ icon_url }}/android-icon-144x144.png",
-   "density": "3.0"
+      "sizes": "144x144",
-  },
+      "type": "image/png",
-  {
+      "density": "3.0"
-   "src": "{{ site.baseurl }}\/assets\/img\/favicons\/android-icon-192x192.png",
+    },
-   "sizes": "192x192",
+    {
-   "type": "image\/png",
+      "src": "{{ icon_url }}/android-icon-192x192.png",
-   "density": "4.0"
+      "sizes": "192x192",
-  }
+      "type": "image/png",
- ]
+      "density": "4.0"
-}
+    }],
+    "start_url": "{{ '/index.html' | relative_url }}",
+    "display": "fullscreen",
+    "theme_color": "#2a1e6b",
+    "background_color": "white"
+}

sw.js

@@ -0,0 +1,49 @@
+---
+layout: compress
+# Chirpy v2.2
+# https://github.com/cotes2020/jekyll-theme-chirpy
+# © 2020 Cotes Chung
+# MIT Licensed
+---
+
+self.importScripts('{{ "/assets/data/cache-list.js" | relative_url }}');
+
+var cacheName = 'chirpy-{{ "now" | date: "%Y%m%d.%H%M" }}';
+
+self.addEventListener('install', (e) => {
+  self.skipWaiting();
+  e.waitUntil(
+    caches.open(cacheName).then((cache) => {
+      return cache.addAll(cacheList);
+    })
+  );
+});
+
+
+self.addEventListener('fetch', (e) => {
+  e.respondWith(
+    caches.match(e.request).then((r) => {
+      /* console.log('[Service Worker] Fetching resource: ' + e.request.url); */
+      return r || fetch(e.request).then((response) => {
+        return caches.open(cacheName).then((cache) => {
+          /* console.log('[Service Worker] Caching new resource: ' + e.request.url); */
+          cache.put(e.request, response.clone());
+          return response;
+        });
+      });
+    })
+  );
+});
+
+
+self.addEventListener('activate', (e) => {
+  e.waitUntil(
+    caches.keys().then((keyList) => {
+          return Promise.all(keyList.map((key) => {
+        if(key !== cacheName) {
+          return caches.delete(key);
+        }
+      }));
+    })
+  );
+});