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 c60d0d9629.

* Try JPEG

* Use mime-type library

* Automate image size

Co-authored-by: Jake Archibald <jaffathecake@gmail.com>
This commit is contained in:
François Beaufort
2021-01-21 10:45:52 +01:00
committed by GitHub
parent 39c6be41df
commit a3be343959
8 changed files with 116 additions and 23 deletions

View File

@@ -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',