feat(soffit-pwa): screenshots, version, manifest, enhance offline (#690)

uniquely/soffit-pwa/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alwatr/soffit-pwa",
-  "version": "0.27.0",
+  "version": "0.27.0-prv1",
   "description": "A good ceiling is vital. But a SOFFIT ceiling can be an inspiration.",
   "type": "module",
   "author": "S. Ali Mihandoost <[email protected]> (https://ali.mihandoost.com)",

uniquely/soffit-pwa/res/index.html

@@ -18,7 +18,7 @@
   />
 
   <link rel="shortcut icon" href="image/favicon.ico" />
-  <link rel="manifest" href="manifest.json" />
+  <link rel="manifest" href="manifest.webmanifest" />
   <!-- Add to home screen for Chrome on Android. Fallback for manifest.json -->
   <meta name="mobile-web-app-capable" content="yes" />
   <meta name="application-name" content="بازرگانی سافیت" />

uniquely/soffit-pwa/res/manifest.json → uniquely/soffit-pwa/res/manifest.webmanifest

@@ -2,12 +2,12 @@
   "short_name": "بازرگانی سافیت",
   "name": "بازرگانی سافیت",
   "description": "A good ceiling is vital. But a SOFFIT ceiling can be an inspiration.",
-  "start_url": "/?pwa",
+  "start_url": "/",
   "display": "standalone",
   "theme_color": "#2b4f9c",
   "background_color": "#faf8ff",
   "orientation": "portrait",
-  "default_locale": "en",
+  "default_locale": "fa",
   "icons": [
     {"src": "/image/icon-192-maskable.png", "type": "image/png", "sizes": "192x192", "purpose": "maskable"},
     {"src": "/image/icon-512-maskable.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable"},
@@ -17,10 +17,16 @@
   ],
   "screenshots": [
     {
-      "src": "/image/screenshot/page-home.jpg",
-      "sizes": "333x720",
+      "src": "/image/screenshot-1.jpg",
+      "sizes": "414x896",
       "type": "image/jpg",
-      "label": "Home Page"
+      "label": "Soffit PWA (Dark Theme)"
+    },
+    {
+      "src": "/image/screenshot-2.jpg",
+      "sizes": "414x896",
+      "type": "image/jpg",
+      "label": "Soffit PWA (Light Theme)"
     }
   ]
 }

uniquely/soffit-pwa/src/page-home.ts

@@ -78,10 +78,6 @@ export class AlwatrPageHome extends AlwatrSmartElement {
       background-color: var(--sys-scrollbar-background);
     }
 
-    :host::-webkit-scrollbar-track {
-      margin: var(--sys-spacing-track);
-    }
-
     :host::-webkit-scrollbar-thumb {
       background-color: var(--sys-scrollbar-color);
       border-radius: var(--sys-scrollbar-radius);
@@ -122,6 +118,19 @@ export class AlwatrPageHome extends AlwatrSmartElement {
       color: var(--sys-color-on-secondary-container);
       padding: calc(2 * var(--sys-spacing-track));
       background-color: var(--sys-color-secondary-container);
+      position: relative;
+    }
+
+    .version {
+      position: absolute;
+      left: var(--sys-spacing-track);
+      bottom: var(--sys-spacing-track);
+      font-size: var(--sys-typescale-label-small-font-size);
+      line-height: var(--sys-typescale-label-small-line-height);
+      letter-spacing: var(--sys-typescale-label-small-letter-spacing);
+      opacity: var(--sys-surface-disabled-opacity);
+      user-select: none;
+      -webkit-user-select: none;
     }
   `;
 
@@ -130,13 +139,17 @@ export class AlwatrPageHome extends AlwatrSmartElement {
     return html`
       <header><img src="image/soffit.png" alt="SOFFIT Logo" /></header>
       <main>${this._menuTemplate()}</main>
-      <footer><span>A good ceiling is vital.<br/>a SOFFIT ceiling can be an inspiration.</span></footer>
+      <footer>
+        <span>A good ceiling is vital.<br />a SOFFIT ceiling can be an inspiration.</span>
+        <span class="version">v${_ALWATR_VERSION_}</span>
+      </footer>
     `;
   }
 
-  protected _menuTemplate():unknown {
-    return map(menuList, (menuItem) => html`
-      <alwatr-icon-box .content=${menuItem} ?wide=${menuItem.wide}></alwatr-icon-box>
-    `);
+  protected _menuTemplate(): unknown {
+    return map(
+        menuList,
+        (menuItem) => html` <alwatr-icon-box .content=${menuItem} ?wide=${menuItem.wide}></alwatr-icon-box> `,
+    );
   }
 }