refactor(pwa): revert to JS and Liquid mixing

The gem package won't be able to pass `/sw.min.js` to the user end

Author: cotes2020

.gitignore

@@ -18,6 +18,4 @@ package-lock.json
 .idea
 
 # Misc
-*.map
-sw.min.js
 assets/js/dist

_includes/head.html

@@ -50,15 +50,6 @@
 
   {{ seo_tags }}
 
-  <!-- PWA cache settings -->
-  <meta
-    name="pwa-cache"
-    content="{{ site.pwa.cache.enabled | default: 'false' }}"
-    {%- if site.baseurl and site.baseurl != empty -%}
-      data-baseurl="{{ site.baseurl }}"
-    {%- endif -%}
-  >
-
   <title>
     {%- unless page.layout == 'home' -%}
       {{ page.title | append: ' | ' }}

_javascript/pwa/app.js assets/js/pwa/app.js_javascript/pwa/app.js renamed to assets/js/pwa/app.js

@@ -1,22 +1,18 @@
-/* PWA loader */
+---
+layout: compress
+permalink: /assets/js/dist/:basename.min.js
+---
 
 if ('serviceWorker' in navigator) {
-  const meta = document.querySelector('meta[name="pwa-cache"]');
-  const isEnabled = meta.content === 'true';
+  const isEnabled = '{{ site.pwa.enabled }}' === 'true';
 
   if (isEnabled) {
-    let swUrl = '/sw.min.js';
-    const baseUrl = meta.getAttribute('data-baseurl');
-
-    if (baseUrl !== null) {
-      swUrl = `${baseUrl}${swUrl}?baseurl=${encodeURIComponent(baseUrl)}`;
-    }
-
+    const swUrl = '{{ '/sw.min.js' | relative_url }}';
     const $notification = $('#notification');
     const $btnRefresh = $('#notification .toast-body>button');
 
     navigator.serviceWorker.register(swUrl).then((registration) => {
-      // In case the user ignores the notification
+      {% comment %}In case the user ignores the notification{% endcomment %}
       if (registration.waiting) {
         $notification.toast('show');
       }
@@ -41,7 +37,7 @@ if ('serviceWorker' in navigator) {
 
     let refreshing = false;
 
-    // Detect controller change and refresh all the opened tabs
+    {% comment %}Detect controller change and refresh all the opened tabs{% endcomment %}
     navigator.serviceWorker.addEventListener('controllerchange', () => {
       if (!refreshing) {
         window.location.reload();

_javascript/pwa/sw.js assets/js/pwa/sw.js_javascript/pwa/sw.js renamed to assets/js/pwa/sw.js

@@ -1,10 +1,10 @@
-/* PWA service worker */
+---
+layout: compress
+permalink: /:basename.min.js
+# PWA service worker
+---
 
-const swconfPath = '/assets/js/data/swconf.js';
-const params = new URL(location).searchParams;
-const swconfUrl = params.has('baseurl')
-  ? `${params.get('baseurl')}${swconfPath}`
-  : swconfPath;
+const swconfUrl = '{{ '/assets/js/data/swconf.js' | relative_url }}';
 
 importScripts(swconfUrl);
 const purge = swconf.purge;
@@ -88,7 +88,7 @@ self.addEventListener('fetch', (event) => {
           return response;
         }
 
-        // See : <https://developers.google.com/web/fundamentals/primers/service-workers#cache_and_return_requests>
+        {% comment %}See: <https://developers.google.com/web/fundamentals/primers/service-workers#cache_and_return_requests>{% endcomment %}
         let responseToCache = response.clone();
 
         caches.open(swconf.cacheName).then((cache) => {

jekyll-theme-chirpy.gemspec

@@ -11,7 +11,7 @@ Gem::Specification.new do |spec|
   spec.license       = "MIT"
 
   spec.files         = `git ls-files -z`.split("\x0").select { |f|
-    f.match(%r!^((_(includes|layouts|sass|(data\/(locales|origin)))|assets)\/|sw|README|LICENSE)!i)
+    f.match(%r!^((_(includes|layouts|sass|(data\/(locales|origin)))|assets)\/|README|LICENSE)!i)
   }
 
   spec.metadata = {

package.json

@@ -13,9 +13,9 @@
   },
   "homepage": "https://github.com/cotes2020/jekyll-theme-chirpy/",
   "scripts": {
-    "prebuild": "npx rimraf assets/js/dist sw.min.js*",
+    "prebuild": "npx rimraf assets/js/dist",
     "build": "NODE_ENV=production npx rollup -c --bundleConfigAsCjs",
-    "prewatch": "npx rimraf assets/js/dist sw.min.js*",
+    "prewatch": "npx rimraf assets/js/dist",
     "watch": "npx rollup -c --bundleConfigAsCjs -w",
     "test": "npx stylelint _sass/**/*.scss",
     "fixlint": "npm run test -- --fix"

rollup.config.js

@@ -7,25 +7,17 @@ const SRC_DEFAULT = '_javascript';
 const DIST_DEFAULT = 'assets/js/dist';
 const isProd = process.env.NODE_ENV === 'production';
 
-function build(filename, opts) {
-  let src = SRC_DEFAULT;
-  let dist = DIST_DEFAULT;
-
-  if (typeof opts !== 'undefined') {
-    src = opts.src || src;
-    dist = opts.dist || dist;
-  }
-
+function build(filename) {
   return {
-    input: [`${src}/${filename}.js`],
+    input: [`${SRC_DEFAULT}/${filename}.js`],
     output: {
-      file: `${dist}/${filename}.min.js`,
+      file: `${DIST_DEFAULT}/${filename}.min.js`,
       format: 'iife',
       name: 'Chirpy',
       sourcemap: !isProd
     },
     watch: {
-      include: `${src}/**`
+      include: `${SRC_DEFAULT}/**`
     },
     plugins: [
       babel({
@@ -50,7 +42,5 @@ export default [
   build('categories'),
   build('page'),
   build('post'),
-  build('misc'),
-  build('app', { src: `${SRC_DEFAULT}/pwa` }),
-  build('sw', { src: `${SRC_DEFAULT}/pwa`, dist: '.' })
+  build('misc')
 ];

tools/init

@@ -103,7 +103,7 @@ init_files() {
   npm i && npm run build
 
   # track the js output
-  _sedi "/^assets.*\/dist/d;/^sw.*\.js/d" .gitignore
+  _sedi "/^assets.*\/dist/d" .gitignore
 }
 
 commit() {

tools/release

@@ -27,7 +27,6 @@ NODE_CONFIG="package.json"
 CHANGE_LOG="docs/CHANGELOG.md"
 
 JS_DIST="assets/js/dist"
-PWA_SW="sw.min.js"
 BACKUP_PATH="$(mktemp -d)"
 
 FILES=(
@@ -159,7 +158,7 @@ build_gem() {
   rm -f ./*.gem
 
   npm run build
-  git add "$JS_DIST" "$PWA_SW" -f # add JS distribution files to gem
+  git add "$JS_DIST" -f # add JS distribution files to gem
   gem build "$GEM_SPEC"
   cp "$JS_DIST"/* "$BACKUP_PATH"