Compare commits

...

1 Commits

Author SHA1 Message Date
Jose Olarte III a7f15fde25 Added gatekeeping dialogs for PWA install requirement 1 year ago
  1. 69
      src/App.vue
  2. 4
      src/main.ts

69
src/App.vue

@ -246,6 +246,75 @@
</div>
</div>
</div>
<div
v-if="notification.type === 'pwa-install-gate-ios'"
class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
>
<div
class="flex w-11/12 max-w-sm mx-auto mb-3 overflow-hidden bg-white rounded-lg shadow-lg"
>
<div class="w-full px-6 py-6 text-slate-900 text-center">
<fa
icon="mobile-screen-button"
class="inline-block text-7xl text-slate-400 mb-4"
>
</fa>
<h3 class="text-2xl font-semibold mb-4">Add to Home Screen</h3>
<p class="text-md mb-4">
To install the app, you need to add this website to your home
screen.
</p>
<p class="text-md">
In your Safari browser menu, tap the
<span class="whitespace-nowrap">
<fa
icon="arrow-up-from-bracket"
class="fa-fw text-slate-500 bg-slate-200 py-1 -my-1 px-0.5 rounded"
>
</fa>
Share
</span>
icon and choose
<b>Add to Home Screen</b> in the options. Then, open the Time
Safari app on your home screen.
</p>
</div>
</div>
</div>
<div
v-if="notification.type === 'pwa-install-gate-android'"
class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
>
<div
class="flex w-11/12 max-w-sm mx-auto mb-3 overflow-hidden bg-white rounded-lg shadow-lg"
>
<div class="w-full px-6 py-6 text-slate-900 text-center">
<fa
icon="mobile-screen-button"
class="inline-block text-7xl text-slate-400 mb-4"
>
</fa>
<h3 class="text-2xl font-semibold mb-4">Add to Home Screen</h3>
<p class="text-md mb-4">
To install the app, you need to add this website to your home
screen.
</p>
<p class="text-md">
In your Chrome browser menu, tap the
<span class="whitespace-nowrap">
<fa
icon="ellipsis-vertical"
class="fa-fw text-slate-500 bg-slate-200 py-1 -my-1 px-0.5 rounded"
>
</fa>
More
</span>
button and choose
<b>Install App</b> in the options.
</p>
</div>
</div>
</div>
</div>
</Notification>
</div>

4
src/main.ts

@ -13,6 +13,7 @@ import { library } from "@fortawesome/fontawesome-svg-core";
import {
faArrowLeft,
faArrowRight,
faArrowUpFromBracket,
faBurst,
faCalendar,
faChevronLeft,
@ -39,6 +40,7 @@ import {
faLongArrowAltLeft,
faLongArrowAltRight,
faMagnifyingGlass,
faMobileScreenButton,
faPen,
faPersonCircleCheck,
faPersonCircleQuestion,
@ -59,6 +61,7 @@ import {
library.add(
faArrowLeft,
faArrowRight,
faArrowUpFromBracket,
faBurst,
faCalendar,
faChevronLeft,
@ -85,6 +88,7 @@ library.add(
faLongArrowAltLeft,
faLongArrowAltRight,
faMagnifyingGlass,
faMobileScreenButton,
faPen,
faPersonCircleCheck,
faPersonCircleQuestion,

Loading…
Cancel
Save