|
|
|
@ -8,25 +8,57 @@ |
|
|
|
Time Safari |
|
|
|
</h1> |
|
|
|
|
|
|
|
<!-- show the actions for recognizing a give --> |
|
|
|
<!-- prompt to install notifications --> |
|
|
|
<div class="mb-8"> |
|
|
|
<div |
|
|
|
v-if="!isInstalled()" |
|
|
|
v-if="!notificationsSupported()" |
|
|
|
class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4" |
|
|
|
> |
|
|
|
<p> |
|
|
|
This is not installed as an app. |
|
|
|
<p style="display: inline; align-items: center"> |
|
|
|
This app doesn't support notifications, so let's fix that. <br /> |
|
|
|
<!-- Note that that exact verbiage shows in the help. --> |
|
|
|
Look for an "install" prompt or action. |
|
|
|
<router-link |
|
|
|
:to="{ name: 'help-notifications' }" |
|
|
|
class="text-blue-500" |
|
|
|
|
|
|
|
<span v-if="userAgentInfo.getOS().name === 'iOS'"> |
|
|
|
Tap on "Share"<img |
|
|
|
src="../assets/help/apple-share-icon.svg" |
|
|
|
alt="Apple 'share' icon" |
|
|
|
width="30" |
|
|
|
style="display: inline; margin: 0 5px; vertical-align: middle" |
|
|
|
/>and then "Add to Home Screen" |
|
|
|
<fa icon="square-plus" title="Apple 'Add' icon" /> |
|
|
|
and go click on that new app. |
|
|
|
</span> |
|
|
|
<span |
|
|
|
v-else-if="userAgentInfo.getBrowser().name.startsWith('Chrome')" |
|
|
|
> |
|
|
|
Go here for more help. |
|
|
|
</router-link> |
|
|
|
You should see a prompt to install, or you can click on the |
|
|
|
top-right dots |
|
|
|
<fa |
|
|
|
icon="ellipsis-vertical" |
|
|
|
title="vertical ellipsis" |
|
|
|
class="fa-fw" |
|
|
|
/> |
|
|
|
and then "Install"<img |
|
|
|
src="../assets/help/install-android-chrome.png" |
|
|
|
alt="Android 'install' icon" |
|
|
|
width="30" |
|
|
|
style="display: inline; margin: 0 5px; vertical-align: middle" |
|
|
|
/> |
|
|
|
and go use that app. |
|
|
|
</span> |
|
|
|
<span v-else> |
|
|
|
Try |
|
|
|
<a href="https://www.google.com/chrome/" class="text-blue-500" |
|
|
|
>Google Chrome</a |
|
|
|
> |
|
|
|
instead. |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- show the actions for recognizing a give --> |
|
|
|
<div class="mb-8"> |
|
|
|
<div |
|
|
|
v-if="!activeDid" |
|
|
|
class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4" |
|
|
|
@ -159,6 +191,7 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script lang="ts"> |
|
|
|
import { UAParser } from "ua-parser-js"; |
|
|
|
import { Component, Vue } from "vue-facing-decorator"; |
|
|
|
|
|
|
|
import EntityIcon from "@/components/EntityIcon.vue"; |
|
|
|
@ -207,6 +240,7 @@ export default class HomeView extends Vue { |
|
|
|
isHiddenSpinner = true; |
|
|
|
isRegistered = false; |
|
|
|
numAccounts = 0; |
|
|
|
userAgentInfo = new UAParser(); // see https://docs.uaparser.js.org/v2/api/ua-parser-js/get-os.html |
|
|
|
|
|
|
|
async beforeCreate() { |
|
|
|
await accountsDB.open(); |
|
|
|
@ -266,16 +300,8 @@ export default class HomeView extends Vue { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// from https://benborgers.com/posts/pwa-detect-installed |
|
|
|
isInstalled() { |
|
|
|
// For iOS |
|
|
|
if ("standalone" in window.navigator) return true; |
|
|
|
|
|
|
|
// For Android |
|
|
|
if (window.matchMedia("(display-mode: standalone)").matches) return true; |
|
|
|
|
|
|
|
// If neither is true, it's not installed |
|
|
|
return false; |
|
|
|
notificationsSupported() { |
|
|
|
return "Notification" in window; |
|
|
|
} |
|
|
|
|
|
|
|
public async buildHeaders() { |
|
|
|
|
