react demo can't display corresponding ios installation prompt

Question

react demo can't display corresponding ios installation prompt

Closed this issue 5 months ago · 8 comments

mengxi-ream commented 5 months ago

Problem

In the demo, when I opened it with iPhone Safari (and iPad Safari), it displayed the chrome style prompt.

How to reproduce

Download the code in demo
change vite.config.ts to

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    host: "0.0.0.0",
  },
});

npm install && npm run dev to run the demo locally
find the ip of your computer which hosts this demo. In Windows, you can use ipconfig, in mac, you can use ifconfig or hold Option and click the wifi button in the upper right corner of screen.
Open Safari in your iPhone, use the ip you found in the step 4 and type ip:3000 in your Safari. note ip here should be replaced by the exact ip like 203.32.1.42
Test the show icon and check the style of installation prompt

Answer 1 · 2024-07-27T17:12:21.000Z

@Crayon-Shinchan use ngrok to serve https for test. Because of the unsecure http protocol of the local network (not localhost but ip name) some checks fail and chrome view is the default. It's not a problem, just local development nuance.

Answer 2 · 2024-07-27T17:16:13.000Z

khmyznikov commented 5 months ago

Answer 3 · 2024-07-28T16:46:14.000Z

I tried to deploy it and this is the result of npm run build

> npm run build

> vite-react-typescript-starter@0.0.0 build
> tsc && vite build

node_modules/@khmyznikov/pwa-install/dist/types/index.d.ts:16:26 - error TS2304: Cannot find name 'BeforeInstallPromptEvent'.

16     externalPromptEvent: BeforeInstallPromptEvent | null;
                            ~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@khmyznikov/pwa-install/dist/types/index.d.ts:17:26 - error TS2304: Cannot find name 'BeforeInstallPromptEvent'.

17     protected platforms: BeforeInstallPromptEvent['platforms'];
                            ~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@khmyznikov/pwa-install/dist/types/types/types.d.ts:1:31 - error TS2307: Cannot find module 'web-app-manifest' or its corresponding type declarations.

1 import { ImageResource } from 'web-app-manifest';
                                ~~~~~~~~~~~~~~~~~~

node_modules/@khmyznikov/pwa-install/dist/types/types/types.d.ts:8:26 - error TS2304: Cannot find name 'BeforeInstallPromptEvent'.

8     defferedPromptEvent: BeforeInstallPromptEvent | null;
                           ~~~~~~~~~~~~~~~~~~~~~~~~

src/App.tsx:5:24 - error TS2307: Cannot find module '@khmyznikov/pwa-install/react-legacy' or its corresponding type declarations.
  There are types at '/Users/leonz/Github/vite-react-ts-wqnaj8/node_modules/@khmyznikov/pwa-install/dist/types/react-legacy/pwa-install.react-legacy.d.ts', but this result could not be resolved under your current 'moduleResolution' setting. Consider updating to 'node16', 'nodenext', or 'bundler'.

5 import PWAInstall from '@khmyznikov/pwa-install/react-legacy';
                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/App.tsx:25:34 - error TS2339: Property 'promptEvent' does not exist on type 'Window & typeof globalThis'.

25     let lastPromptEvent = window.promptEvent;
                                    ~~~~~~~~~~~

src/App.tsx:28:18 - error TS2339: Property 'promptEvent' does not exist on type 'Window & typeof globalThis'.

