Add manifest fields for PWA install bottom sheet (#933)

* Add manifest fields for PWA install bottom sheet

* Switch to webp

* Revert "Switch to webp"

This reverts commit c60d0d9.

* Try JPEG

* Use mime-type library

* Automate image size

Co-authored-by: Jake Archibald <[email protected]>

lib/url-plugin.js

@@ -12,9 +12,11 @@
  */
 import { promises as fs } from 'fs';
 import { basename } from 'path';
+import { imageSize } from 'image-size';
 
 const defaultOpts = {
   prefix: 'url',
+  imagePrefix: 'img-url',
 };
 
 export default function urlPlugin(opts) {
@@ -24,6 +26,7 @@ export default function urlPlugin(opts) {
   let assetIdToSourceBuffer;
 
   const prefix = opts.prefix + ':';
+  const imagePrefix = opts.imagePrefix + ':';
   return {
     name: 'url-plugin',
     buildStart() {
@@ -48,28 +51,49 @@ export default function urlPlugin(opts) {
       return combinedBuffer;
     },
     async resolveId(id, importer) {
-      if (!id.startsWith(prefix)) return;
-      const realId = id.slice(prefix.length);
+      const idPrefix = [prefix, imagePrefix].find((prefix) =>
+        id.startsWith(prefix),
+      );
+      if (!idPrefix) return;
+
+      const realId = id.slice(idPrefix.length);
       const resolveResult = await this.resolve(realId, importer);
 
       if (!resolveResult) {
         throw Error(`Cannot find ${realId}`);
       }
       // Add an additional .js to the end so it ends up with .js at the end in the _virtual folder.
-      return prefix + resolveResult.id + '.js';
+      return idPrefix + resolveResult.id + '.js';
     },
     async load(id) {
-      if (!id.startsWith(prefix)) return;
-      const realId = id.slice(prefix.length, -'.js'.length);
+      const idPrefix = [prefix, imagePrefix].find((prefix) =>
+        id.startsWith(prefix),
+      );
+      if (!idPrefix) return;
+
+      const realId = id.slice(idPrefix.length, -'.js'.length);
       const source = await fs.readFile(realId);
       assetIdToSourceBuffer.set(id, source);
       this.addWatchFile(realId);
 
-      return `export default import.meta.ROLLUP_FILE_URL_${this.emitFile({
-        type: 'asset',
-        source,
-        name: basename(realId),
-      })}`;
+      let imgSizeExport = '';
+
+      if (idPrefix === imagePrefix) {
+        const imgInfo = imageSize(source);
+        imgSizeExport = [
+          `export const width = ${JSON.stringify(imgInfo.width)};`,
+          `export const height = ${JSON.stringify(imgInfo.height)};`,
+        ].join('\n');
+      }
+
+      return [
+        `export default import.meta.ROLLUP_FILE_URL_${this.emitFile({
+          type: 'asset',
+          source,
+          name: basename(realId),
+        })};`,
+        imgSizeExport,
+      ].join('\n');
     },
   };
 }

missing-types.d.ts

@@ -22,6 +22,13 @@ declare module 'url:*' {
   export default value;
 }
 
+declare module 'img-url:*' {
+  const value: string;
+  export default value;
+  export const width: number;
+  export const height: number;
+}
+
 declare module 'omt:*' {
   const value: string;
   export default value;

package.json

@@ -16,6 +16,7 @@
     "@rollup/plugin-replace": "^2.3.4",
     "@surma/rollup-plugin-off-main-thread": "^1.4.2",
     "@types/dedent": "^0.7.0",
+    "@types/mime-types": "^2.1.0",
     "@types/node": "^14.14.7",
     "comlink": "^4.3.0",
     "cssnano": "^4.1.10",
@@ -24,10 +25,11 @@
     "file-drop-element": "^1.0.1",
     "husky": "^4.3.0",
     "idb-keyval": "^3.2.0",
+    "image-size": "^0.9.3",
     "linkstate": "^2.0.0",
     "lint-staged": "^10.5.1",
     "lodash.camelcase": "^4.3.0",
-    "mime-types": "^2.1.27",
+    "mime-types": "^2.1.28",
     "npm-run-all": "^4.1.5",
     "pointer-tracker": "^2.4.0",
     "postcss": "^7.0.35",

src/static-build/index.tsx

@@ -14,9 +14,16 @@ import { h } from 'preact';
 
 import { renderPage, writeFiles } from './utils';
 import IndexPage from './pages/index';
-import iconLargeMaskable from 'url:static-build/assets/icon-large-maskable.png';
-import iconLarge from 'url:static-build/assets/icon-large.png';
+import * as iconLargeMaskable from 'img-url:static-build/assets/icon-large-maskable.png';
+import * as iconLarge from 'img-url:static-build/assets/icon-large.png';
+import * as screenshot1 from 'img-url:static-build/assets/screenshot1.png';
+import * as screenshot2 from 'img-url:static-build/assets/screenshot2.jpg';
+import * as screenshot3 from 'img-url:static-build/assets/screenshot3.jpg';
 import dedent from 'dedent';
+import { lookup as lookupMime } from 'mime-types';
+
+const manifestSize = ({ width, height }: { width: number; height: number }) =>
+  `${width}x${height}`;
 
 // Set by Netlify
 const branch = process.env.BRANCH;
@@ -49,17 +56,38 @@ const toOutput: Output = {
     theme_color: '#ff3385',
     icons: [
       {
-        src: iconLarge,
-        type: 'image/png',
-        sizes: '1024x1024',
+        src: iconLarge.default,
+        type: lookupMime(iconLarge.default),
+        sizes: manifestSize(iconLarge),
       },
       {
-        src: iconLargeMaskable,
-        type: 'image/png',
-        sizes: '1024x1024',
+        src: iconLargeMaskable.default,
+        type: lookupMime(iconLargeMaskable.default),
+        sizes: manifestSize(iconLargeMaskable),
         purpose: 'maskable',
       },
     ],
+    description:
+      'Compress and compare images with different codecs, right in your browser.',
+    lang: 'en',
+    categories: ['photo', 'productivity', 'utilities'],
+    screenshots: [
+      {
+        src: screenshot1.default,
+        type: lookupMime(screenshot1.default),
+        sizes: manifestSize(screenshot1),
+      },
+      {
+        src: screenshot2.default,
+        type: lookupMime(screenshot2.default),
+        sizes: manifestSize(screenshot2),
+      },
+      {
+        src: screenshot3.default,
+        type: lookupMime(screenshot3.default),
+        sizes: manifestSize(screenshot3),
+      },
+    ],
     share_target: {
       action: '/?utm_medium=PWA&utm_source=share-target&share-target',
       method: 'POST',