chrisdancee / react-ios-pwa-prompt Goto Github PK

It was raised that a user should be able to dismiss the prompt indefinitely (for example if they're not interested, or if they have installed the app as a PWA).

Does this library work on typescript?

There is no way to customizate it out of component. I'm building PWA App that is forced to landscape mode via styles.

Could extra styles be given via props?

Of course we can overwrite it with:
copyAddHomeButtonLabel={"2) Swipe up and press 'Add to Home Screen'"}

By the way, Nice Job!

Currently, we can translate the title and body of the prompt, but texts used for steps description are not translatable. I am talking about these two:
1) Press the 'Share' button
2) Press 'Add to Home Screen'

It would be great to pass them to a component as props like title and body of the prompt and set defaults to what you guys have in the code already.

Thanks.

Imported the component per the provided instructions, but it does not function at all.

On react components inspection I can see an 'Anonymous' component instead of PWAPrompt.

Does not fire on iOS (iPhone / iPad) or on a faked user agent.

I'm testing it in iOS 13, and after the prompt is shown, the other click events in the page stop working, if the prompt is not shown, everything works ok.

navigator.platform for iPad in iOS13 reports as "MacIntel". This is one hack to detect it by checking for touch screen

navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1

If this logic is exported, developers can implement code-splitting for this component and thus avoid loading any additional data (the prompt, icons, and styles) unless it is actually needed.

For example:

import React, { Suspense } from 'react';
import { shouldShowPrompt } from 'react-ios-pwa-prompt';

const LazyPWAPrompt = React.lazy(() => import('react-ios-pwa-prompt'));

function App() {
    const options = {
        timesToShow: 1,
        promptOnVisit: 2,
    };

    return (
        <>
            {shouldShowPrompt(options) && (
                <Suspense fallback={null}>
                    <LazyPWAPrompt {...options} />
                </Suspense>
            )}
        </>
    );
}

@chrisdancee If this sounds like a good idea, I'll open a PR!

To further match iOS native prompt functionality, the page should not be scrollable whilst the prompt is active.

Tests should be added to detect any issues with code contributions

Change behaviour when opening this from a different browser than safari?

Greetings, nice work, clean and beautiful.

I think i don't know how to work with this...
I've read the document, even the code of the module itself, but i don't get it. how am i supposed to open this manually?
I have an "Add to homescreen" button in my profile menu, it works fine for any device except ios as you know, i want to open it for ios manually yet i can't.
I thought maybe an open property (Like Material UI compoents) would be nice and easy to use...

Hey Chris!

Just want to start of by saying that this project is amazing, and thank you for all your hard work!

When using the component with Chakra-UI's CSSReset component (https://chakra-ui.com/getting-started), a weird border appears around the body text, removing the cool "native" feel.

Here's a pic: https://i.imgur.com/Q0x5qwY.png

Any ideas to get around this?

Hello everyone! I have to say, this library has great look and feel with superb attention to detail.

I was giving it a try this week and realized that it doesn't detect iOS 14 properly. The prompt uses pre-13 icons and is not influenced by the os's theme, take a look:

I've prepared a little demo to demonstrate this issue: https://react-ios-pwa-prompt-example.netlify.app (source)

iOS version <= 12 are showing iOS13 icons

On the current iOS 13 Dark mode, the PWA prompt has very poor contrast (see screenshot attached). Would it possible to override these color values? Traditional CSS overrides aren't working because you're using StyledComponents.

I get a "ReferenceError: window is not defined" when I try to import PWAPrompt from 'react-ios-pwa-prompt';

I believe this an issue with SSR in next.js. Is it possible to execute deviceCheck() after the component has been mounted?

Thanks.

iOS 14 styles look slightly different. They don't use transparency, or blur filters, and have no margin at the prompt edges. The prompt should be update to support these styles.

What do you think about checking if a service worker is registered and only if one is show the dialog?

How about including an option to customize the interval at which the prompt is displayed again? For example, I would like to display it again after 90 days.

Love how you have come up with this solution to the problem of adding to home screen with IOS devices. I guess Apple really does not like the PWA as they could potentially be taking away that cash cow of revenue from their app store. But I am having a slight issue with it. Go easy on me. Newbee ;)

I am using this in a Next project.

npm i react-ios-pwa-prompt

then

import PWAPrompt from 'react-ios-pwa-prompt'

then put it in with my index,js code

     '<PWAPrompt />'

the '' are only there to show what I had coded...it would not show up in query otherwise.
getting this in response:

Server Error
ReferenceError: document is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
s
file:///C:/Users/jscha/Desktop/swim/node_modules/react-ios-pwa-prompt/dist/react-ios-pwa-prompt.js (1:2222)
v
file:///C:/Users/jscha/Desktop/swim/node_modules/react-ios-pwa-prompt/dist/react-ios-pwa-prompt.js (1:3463)
l
file:///C:/Users/jscha/Desktop/swim/node_modules/react-ios-pwa-prompt/dist/react-ios-pwa-prompt.js (1:2161)
e.exports
file:///C:/Users/jscha/Desktop/swim/node_modules/react-ios-pwa-prompt/dist/react-ios-pwa-prompt.js (1:3795)
Object.
file:///C:/Users/jscha/Desktop/swim/node_modules/react-ios-pwa-prompt/dist/react-ios-pwa-prompt.js (1:1410)
r
file:///C:/Users/jscha/Desktop/swim/node_modules/react-ios-pwa-prompt/dist/react-ios-pwa-prompt.js (1:432)
Module.
file:///C:/Users/jscha/Desktop/swim/node_modules/react-ios-pwa-prompt/dist/react-ios-pwa-prompt.js (1:12225)
r
file:///C:/Users/jscha/Desktop/swim/node_modules/react-ios-pwa-prompt/dist/react-ios-pwa-prompt.js (1:432)

file:///C:/Users/jscha/Desktop/swim/node_modules/react-ios-pwa-prompt/dist/react-ios-pwa-prompt.js (1:1237)

file:///C:/Users/jscha/Desktop/swim/node_modules/react-ios-pwa-prompt/dist/react-ios-pwa-prompt.js (1:1246)

Any advice?

Cheers Joel

Hi, very nice plugin / package. Saved me for a lot of work :)
A few suggestions on ux and ui:

1. Have a bit more contrast on the text, at least the text for the steps.
2. The Share and Add icons in the steps look very clickable. During a quick user test they tried clicking the icons in the popup instead of the share button below (on mobile). Maybe move them after the text could help? Maybe direct the user to the real share button somehow? Not sure.
3. For debugging and testing it would be useful with a prop that forces it to show, no matter OS or state.

Again, great work, and if you add a donate button somewhere, I'm sure people will use it ;)

Cheers,
Nix

Add a link to the Github project to the demo site, for users that find their way there from external sources

Hi. Is there any website where I can test this? Thanks.

Prompt should use different copyShareButtonLabel on ipad and iphone.

#82

iOS13 released a new header style for the sharing options. This style could be matched for the prompt. Including the favicon, site name and the close button.

Hey, great project, looks great on the devices I've tested it on.

I thought it was worth noting though that Apple only allows the "Add to Homescreen" feature when using Safari.

The prompt, however, displays on iOS Chrome and Firefox as well which could be confusing for a user as they won't be able to install the PWA without switching to Safari first.

A couple of options:

a) only show the prompt in Safari
b) add the ability to provide different copy depending on the browser

cheers

A suggestion was made by @chown9835 to add a promptOnIpad prop in order to hide the prompt for iPad users. Seems like it could be a useful feature.