plugin for PWA

This commit is contained in:
sakrecoer 2020-08-05 16:56:35 +02:00
parent ec5f87cbeb
commit a120fc8181
5 changed files with 61 additions and 72 deletions

View file

@ -5,4 +5,5 @@ gem 'jekyll', '4.0.0'
group :jekyll_plugins do
gem 'jekyll-sitemap', '1.4.0'
gem 'jekyll-last-modified-at','1.1.0'
gem 'jekyll-pwa-plugin'
end

View file

@ -12,7 +12,7 @@ GEM
ffi (1.13.1)
forwardable-extended (2.6.0)
http_parser.rb (0.6.0)
i18n (1.8.4)
i18n (1.8.5)
concurrent-ruby (~> 1.0)
jekyll (4.0.0)
addressable (~> 2.4)
@ -32,6 +32,7 @@ GEM
jekyll-last-modified-at (1.1.0)
jekyll (>= 3.7, < 5.0)
posix-spawn (~> 0.3.9)
jekyll-pwa-plugin (2.2.3)
jekyll-sass-converter (2.1.0)
sassc (> 2.0.1, < 3.0)
jekyll-sitemap (1.4.0)
@ -69,6 +70,7 @@ PLATFORMS
DEPENDENCIES
jekyll (= 4.0.0)
jekyll-last-modified-at (= 1.1.0)
jekyll-pwa-plugin
jekyll-sitemap (= 1.4.0)
BUNDLED WITH

View file

@ -142,3 +142,21 @@ accent1: '#38ff59'
accent1-alt: 'rgba(56, 255, 89, 0.75)'
accent2: '#8d3ed8'
accent2-alt: 'rgba(141, 62, 216, 0.75)'
plugins:
- jekyll-pwa-plugin
pwa:
enabled: false # Optional
sw_src_filepath: service-worker.js # Optional
sw_dest_filename: service-worker.js # Optional
dest_js_directory: assets/js # Required
precache_recent_posts_num: 5 # Optional
precache_glob_directory: / # Optional
precache_glob_patterns: # Optional
- "{js,css,fonts,albums}/**/*.{js,css,eot,svg,ttf,woff}"
- "*.{mp3,jpeg,mp4,webm}"
- index.html
precache_glob_ignores: # Optional
- sw-register.js
- "fonts/**/*"

View file

@ -16,46 +16,9 @@
<link rel="icon" type="image/png" href="{{ site.url }}/touch-icon.png" sizes="192x192">
<link rel="shortcut icon" href="{{ site.url }}{{ site.icon }}" type="image/png" />
<noscript><link rel="stylesheet" href="{{ relBase }}/assets/css/noscripts-20200805.css" /></noscript>
<link rel="manifest" href="manifest.json" />
<link rel="manifest" href="{{ site.url }}/manifest.json" />
<meta name="theme-color" content="{{ site.bg }}"/>
<script type="text/javascript">
// Registration of service worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register("/service-worker.js").then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
});
}
else{
console.log('Service Workers not supported');
}
// Installation of service worker
self.addEventListener('install', function(event) {
// Perform install steps
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
return cache.addAll(urlsToCache);
})
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request, {ignoreSearch:true}).then(response => {
return response || fetch(event.request);
})
);
});
</script>
</head>
<body>

View file

@ -1,36 +1,41 @@
---
layout: nil
---
var urlsToCache = [];
// service-worker.js
var CACHE_NAME = 'Setto-cache-v1';
// set names for both precache & runtime cache
workbox.core.setCacheNameDetails({
prefix: 'SettoPWA',
suffix: 'v1',
precache: 'precache',
runtime: 'runtime-cache'
});
// Cache posts
// Limits the number of posts that gets cached to 3
// Reads a piece of front-matter in each post that directs the second loop to the folder where the assets are held
{% for post in site.posts %}
urlsToCache.push("{{ post.url }}index.html")
{% endfor %}
// let Service Worker take control of pages ASAP
workbox.skipWaiting();
workbox.clientsClaim();
// Cache pages
// Do nothing if it's either an AMP page (as these are served via Googles cache) or the blog page
// Fallback to the offline pages for these
{% for page in site.html_pages %}{% unless page.sitemap == false %}
urlsToCache.push("{{ page.url }}index.html")
{% endunless %}{% endfor %}
// let Workbox handle our precache list
workbox.precaching.precacheAndRoute(self.__precacheManifest);
// Cache assets
// Removed assets/posts because I only want assets from the most recent posts getting cached
{% for file in site.static_files %}{% unless file.path contains 'albums' %}
urlsToCache.push("{{ file.path }}")
{% endunless %}{% endfor %}
// Cache mp3 and cover art
{% for track in site.tracks %}
urlsToCache.push("{{ track.url }}")
urlsToCache.push("{{ site.mediaurl }}/{{ track.slug }}.mp3")
urlsToCache.push("{{ site.mediaurl }}/{{ track.slug }}.jpeg")
{% endfor %}
// use `networkFirst` strategy for `*.html`, like all my posts
workbox.routing.registerRoute(
/\.html$/,
workbox.strategies.networkFirst()
);
// use `cacheFirst` strategy for images
workbox.routing.registerRoute(
/assets\/(img|icons|css)/,
workbox.strategies.cacheFirst()
);
workbox.routing.registerRoute(
/videos/,
workbox.strategies.cacheFirst()
);
workbox.routing.registerRoute(
/images\/(posts|pages)/,
workbox.strategies.cacheFirst()
);
// third party files
workbox.routing.registerRoute(
/^https?:\/\/media.basspistol.com/,
workbox.strategies.staleWhileRevalidate()
);