feat(demo-pwa): register service worker

Alwatr · Jan 18, 2023 · ad8e2d8 · ad8e2d8
1 parent c98b1f6
commit ad8e2d8
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/ui/demo-pwa/esbuild.mjs b/ui/demo-pwa/esbuild.mjs
@@ -110,7 +110,9 @@ async function makeHtml() {
     throw new Error('css_filename_not_found');
   }
 
-  htmlContent = htmlContent.replace('alwatr-pwa.css', cssFilename).replace('alwatr-pwa.js', jsFilename);
+  htmlContent = htmlContent
+      .replace('alwatr-pwa.css', cssFilename)
+      .replace('alwatr-pwa.js', jsFilename);
 
   await copyPromise; // wait to cp done
   await fs.writeFile(`${outDir}/index.html`, htmlContent, {encoding: 'utf-8', flag: 'w'});
@@ -133,6 +135,7 @@ async function buildServiceWorker() {
 }
 
 if (!watchMode) {
+  // first, the dist files must be created, and then create a service worker from that.
   await makeHtml();
   await buildServiceWorker();
 }

diff --git a/ui/element/helper/service-worker/register.ts → ...ent/src/helper/service-worker/register.ts b/ui/element/helper/service-worker/register.ts → ...ent/src/helper/service-worker/register.ts
diff --git a/ui/element/src/pwa-element.ts b/ui/element/src/pwa-element.ts
@@ -3,9 +3,11 @@ import {router, type RoutesConfig} from '@alwatr/router';
 import {html, css, type CSSResultGroup, type PropertyValues} from 'lit';
 import {cache} from 'lit/directives/cache.js';
 
+import {registerServiceWorker} from './helper/service-worker/register.js';
+import {AlwatrSmartElement} from './smart-element.js';
+
 import '@alwatr/ui-kit/style/token.css';
 import '@alwatr/ui-kit/style/pwa.css';
-import {AlwatrSmartElement} from './smart-element.js';
 
 /**
  * Alwatr Root Base Element
@@ -69,5 +71,10 @@ export class AlwatrPwaElement extends AlwatrSmartElement {
   protected override firstUpdated(changedProperties: PropertyValues<this>): void {
     super.firstUpdated(changedProperties);
     this.removeAttribute('unresolved');
+    registerServiceWorker('service-worker.js')
+        ?.then(() => this._logger.logOther(`ServiceWorker registered from "service-worker.js".`))
+        .catch((err) => {
+          this._logger.logOther('ServiceWorker registration failed: ', err);
+        });
   }
 }