-
Notifications
You must be signed in to change notification settings - Fork 44
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added manifest.json, works with no navbar for PWA (#6640)
* Added manifest.json, works on iOS with no navbar for PWA * Added working ios prompt * Some css additions * Fixed some scss errors and flushed out android testing + design accurate component * Added fixes suggested by Marcin (some outstanding) * Added correct common svg * Added new png asset for manifest instead of svg * Added icon from phosphorous and resolved some scss issues * Small .scss fixes * extracted magic strings to a const * no prompt on marketing page * Addressed latest round of fixes suggested by Marcin * Addressed more comments + fixed cancel button that broke last commit * Removed console logs * Fix for icons and background color * Removed OG icon from add to homescreen prompt * Growl now behind prompt * Opening to dashboard * Changed copy * Adding a delay for loading prompt * Removed ternary * Reset back to ternary --------- Co-authored-by: Marcin <[email protected]>
- Loading branch information
Showing
19 changed files
with
520 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
19 changes: 19 additions & 0 deletions
19
packages/commonwealth/client/scripts/hooks/useAppStatus.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| const useAppStatus = () => { | ||
| const isAddedToHomeScreen = window.matchMedia( | ||
| '(display-mode: standalone)', | ||
| ).matches; | ||
| const isMarketingPage = window.location.pathname === '/'; | ||
| const isIOS = window.navigator.userAgent.match(/(iPad|iPhone|iPod)/g) | ||
| ? true | ||
| : false; | ||
| const isAndroid = window.navigator.userAgent.match(/Android/g) ? true : false; | ||
|
|
||
| return { | ||
| isAddedToHomeScreen, | ||
| isMarketingPage, | ||
| isIOS, | ||
| isAndroid, | ||
| }; | ||
| }; | ||
|
|
||
| export default useAppStatus; |
55 changes: 55 additions & 0 deletions
55
...monwealth/client/scripts/views/components/AddToHomeScreenPrompt/AddToHomeScreenPrompt.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import React, { useEffect, useState } from 'react'; | ||
| import { AndroidPrompt } from './AndroidPrompt'; | ||
| import { IOSPrompt } from './IOSPrompt'; | ||
| import { HIDE_PROMPT, HIDE_PROMPT_DAYS, HIDE_PROMPT_TIME } from './constants'; | ||
|
|
||
| interface AddToHomeScreenPromptProps { | ||
| isIOS: boolean; | ||
| isAndroid: boolean; | ||
| } | ||
|
|
||
| export const AddToHomeScreenPrompt = ({ | ||
| isIOS, | ||
| isAndroid, | ||
| }: AddToHomeScreenPromptProps) => { | ||
| const [showPrompt, setShowPrompt] = useState(true); | ||
|
|
||
| useEffect(() => { | ||
| const hidePromptTime = localStorage.getItem(HIDE_PROMPT_TIME); | ||
| if (hidePromptTime && new Date().getTime() < Number(hidePromptTime)) { | ||
| setShowPrompt(false); | ||
| } | ||
|
|
||
| if (sessionStorage.getItem(HIDE_PROMPT)) { | ||
| setShowPrompt(false); | ||
| } | ||
| }, [showPrompt]); | ||
|
|
||
| const hidePromptForNDays = () => { | ||
| const maxDays = 30; | ||
|
|
||
| let n = Number(localStorage.getItem(HIDE_PROMPT_DAYS)) || 1; | ||
| n = n * 2 > maxDays ? maxDays : n * 2; | ||
| const hideUntil = new Date().getTime() + n * 24; //* 60 * 60 * 1000; | ||
| localStorage.setItem(HIDE_PROMPT_TIME, hideUntil.toString()); | ||
| localStorage.setItem(HIDE_PROMPT_DAYS, n.toString()); | ||
|
|
||
| setShowPrompt(false); | ||
| }; | ||
|
|
||
| return showPrompt ? ( | ||
| isIOS ? ( | ||
| <IOSPrompt | ||
| hidePromptAction={hidePromptForNDays} | ||
| showPrompt={showPrompt} | ||
| setShowPrompt={setShowPrompt} | ||
| /> | ||
| ) : isAndroid ? ( | ||
| <AndroidPrompt | ||
| hidePromptAction={hidePromptForNDays} | ||
| showPrompt={showPrompt} | ||
| setShowPrompt={setShowPrompt} | ||
| /> | ||
| ) : null | ||
| ) : null; | ||
| }; |
117 changes: 117 additions & 0 deletions
117
...th/client/scripts/views/components/AddToHomeScreenPrompt/AndroidPrompt/AndroidPrompt.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,117 @@ | ||
| @import '../../../../../styles/shared'; | ||
|
|
||
| .AndroidPrompt { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| height: 100vh; | ||
| position: fixed; | ||
| bottom: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| background-color: rgba(0, 0, 0, 0.5); | ||
| z-index: 1002; | ||
|
|
||
| .header { | ||
| display: flex; | ||
| align-items: center; | ||
| padding-top: 8px; | ||
|
|
||
| .icon { | ||
| margin-right: 16px; | ||
| } | ||
| } | ||
|
|
||
| .app { | ||
| .app-name { | ||
| color: $neutral-900; | ||
| text-align: center; | ||
| font-variant-numeric: lining-nums tabular-nums; | ||
| font-family: $font-family-roboto; | ||
| font-size: 16px; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| line-height: 16px; | ||
| letter-spacing: 0.16px; | ||
| } | ||
| .app-url { | ||
| color: $neutral-500; | ||
| text-align: center; | ||
| font-variant-numeric: lining-nums tabular-nums; | ||
| font-family: $font-family-roboto; | ||
| font-size: 12px; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| line-height: 16px; | ||
| letter-spacing: 0.24px; | ||
| } | ||
| } | ||
|
|
||
| .button-container { | ||
| display: flex; | ||
| justify-content: flex-end; | ||
| gap: 32px; | ||
| } | ||
|
|
||
| .prompt-button { | ||
| color: $primary-500; | ||
| text-align: right; | ||
| font-variant-numeric: lining-nums tabular-nums; | ||
| font-family: 'Roboto'; | ||
| font-size: 16px; | ||
| font-style: normal; | ||
| font-weight: 500; | ||
| line-height: 24px; | ||
| letter-spacing: 0.16px; | ||
| background-color: $white; | ||
| padding: 0px; | ||
| margin: 0px; | ||
| } | ||
|
|
||
| .prompt-content { | ||
| background-color: $white; | ||
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), | ||
| 0 2px 4px -1px rgba(0, 0, 0, 0.06); | ||
| padding: 8px 24px 8px; | ||
| border-radius: 26px; | ||
| margin-left: 18px; | ||
| margin-right: 18px; | ||
|
|
||
| .title { | ||
| font-family: $font-family-roboto; | ||
| font-size: 24px; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| line-height: 24px; | ||
| letter-spacing: -0.24px; | ||
| color: $neutral-900; | ||
| padding: 24px 0px 8px; | ||
| } | ||
|
|
||
| .description { | ||
| margin-top: 16px; | ||
| align-self: stretch; | ||
| color: $neutral-900; | ||
| font-variant-numeric: lining-nums tabular-nums; | ||
| font-family: $font-family-roboto; | ||
| font-size: 16px; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| line-height: 24px; | ||
| letter-spacing: 0.16px; | ||
| } | ||
|
|
||
| .hide-prompt { | ||
| flex: 1 0 0; | ||
| margin-top: 16px; | ||
| color: $neutral-900; | ||
| font-variant-numeric: lining-nums tabular-nums; | ||
| font-family: $font-family-roboto !important; | ||
| font-size: 16px !important; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| line-height: 24px; | ||
| letter-spacing: 0.16px; | ||
| } | ||
| } | ||
| } |
100 changes: 100 additions & 0 deletions
100
...lth/client/scripts/views/components/AddToHomeScreenPrompt/AndroidPrompt/AndroidPrompt.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| import React, { useState } from 'react'; | ||
| import { CWCheckbox } from '../../component_kit/cw_checkbox'; | ||
| import { CWText } from '../../component_kit/cw_text'; | ||
| import { CWButton } from '../../component_kit/new_designs/cw_button'; | ||
| import { HIDE_PROMPT } from '../constants'; | ||
| import './AndroidPrompt.scss'; | ||
|
|
||
| interface AndroidPromptProps { | ||
| hidePromptAction: () => void; | ||
| showPrompt: boolean; | ||
| setShowPrompt: (showPrompt: boolean) => void; | ||
| } | ||
|
|
||
| export const AndroidPrompt = ({ | ||
| hidePromptAction, | ||
| showPrompt, | ||
| setShowPrompt, | ||
| }: AndroidPromptProps) => { | ||
| let installPromptEvent = null; | ||
| const [checkboxChecked, setCheckboxChecked] = useState(false); | ||
|
|
||
| window.addEventListener('beforeinstallprompt', (event) => { | ||
| // Prevent Chrome 67 and earlier from automatically showing the prompt | ||
| event.preventDefault(); | ||
|
|
||
| installPromptEvent = event; | ||
| }); | ||
|
|
||
| const handleInstallClick = () => { | ||
| installPromptEvent.prompt(); | ||
|
|
||
| // Wait for the user to respond to the prompt | ||
| installPromptEvent.userChoice.then((choiceResult) => { | ||
| if (choiceResult.outcome === 'accepted') { | ||
| // Hide after install prompt is accepted | ||
| console.log('User accepted the install prompt'); | ||
| sessionStorage.setItem(HIDE_PROMPT, 'true'); | ||
| setShowPrompt(false); | ||
| } else { | ||
| // Hide after install prompt is dismissed | ||
| sessionStorage.setItem(HIDE_PROMPT, 'true'); | ||
| setShowPrompt(false); | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| const handleCancelClick = () => { | ||
| // Hide the prompt for the rest of the session | ||
| sessionStorage.setItem(HIDE_PROMPT, 'true'); | ||
| setShowPrompt(false); | ||
| // If the checkbox is checked, hide the prompt for N days | ||
| if (checkboxChecked) { | ||
| hidePromptAction(); | ||
| } | ||
| }; | ||
|
|
||
| const handleCheckboxChange = (event) => { | ||
| setCheckboxChecked(event.target.checked); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="AndroidPrompt"> | ||
| <div className="prompt-content"> | ||
| <CWText className="title">Install App</CWText> | ||
| <div className="header"> | ||
| <div className="icon"> | ||
| <img src="/static/img/branding/common.svg" alt="Commonwealth" /> | ||
| </div> | ||
| <div className="app"> | ||
| <CWText className="app-name">Common</CWText> | ||
| <CWText className="app-url">common.xyz</CWText> | ||
| </div> | ||
| </div> | ||
| <CWText className="description"> | ||
| For the best mobile experience we recommend installing the Common | ||
| web-app. | ||
| </CWText> | ||
| <CWCheckbox | ||
| className="hide-prompt" | ||
| label="Show less often" | ||
| onChange={handleCheckboxChange} | ||
| /> | ||
| <div className="button-container"> | ||
| <CWButton | ||
| buttonType="tertiary" | ||
| className="prompt-button" | ||
| label="Cancel" | ||
| onClick={handleCancelClick} | ||
| /> | ||
| <CWButton | ||
| buttonType="tertiary" | ||
| className="prompt-button" | ||
| label="Install" | ||
| onClick={handleInstallClick} | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; |
1 change: 1 addition & 0 deletions
1
...commonwealth/client/scripts/views/components/AddToHomeScreenPrompt/AndroidPrompt/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './AndroidPrompt'; |
Oops, something went wrong.