Browse Source

Added gatekeeping dialogs for PWA install requirement

friend-tech-inspired-pwa-dialog
Jose Olarte III 1 year ago
parent
commit
a7f15fde25
  1. 69
      src/App.vue
  2. 4
      src/main.ts

69
src/App.vue

@ -246,6 +246,75 @@
</div> </div>
</div> </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> </div>
</Notification> </Notification>
</div> </div>

4
src/main.ts

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

Loading…
Cancel
Save