mirror of
https://github.com/cotes2020/jekyll-theme-chirpy.git
synced 2025-12-18 05:41:31 +00:00
feat: add pwa.cache.* option to precisely control caching (#1501)
This commit is contained in:
Cotes Chung
@@ -1,49 +0,0 @@
|
||||
---
|
||||
layout: compress
|
||||
# The list to be cached by PWA
|
||||
---
|
||||
|
||||
const resource = [
|
||||
/* --- CSS --- */
|
||||
'{{ "/assets/css/:THEME.css" | replace: ':THEME', site.theme | relative_url }}',
|
||||
|
||||
/* --- PWA --- */
|
||||
'{{ "/app.js" | relative_url }}',
|
||||
'{{ "/sw.js" | relative_url }}',
|
||||
|
||||
/* --- HTML --- */
|
||||
'{{ "/index.html" | relative_url }}',
|
||||
'{{ "/404.html" | relative_url }}',
|
||||
|
||||
{% for tab in site.tabs %}
|
||||
'{{ tab.url | relative_url }}',
|
||||
{% endfor %}
|
||||
|
||||
/* --- Favicons & compressed JS --- */
|
||||
{% assign cache_list = site.static_files | where: 'swcache', true %}
|
||||
{% for file in cache_list %}
|
||||
'{{ file.path | relative_url }}'{%- unless forloop.last -%},{%- endunless -%}
|
||||
{% endfor %}
|
||||
];
|
||||
|
||||
/* The request url with below domain will be cached */
|
||||
const allowedDomains = [
|
||||
{% if site.google_analytics.id != empty and site.google_analytics.id %}
|
||||
'www.googletagmanager.com',
|
||||
'www.google-analytics.com',
|
||||
{% endif %}
|
||||
|
||||
'{{ site.url | split: "//" | last }}',
|
||||
|
||||
{% if site.img_cdn contains '//' and site.img_cdn %}
|
||||
'{{ site.img_cdn | split: '//' | last | split: '/' | first }}',
|
||||
{% endif %}
|
||||
|
||||
'fonts.gstatic.com',
|
||||
'fonts.googleapis.com',
|
||||
'cdn.jsdelivr.net',
|
||||
'polyfill.io'
|
||||
];
|
||||
|
||||
/* Requests that include the following path will be banned */
|
||||
const denyUrls = [];
|
||||
51
assets/js/data/swconf.js
Normal file
51
assets/js/data/swconf.js
Normal file
@@ -0,0 +1,51 @@
|
||||
---
|
||||
layout: compress
|
||||
permalink: '/:path/swconf.js'
|
||||
# Note that this file will be fetched by the ServiceWorker, so it will not be cached.
|
||||
---
|
||||
|
||||
const swconf = {
|
||||
{% if site.pwa.cache.enabled %}
|
||||
cacheName: 'chirpy-{{ "now" | date: "%s" }}',
|
||||
|
||||
{%- comment -%} Resources added to the cache during PWA installation. {%- endcomment -%}
|
||||
resources: [
|
||||
'{{ "/assets/css/:THEME.css" | replace: ':THEME', site.theme | relative_url }}',
|
||||
'{{ "/" | relative_url }}',
|
||||
{% for tab in site.tabs %}
|
||||
'{{- tab.url | relative_url -}}',
|
||||
{% endfor %}
|
||||
|
||||
{% assign cache_list = site.static_files | where: 'swcache', true %}
|
||||
{% for file in cache_list %}
|
||||
'{{ file.path | relative_url }}'{%- unless forloop.last -%},{%- endunless -%}
|
||||
{% endfor %}
|
||||
],
|
||||
|
||||
{%- comment -%} The request url with below domain will be cached. {%- endcomment -%}
|
||||
allowHosts: [
|
||||
{% if site.img_cdn and site.img_cdn contains '//' %}
|
||||
'{{ site.img_cdn | split: '//' | last | split: '/' | first }}',
|
||||
{% endif %}
|
||||
|
||||
{%- unless site.assets.self_host.enabled -%}
|
||||
{% for cdn in site.data.origin["cors"].cdns %}
|
||||
'{{ cdn.url | split: "//" | last }}'
|
||||
{%- unless forloop.last -%},{%- endunless -%}
|
||||
{% endfor %}
|
||||
{% endunless %}
|
||||
],
|
||||
|
||||
{%- comment -%} The request url with below path will not be cached. {%- endcomment -%}
|
||||
denyPaths: [
|
||||
{% for path in site.pwa.cache.deny_paths %}
|
||||
{% unless path == empty %}
|
||||
'{{ path | relative_url }}'{%- unless forloop.last -%},{%- endunless -%}
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
],
|
||||
purge: false
|
||||
{% else %}
|
||||
purge: true
|
||||
{% endif %}
|
||||
};
|
||||
@@ -1,47 +0,0 @@
|
||||
---
|
||||
layout: compress
|
||||
permalink: '/app.js'
|
||||
---
|
||||
|
||||
const $notification = $('#notification');
|
||||
const $btnRefresh = $('#notification .toast-body>button');
|
||||
|
||||
if ('serviceWorker' in navigator) {
|
||||
/* Registering Service Worker */
|
||||
navigator.serviceWorker.register('{{ "/sw.js" | relative_url }}')
|
||||
.then(registration => {
|
||||
|
||||
/* in case the user ignores the notification */
|
||||
if (registration.waiting) {
|
||||
$notification.toast('show');
|
||||
}
|
||||
|
||||
registration.addEventListener('updatefound', () => {
|
||||
registration.installing.addEventListener('statechange', () => {
|
||||
if (registration.waiting) {
|
||||
if (navigator.serviceWorker.controller) {
|
||||
$notification.toast('show');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$btnRefresh.click(() => {
|
||||
if (registration.waiting) {
|
||||
registration.waiting.postMessage('SKIP_WAITING');
|
||||
}
|
||||
$notification.toast('hide');
|
||||
});
|
||||
});
|
||||
|
||||
let refreshing = false;
|
||||
|
||||
/* Detect controller change and refresh all the opened tabs */
|
||||
navigator.serviceWorker.addEventListener('controllerchange', () => {
|
||||
if (!refreshing) {
|
||||
window.location.reload();
|
||||
refreshing = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,89 +0,0 @@
|
||||
---
|
||||
layout: compress
|
||||
permalink: '/sw.js'
|
||||
# PWA service worker
|
||||
---
|
||||
|
||||
self.importScripts('{{ "/assets/js/data/swcache.js" | relative_url }}');
|
||||
|
||||
const cacheName = 'chirpy-{{ "now" | date: "%s" }}';
|
||||
|
||||
function verifyDomain(url) {
|
||||
for (const domain of allowedDomains) {
|
||||
const regex = RegExp(`^http(s)?:\/\/${domain}\/`);
|
||||
if (regex.test(url)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function isExcluded(url) {
|
||||
for (const item of denyUrls) {
|
||||
if (url === item) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
self.addEventListener('install', (event) => {
|
||||
event.waitUntil(
|
||||
caches.open(cacheName).then((cache) => {
|
||||
return cache.addAll(resource);
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
self.addEventListener('activate', (event) => {
|
||||
event.waitUntil(
|
||||
caches.keys().then((keyList) => {
|
||||
return Promise.all(
|
||||
keyList.map((key) => {
|
||||
if (key !== cacheName) {
|
||||
return caches.delete(key);
|
||||
}
|
||||
})
|
||||
);
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
self.addEventListener('message', (event) => {
|
||||
if (event.data === 'SKIP_WAITING') {
|
||||
self.skipWaiting();
|
||||
}
|
||||
});
|
||||
|
||||
self.addEventListener('fetch', (event) => {
|
||||
event.respondWith(
|
||||
caches.match(event.request).then((response) => {
|
||||
if (response) {
|
||||
return response;
|
||||
}
|
||||
|
||||
return fetch(event.request).then((response) => {
|
||||
const url = event.request.url;
|
||||
|
||||
if (
|
||||
event.request.method !== 'GET' ||
|
||||
!verifyDomain(url) ||
|
||||
isExcluded(url)
|
||||
) {
|
||||
return response;
|
||||
}
|
||||
|
||||
/* see: <https://developers.google.com/web/fundamentals/primers/service-workers#cache_and_return_requests> */
|
||||
let responseToCache = response.clone();
|
||||
|
||||
caches.open(cacheName).then((cache) => {
|
||||
/* console.log('[sw] Caching new resource: ' + event.request.url); */
|
||||
cache.put(event.request, responseToCache);
|
||||
});
|
||||
|
||||
return response;
|
||||
});
|
||||
})
|
||||
);
|
||||
});
|
||||
@@ -1,12 +0,0 @@
|
||||
---
|
||||
layout: compress
|
||||
permalink: '/unregister.js'
|
||||
---
|
||||
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.getRegistrations().then((registrations) => {
|
||||
for (let reg of registrations) {
|
||||
reg.unregister();
|
||||
}
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user