feat: add option to turn off PWA (#527)

Author: cotes2020

_config.yml

@@ -115,6 +115,9 @@ assets:
     # only works if `assets.self_host.enabled` is 'true'
     env:          # [development|production]
 
+pwa:
+  enabled: true   # the option for PWA feature
+
 paginate: 10
 
 # ------------ The following options are not recommended to be modified ------------------

_includes/js-selector.html

@@ -90,7 +90,11 @@
 
 {% if jekyll.environment == 'production' %}
   <!-- PWA -->
-  <script defer src="{{ '/app.js' | relative_url }}"></script>
+  {% if site.pwa.enabled %}
+    <script defer src="{{ '/app.js' | relative_url }}"></script>
+  {% else %}
+    <script defer src="{{ '/unregister.js' | relative_url }}"></script>
+  {% endif %}
 
   <!-- GA -->
   {% if site.google_analytics.id != empty and site.google_analytics.id %}

_layouts/default.html

@@ -48,20 +48,22 @@
       <i class="fas fa-angle-up"></i>
     </a>
 
-    <div id="notification" class="toast" role="alert" aria-live="assertive" aria-atomic="true"
-      data-animation="true" data-autohide="false">
-      <div class="toast-header">
-        <button type="button" class="ml-2 ml-auto close" data-dismiss="toast" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
-        </button>
+    {% if site.pwa.enabled %}
+      <div id="notification" class="toast" role="alert" aria-live="assertive" aria-atomic="true"
+        data-animation="true" data-autohide="false">
+        <div class="toast-header">
+          <button type="button" class="ml-2 ml-auto close" data-dismiss="toast" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="toast-body text-center pt-0">
+          <p class="pl-2 pr-2 mb-3">{{ site.data.locales[lang].notification.update_found }}</p>
+          <button type="button" class="btn btn-primary" aria-label="Update">
+            {{ site.data.locales[lang].notification.update }}
+          </button>
+        </div>
       </div>
-      <div class="toast-body text-center pt-0">
-        <p class="pl-2 pr-2 mb-3">{{ site.data.locales[lang].notification.update_found }}</p>
-        <button type="button" class="btn btn-primary" aria-label="Update">
-          {{ site.data.locales[lang].notification.update }}
-        </button>
-      </div>
-    </div>
+    {% endif %}
 
     {% include search-loader.html %}
 

assets/js/pwa/unregister.js

@@ -0,0 +1,12 @@
+---
+layout: compress
+permalink: '/unregister.js'
+---
+
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.getRegistrations().then((registrations) => {
+    for (let reg of registrations) {
+      reg.unregister();
+    }
+  });
+}