28       if (window.promptEvent !== lastPromptEvent) {
                    ~~~~~~~~~~~

src/App.tsx:29:34 - error TS2339: Property 'promptEvent' does not exist on type 'Window & typeof globalThis'.

29         lastPromptEvent = window.promptEvent;
                                    ~~~~~~~~~~~

src/App.tsx:30:31 - error TS2339: Property 'promptEvent' does not exist on type 'Window & typeof globalThis'.

30         setPromptEvent(window.promptEvent);
                                 ~~~~~~~~~~~

src/App.tsx:61:38 - error TS7006: Parameter 'event' implicitly has an 'any' type.

61         onPwaInstallAvailableEvent={(event) => console.log(event)}
                                        ~~~~~


Found 10 errors in 3 files.

Errors  Files
     2  node_modules/@khmyznikov/pwa-install/dist/types/index.d.ts:16
     2  node_modules/@khmyznikov/pwa-install/dist/types/types/types.d.ts:1
     6  src/App.tsx:5

Can I ask how to solve this?

Answer 4 · 2024-07-29T17:09:19.000Z

@Crayon-Shinchan for the window.promptEvent just comment that part, ts-ignore or create types. It's just for example. For the rest, add

  "compilerOptions": {
    "types": [
       "dom-chromium-installation-events",
       "web-app-manifest"
    ]
  },

to your ts config

Answer 5 · 2024-07-29T17:15:54.000Z

@Crayon-Shinchan for the window.promptEvent just comment that part, ts-ignore or create types. It's just for example. For the rest, add
  "compilerOptions": {
    "types": [
       "dom-chromium-installation-events",
       "web-app-manifest"
    ]
  },
to your ts config

Hi, thank you for the support! after I added this into the ts config, I got

> npm run build

> vite-react-typescript-starter@0.0.0 build
> tsc && vite build

error TS2688: Cannot find type definition file for 'dom-chromium-installation-events'.
  The file is in the program because:
    Entry point of type library 'dom-chromium-installation-events' specified in compilerOptions

  tsconfig.json:18:15
    18     "types": ["dom-chromium-installation-events", "web-app-manifest"],
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    File is entry point of type library specified here.

error TS2688: Cannot find type definition file for 'web-app-manifest'.
  The file is in the program because:
    Entry point of type library 'web-app-manifest' specified in compilerOptions

  tsconfig.json:18:51
    18     "types": ["dom-chromium-installation-events", "web-app-manifest"],
                                                         ~~~~~~~~~~~~~~~~~~
    File is entry point of type library specified here.


Found 2 errors.

This problem solved by

npm install --save-dev @types/dom-chromium-installation-events @types/web-app-manifest

But then got

> npm run build                                                                         

> vite-react-typescript-starter@0.0.0 build
> tsc && vite build

src/App.tsx:5:24 - error TS2307: Cannot find module '@khmyznikov/pwa-install/react-legacy' or its corresponding type declarations.
  There are types at '/Users/leonz/Github/vite-react-ts-wqnaj8/node_modules/@khmyznikov/pwa-install/dist/types/react-legacy/pwa-install.react-legacy.d.ts', but this result could not be resolved under your current 'moduleResolution' setting. Consider updating to 'node16', 'nodenext', or 'bundler'.

5 import PWAInstall from '@khmyznikov/pwa-install/react-legacy';

Answer 6 · 2024-07-29T17:24:20.000Z

@Crayon-Shinchan for the window.promptEvent just comment that part, ts-ignore or create types. It's just for example. For the rest, add
  "compilerOptions": {
    "types": [
       "dom-chromium-installation-events",
       "web-app-manifest"
    ]
  },
to your ts config

Hi, thank you for the support! after I added this into the ts config, I got

> npm run build

> vite-react-typescript-starter@0.0.0 build
> tsc && vite build

error TS2688: Cannot find type definition file for 'dom-chromium-installation-events'.
  The file is in the program because:
    Entry point of type library 'dom-chromium-installation-events' specified in compilerOptions

  tsconfig.json:18:15
    18     "types": ["dom-chromium-installation-events", "web-app-manifest"],
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    File is entry point of type library specified here.

error TS2688: Cannot find type definition file for 'web-app-manifest'.
  The file is in the program because:
    Entry point of type library 'web-app-manifest' specified in compilerOptions

  tsconfig.json:18:51
    18     "types": ["dom-chromium-installation-events", "web-app-manifest"],
                                                         ~~~~~~~~~~~~~~~~~~
    File is entry point of type library specified here.


Found 2 errors.

This problem solved by

npm install --save-dev @types/dom-chromium-installation-events @types/web-app-manifest

But then got

> npm run build                                                                         

> vite-react-typescript-starter@0.0.0 build
> tsc && vite build

src/App.tsx:5:24 - error TS2307: Cannot find module '@khmyznikov/pwa-install/react-legacy' or its corresponding type declarations.
  There are types at '/Users/leonz/Github/vite-react-ts-wqnaj8/node_modules/@khmyznikov/pwa-install/dist/types/react-legacy/pwa-install.react-legacy.d.ts', but this result could not be resolved under your current 'moduleResolution' setting. Consider updating to 'node16', 'nodenext', or 'bundler'.

5 import PWAInstall from '@khmyznikov/pwa-install/react-legacy';

Then I set this in ts config

    "moduleResolution": "Bundler",

Got the new error

> npm run build

> vite-react-typescript-starter@0.0.0 build
> tsc && vite build

node_modules/@khmyznikov/pwa-install/dist/types/react-legacy/pwa-install.react-legacy.d.ts:2:35 - error TS2307: Cannot find module '@lit/react' or its corresponding type declarations.

2 import { ReactWebComponent } from '@lit/react';
                                    ~~~~~~~~~~~~


Found 1 error in node_modules/@khmyznikov/pwa-install/dist/types/react-legacy/pwa-install.react-legacy.d.ts:2

should solve it by npm install @lit/react

Answer 7 · 2024-07-29T17:30:31.000Z

I finally made this. here is the deployed version:
I tested it and it worked well with iPhone. The corresponding code repo is here.

Answer 8 · 2024-07-29T18:45:38.000Z

Thanks for debugging. I'll add lit/react to peer dependency too.