New feature: PWA

This commit is contained in:
Cotes Chung 2020-05-10 00:28:18 +08:00
parent b64598358d
commit d8e45694bd
10 changed files with 266 additions and 66 deletions

View file

@ -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>

View file

@ -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 %}
{% capture elem %}
{{- entry.lastmod -}}::{{- entry.filename -}}
{% endcapture %}
{% assign sort_list = sort_list | push: elem %}
{% endfor %}
{% include update_list.html %}
{% assign sort_list = sort_list | sort | reverse %}
{% if sort_list.size > 0 %}
{% if update_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>

View file

@ -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 %}
<a class="post-tag" href="{{ site.baseurl }}/tags/{{ tag | downcase | url_encode }}/">{{ tag | replace: '-', ' ' }}</a>
{% assign tag = iter | split: "::" | last %}
{% assign trending_tags = trending_tags | push: tag %}
{% if count >= MAX %}
{% break %}
{% endif %}
{% endfor %}
{% endfor %}

View file

@ -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 %}

12
app.js Normal file
View file

@ -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 }}');
};

112
assets/data/cache-list.js Normal file
View file

@ -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 }}'
];

View file

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

View file

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

View file

@ -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",
"icons": [
{
"src": "{{ site.baseurl }}\/assets\/img\/favicons\/android-icon-36x36.png",
"sizes": "36x36",
"type": "image\/png",
"density": "0.75"
},
{
"src": "{{ site.baseurl }}\/assets\/img\/favicons\/android-icon-48x48.png",
"sizes": "48x48",
"type": "image\/png",
"density": "1.0"
},
{
"src": "{{ site.baseurl }}\/assets\/img\/favicons\/android-icon-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "{{ site.baseurl }}\/assets\/img\/favicons\/android-icon-96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "{{ site.baseurl }}\/assets\/img\/favicons\/android-icon-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},
{
"src": "{{ site.baseurl }}\/assets\/img\/favicons\/android-icon-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
}
]
}
"name": "{{ site.title }}",
"short_name": "{{ site.title }}",
"description": "{{ site.description }}",
"icons": [
{
"src": "{{ icon_url }}/android-icon-36x36.png",
"sizes": "36x36",
"type": "image/png",
"density": "0.75"
},
{
"src": "{{ icon_url }}/android-icon-48x48.png",
"sizes": "48x48",
"type": "image/png",
"density": "1.0"
},
{
"src": "{{ icon_url }}/android-icon-72x72.png",
"sizes": "72x72",
"type": "image/png",
"density": "1.5"
},
{
"src": "{{ icon_url }}/android-icon-96x96.png",
"sizes": "96x96",
"type": "image/png",
"density": "2.0"
},
{
"src": "{{ icon_url }}/android-icon-144x144.png",
"sizes": "144x144",
"type": "image/png",
"density": "3.0"
},
{
"src": "{{ icon_url }}/android-icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"density": "4.0"
}],
"start_url": "{{ '/index.html' | relative_url }}",
"display": "fullscreen",
"theme_color": "#2a1e6b",
"background_color": "white"
}

49
sw.js Normal file
View file

@ -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);
}
}));
})
);
});