Browse Source

add notification check with instructions on front screen

starred-projects
Trent Larson 10 months ago
parent
commit
cc931dcb04
  1. 16
      package-lock.json
  2. 2
      package.json
  3. 3
      src/assets/help/apple-share-icon.svg
  4. BIN
      src/assets/help/install-android-chrome.png
  5. 2
      src/main.ts
  6. 8
      src/views/HelpNotificationsView.vue
  7. 66
      src/views/HomeView.vue

16
package-lock.json

@ -50,6 +50,7 @@
"reflect-metadata": "^0.1.13", "reflect-metadata": "^0.1.13",
"register-service-worker": "^1.7.2", "register-service-worker": "^1.7.2",
"three": "^0.156.1", "three": "^0.156.1",
"ua-parser-js": "^1.0.37",
"util": "^0.12.5", "util": "^0.12.5",
"vue": "^3.3.4", "vue": "^3.3.4",
"vue-axios": "^3.5.2", "vue-axios": "^3.5.2",
@ -62,6 +63,7 @@
"@types/leaflet": "^1.9.4", "@types/leaflet": "^1.9.4",
"@types/ramda": "^0.29.3", "@types/ramda": "^0.29.3",
"@types/three": "^0.155.1", "@types/three": "^0.155.1",
"@types/ua-parser-js": "^0.7.39",
"@typescript-eslint/eslint-plugin": "^6.6.0", "@typescript-eslint/eslint-plugin": "^6.6.0",
"@typescript-eslint/parser": "^6.6.0", "@typescript-eslint/parser": "^6.6.0",
"@vue-leaflet/vue-leaflet": "^0.10.1", "@vue-leaflet/vue-leaflet": "^0.10.1",
@ -8975,6 +8977,12 @@
"integrity": "sha512-IDaobHimLQhjwsQ/NMwRVfa/yL7L/wriQPMhw1ZJall0KX6E1oxk29XMDeilW5qTIg5aoiqf5Udy8U/51aNoQQ==", "integrity": "sha512-IDaobHimLQhjwsQ/NMwRVfa/yL7L/wriQPMhw1ZJall0KX6E1oxk29XMDeilW5qTIg5aoiqf5Udy8U/51aNoQQ==",
"dev": true "dev": true
}, },
"node_modules/@types/ua-parser-js": {
"version": "0.7.39",
"resolved": "https://registry.npmjs.org/@types/ua-parser-js/-/ua-parser-js-0.7.39.tgz",
"integrity": "sha512-P/oDfpofrdtF5xw433SPALpdSchtJmY7nsJItf8h3KXqOslkbySh8zq4dSWXH2oTjRvJ5PczVEoCZPow6GicLg==",
"dev": true
},
"node_modules/@types/web-bluetooth": { "node_modules/@types/web-bluetooth": {
"version": "0.0.18", "version": "0.0.18",
"resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.18.tgz", "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.18.tgz",
@ -26834,9 +26842,9 @@
} }
}, },
"node_modules/ua-parser-js": { "node_modules/ua-parser-js": {
"version": "1.0.36", "version": "1.0.37",
"resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.36.tgz", "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.37.tgz",
"integrity": "sha512-znuyCIXzl8ciS3+y3fHJI/2OhQIXbXw9MWC/o3qwyR+RGppjZHrM27CGFSKCJXi2Kctiz537iOu2KnXs1lMQhw==", "integrity": "sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ==",
"funding": [ "funding": [
{ {
"type": "opencollective", "type": "opencollective",
@ -26851,8 +26859,6 @@
"url": "https://github.com/sponsors/faisalman" "url": "https://github.com/sponsors/faisalman"
} }
], ],
"optional": true,
"peer": true,
"engines": { "engines": {
"node": "*" "node": "*"
} }

2
package.json

@ -50,6 +50,7 @@
"reflect-metadata": "^0.1.13", "reflect-metadata": "^0.1.13",
"register-service-worker": "^1.7.2", "register-service-worker": "^1.7.2",
"three": "^0.156.1", "three": "^0.156.1",
"ua-parser-js": "^1.0.37",
"util": "^0.12.5", "util": "^0.12.5",
"vue": "^3.3.4", "vue": "^3.3.4",
"vue-axios": "^3.5.2", "vue-axios": "^3.5.2",
@ -62,6 +63,7 @@
"@types/leaflet": "^1.9.4", "@types/leaflet": "^1.9.4",
"@types/ramda": "^0.29.3", "@types/ramda": "^0.29.3",
"@types/three": "^0.155.1", "@types/three": "^0.155.1",
"@types/ua-parser-js": "^0.7.39",
"@typescript-eslint/eslint-plugin": "^6.6.0", "@typescript-eslint/eslint-plugin": "^6.6.0",
"@typescript-eslint/parser": "^6.6.0", "@typescript-eslint/parser": "^6.6.0",
"@vue-leaflet/vue-leaflet": "^0.10.1", "@vue-leaflet/vue-leaflet": "^0.10.1",

3
src/assets/help/apple-share-icon.svg

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" enable-background="new 0 0 50 50">
<path d="M30.3 13.7L25 8.4l-5.3 5.3-1.4-1.4L25 5.6l6.7 6.7z"/><path d="M24 7h2v21h-2z"/><path d="M35 40H15c-1.7 0-3-1.3-3-3V19c0-1.7 1.3-3 3-3h7v2h-7c-.6 0-1 .4-1 1v18c0 .6.4 1 1 1h20c.6 0 1-.4 1-1V19c0-.6-.4-1-1-1h-7v-2h7c1.7 0 3 1.3 3 3v18c0 1.7-1.3 3-3 3z"/>
</svg>

After

Width:  |  Height:  |  Size: 365 B

BIN
src/assets/help/install-android-chrome.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

2
src/main.ts

@ -56,6 +56,7 @@ import {
faSpinner, faSpinner,
faSquareCaretDown, faSquareCaretDown,
faSquareCaretUp, faSquareCaretUp,
faSquarePlus,
faTrashCan, faTrashCan,
faTriangleExclamation, faTriangleExclamation,
faUser, faUser,
@ -109,6 +110,7 @@ library.add(
faSpinner, faSpinner,
faSquareCaretDown, faSquareCaretDown,
faSquareCaretUp, faSquareCaretUp,
faSquarePlus,
faTrashCan, faTrashCan,
faTriangleExclamation, faTriangleExclamation,
faUser, faUser,

8
src/views/HelpNotificationsView.vue

@ -21,6 +21,7 @@
</h1> </h1>
</div> </div>
<!-- eslint-disable prettier/prettier -->
<div> <div>
<p>Here are ways to test notifications and get them working.</p> <p>Here are ways to test notifications and get them working.</p>
@ -39,13 +40,13 @@
</div> </div>
<h2 class="text-xl font-semibold mt-4"> <h2 class="text-xl font-semibold mt-4">
If this is not installed as an app... If this app doesn't support notifications...
<!-- Note that that exact verbiage shows in a message elsewhere. --> <!-- Note that that exact verbiage shows in a message elsewhere. -->
</h2> </h2>
<div> <div>
<p> <p>
For best results on mobile, install this app on your device (as To be notified of interesting updates, install this app on your device
opposed to using it inside the browser app). In Chrome, it may prompt (as opposed to using it inside the browser app). In Chrome, it may prompt
you, and you can also look for the "Install" command in the browser you, and you can also look for the "Install" command in the browser
settings; on the the desktop, look for this icon in the address bar: settings; on the the desktop, look for this icon in the address bar:
<img <img
@ -286,6 +287,7 @@
for ways to contact us. for ways to contact us.
</p> </p>
</div> </div>
<!-- eslint-enable -->
</section> </section>
</template> </template>
<script lang="ts"> <script lang="ts">

66
src/views/HomeView.vue

@ -8,25 +8,57 @@
Time Safari Time Safari
</h1> </h1>
<!-- show the actions for recognizing a give --> <!-- prompt to install notifications -->
<div class="mb-8"> <div class="mb-8">
<div <div
v-if="!isInstalled()" v-if="!notificationsSupported()"
class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4" class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4"
> >
<p> <p style="display: inline; align-items: center">
This is not installed as an app. This app doesn't support notifications, so let's fix that. <br />
<!-- Note that that exact verbiage shows in the help. --> <!-- Note that that exact verbiage shows in the help. -->
Look for an "install" prompt or action.
<router-link <span v-if="userAgentInfo.getOS().name === 'iOS'">
:to="{ name: 'help-notifications' }" Tap on "Share"<img
class="text-blue-500" 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. You should see a prompt to install, or you can click on the
</router-link> 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> </p>
</div> </div>
</div>
<!-- show the actions for recognizing a give -->
<div class="mb-8">
<div <div
v-if="!activeDid" v-if="!activeDid"
class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4" class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4"
@ -159,6 +191,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { UAParser } from "ua-parser-js";
import { Component, Vue } from "vue-facing-decorator"; import { Component, Vue } from "vue-facing-decorator";
import EntityIcon from "@/components/EntityIcon.vue"; import EntityIcon from "@/components/EntityIcon.vue";
@ -207,6 +240,7 @@ export default class HomeView extends Vue {
isHiddenSpinner = true; isHiddenSpinner = true;
isRegistered = false; isRegistered = false;
numAccounts = 0; numAccounts = 0;
userAgentInfo = new UAParser(); // see https://docs.uaparser.js.org/v2/api/ua-parser-js/get-os.html
async beforeCreate() { async beforeCreate() {
await accountsDB.open(); await accountsDB.open();
@ -266,16 +300,8 @@ export default class HomeView extends Vue {
} }
} }
// from https://benborgers.com/posts/pwa-detect-installed notificationsSupported() {
isInstalled() { return "Notification" in window;
// 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;
} }
public async buildHeaders() { public async buildHeaders() {

Loading…
Cancel
Save