Can this generate splash-screen

[Barba828]

https://web.dev/learn/pwa/enhancements/#splash-screens Otherwise I may need to use other tools to generate these static resources

[userquin]

I'll check what's needed here...

[tripflex]

yeah this would be an amazing addition to have, most likely just as another preset or something i would assume

[userquin]

@tripflex @Barba828 I'm working on this, I'll try to send a draft PR tmr, but I'll need your help, rn I have not any iOS/macOS device to test the splash screens

[userquin]

[userquin]

@Barba828 released v0.0.5 version, can you test it in your project?

EDIT: I'm updating the pwa docs to include this new feat.

[userquin]

@Barba828 I'll need to review a few things in sharp usage about density in the options (at least we've an initial version)

[userquin]

@Barba828 can you check this https://deploy-preview-74--vite-pwa-org.netlify.app/assets-generator/cli.html#ios-ipad-splash-screens ? the PR can be found here https://github.com/vite-pwa/docs/pull/74

EDIT: open the PR preview in private browsing, the sw/pwa will be removed once window closed

[Barba828]

I've upgraded to version 0.0.5, but I'm not generating a slash screen after changing the pwa-assets.config.ts!

[userquin]

@Barba828 it is about you dont' include the entry or about the CLI not generating the splash screens

[Barba828]

@userquin It looks as if there is a problem with the Object here, here the preset I got from config doesn't have appleSplashScreens (It seems like appleSplashScreens is required to be in the preset object, but they are sibling JS objects)

[userquin]

@Barba828 ok, checking what's happening...

[userquin]

@Barba828 is your repo here https://github.com/Barba828/buitar/blob/main/packages/buitar/pwa-assets.config.ts ?

[Barba828]

Yes，And I've upgraded to version 0.0.5 locally

[userquin]

@Barba828 can you provide the configuration for the splash screens? Or just push the changes to the repo in another branch/PR.

[userquin]

[Barba828]

I'm using the default configuration from docs. And I am able to generate images by getting the appleSplashScreens directly from config

  const {
    appleSplashScreens: useAppleSplashScreens
  } = config;

[userquin]

Forked your repro adding apple splash screens entry once updated the dev dependency:

[userquin]

@Barba828 have you run pnpm install from root once dev dependency updated?

EDIT: you cannot access from the config since it isn't just a plain object, can be a string (preset name) or the loaded configuration.

[Barba828]

@userquin thx, I was able to generate all the resources. And I've found what's wrong with me.

export default defineConfig({
    preset: minimalPreset,        // I need to configure it in this object
    images: ['public/icons/logo.png'],

        // Configuring it here will not generate resources
    appleSplashScreens: createAppleSplashScreens({
        padding: 0,
    }),
})

[userquin]

Anyway, I need to review why not generating all the png files, maybe memory problems, rn only generating 15 (we've 39 devices/sizes)

I guess it is about devices entries using same sizes.

[userquin]

Confirmed, check for example these devices (there are more duplicates):

• 'iPad Pro 11"': { width: 1668, height: 2388, scaleFactor: 2 }, and 'iPad Pro 10.5"': { width: 1668, height: 2388, scaleFactor: 2 },
• 'iPad Pro 9.7"': { width: 1536, height: 2048, scaleFactor: 2 },, 'iPad mini 7.9"': { width: 1536, height: 2048, scaleFactor: 2 },, 'iPad Air 9.7"': { width: 1536, height: 2048, scaleFactor: 2 }, and 'iPad 9.7"': { width: 1536, height: 2048, scaleFactor: 2 },
• 'iPhone 14 Plus': { width: 1284, height: 2778, scaleFactor: 3 },, 'iPhone 13 Pro Max': { width: 1284, height: 2778, scaleFactor: 3 }, and 'iPhone 12 Pro Max': { width: 1284, height: 2778, scaleFactor: 3 },

[userquin]

@Barba828 I'll filter duplicated entries in PNG generation and also in links, in the meantime can you test the splash screen in the iOS emulator or real device?

[userquin]

@Barba828 this no makes sense, 15KB only in links to each html page:

[Barba828]

OK, It looks like splash-screen is working fine on real device.

[userquin]

I'll release a new patch version (0.0.6) filtering duplicated device dimensions, sending PR...

[userquin]

OK, It looks like splash-screen is working fine on real device.

Do you have the url? I'll send it to some friend and maybe we can test in iOS emulator...

[userquin]

@Barba828 released new 0.0.6 version.

[userquin]

@Barba828 I also need to update the docs, it is wrong the way we register the Apple splash screens object, it should be moved to the preset.

[userquin]

I add a new helper function combinePresetAndAppleSplashScreens (released new 0.0.7 version), the docs also updated to fix the appleSplashScreens usage and including the new combinePresetAndAppleSplashScreens.

That's all for today, see you

[Barba828]

By the way, I have a question. Why only log link in here . Can it be written directly into the index.html file after I set entry(or other or other fieldname).

export interface AppleTouchStartupImageOptions {
  /**
   * Write <link> into html 
   */
  entry?: string
}