Pwa install prompt for mobile users #1321
Conversation
…cookie and chat with an expert component
…browsers and using event.prompt() to directly install PWA
|
Direct PWA installation from prompt modal now works for chromium browsers. Pending things (input needed) :
|
|
@hunar1312 can you please fix the tests. |
|
|
||
| try { | ||
| const cookieHeader = request.headers.get("Cookie"); | ||
| const cookie = (await userPrefs.parse(cookieHeader)) || {}; |
There was a problem hiding this comment.
I see you are using the userPrefs cookie, but I think we need to create a different one, as we want it to expire after 14 days so we can remind the user again about it.
|
|
||
| export const InstallIcon = (props: SVGProps<SVGSVGElement>) => ( | ||
| <svg | ||
| width="20" |
There was a problem hiding this comment.
We set width and height to 100% so we can control its size based on the parent
| <path | ||
| d="M6.66667 10L10 13.3333M10 13.3333L13.3333 10M10 13.3333V6.66667M6.5 17.5H13.5C14.9001 17.5 15.6002 17.5 16.135 17.2275C16.6054 16.9878 16.9878 16.6054 17.2275 16.135C17.5 15.6002 17.5 14.9001 17.5 13.5V6.5C17.5 5.09987 17.5 4.3998 17.2275 3.86502C16.9878 3.39462 16.6054 3.01217 16.135 2.77248C15.6002 2.5 14.9001 2.5 13.5 2.5H6.5C5.09987 2.5 4.3998 2.5 3.86502 2.77248C3.39462 3.01217 3.01217 3.39462 2.77248 3.86502C2.5 4.3998 2.5 5.09987 2.5 6.5V13.5C2.5 14.9001 2.5 15.6002 2.77248 16.135C3.01217 16.6054 3.39462 16.9878 3.86502 17.2275C4.3998 17.5 5.09987 17.5 6.5 17.5Z" | ||
| stroke="#667085" | ||
| stroke-width="1.75" |
There was a problem hiding this comment.
This is not valid jsx and will give errors. Please fix all stroke attributes
| import type { loader } from "~/routes/_layout+/_layout"; | ||
| import { usePwaManager } from "~/utils/pwa-manager"; | ||
| import { Button } from "../shared/button"; | ||
| import { useRef } from "react"; |
|
|
||
| const { promptInstall } = usePwaManager(); | ||
| return optimisticHideInstallPwaPrompt ? null : ( | ||
| <AnimatePresence> |
There was a problem hiding this comment.
I think just like this its not doing anything. You need to add the motion.div inside it. We have some examples. Would be nice to have it animated.
| open={true} | ||
| > | ||
| <div className="relative z-10 rounded-xl bg-white p-4 shadow-lg"> | ||
| <video height="200" autoPlay loop muted className="mb-6 rounded-lg"> |
There was a problem hiding this comment.
This doesn't auto play on my iphone. I think you need to add the inline attribute for it to work.
| > | ||
| <input type="hidden" name="pwaPromptVisibility" value="hidden" /> | ||
| <Button type="submit" width="full" variant="secondary"> | ||
| Skip |
| @@ -148,6 +150,14 @@ export default function App() { | |||
| )} | |||
| </div> | |||
| <Toaster /> | |||
| <ClientOnly fallback={null}> | |||
| {() => | |||
| window.matchMedia("(max-width: 640px)").matches && | |||
There was a problem hiding this comment.
Lets move this check into a function with a clear name, so its more obvious what it does.
| const context = useContext(PwaManagerContext); | ||
|
|
||
| if (context === null) { | ||
| throw new Error(`usePwaManager must be used within a PwaManagerProvider.`); |
There was a problem hiding this comment.
Wondering what that will do. Will it block the page or just throw an error in the console. Do u have an example?
resolves #1302