|
|
|
@ -22,21 +22,89 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<div> |
|
|
|
<p>Here are ways to get notifications working.</p> |
|
|
|
<p>Here are ways to test notifications and get them working.</p> |
|
|
|
|
|
|
|
<h2 class="text-xl font-semibold">Test</h2> |
|
|
|
<p>Somehow call the service-worker self.showNotification</p> |
|
|
|
<h2 class="text-xl font-semibold">Full Test</h2> |
|
|
|
<div> |
|
|
|
<p> |
|
|
|
If this works then you're all set. |
|
|
|
<button |
|
|
|
@click="showTestNotification()" |
|
|
|
@click="sendTestWebPushMessage()" |
|
|
|
class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2" |
|
|
|
> |
|
|
|
See a Test Notification |
|
|
|
Send Yourself a Test Web Push Message |
|
|
|
</button> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
|
|
|
|
<h2 class="text-xl font-semibold">If this app is not installed...</h2> |
|
|
|
<div> |
|
|
|
<p> |
|
|
|
For best results, install this app on your device. In Chrome, it may |
|
|
|
prompt you, and you can also look for the "Install" command in the |
|
|
|
browser settings (as opposed to using it inside the broser app); on |
|
|
|
the deskop, look for this icon in the address bar: |
|
|
|
<img |
|
|
|
src="../assets/help/chrome-install-pwa.png" |
|
|
|
alt="Chrome 'install' icon" |
|
|
|
class="ml-4" |
|
|
|
/> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
|
|
|
|
<h2 class="text-xl font-semibold"> |
|
|
|
If "you must enable notifications"... |
|
|
|
</h2> |
|
|
|
<div> |
|
|
|
<p> |
|
|
|
Wait for about 10 seconds (for the service worker to activate), then |
|
|
|
<button class="text-blue-500" @click="showNotificationChoice()"> |
|
|
|
click here. |
|
|
|
</button> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
|
|
|
|
<h2 class="text-xl font-semibold">Check OS-level permissions</h2> |
|
|
|
<h2 class="text-xl font-semibold">Check App Permissions</h2> |
|
|
|
<div> |
|
|
|
Walk-throughs & screenshots, maybe for all combinations of OS & |
|
|
|
browsers. |
|
|
|
<p> |
|
|
|
In Apple iOS, check "Settings" -> "Notifications", look for the Time |
|
|
|
Safari app (or the browser you're using), and make sure notifications |
|
|
|
are enabled. |
|
|
|
</p> |
|
|
|
<p> |
|
|
|
In Android, hold on to the app icon, then select "App Info", then |
|
|
|
"Notifications" and make sure they're enabled. If you installed the |
|
|
|
app with Chrome, go to Chrome "App Info", then "Storage & Cache" and |
|
|
|
"Clear Storage"; this Chrome reset helps even if the app isn't run |
|
|
|
inside the Chrome browser. |
|
|
|
</p> |
|
|
|
<p> |
|
|
|
On a Mac, go to "Settings" and check "Notifications". |
|
|
|
<img |
|
|
|
src="../assets/help/mac-installed-app-settings.png" |
|
|
|
alt="Mac app settings" |
|
|
|
class="ml-4" |
|
|
|
/> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
|
|
|
|
<h2 class="text-xl font-semibold">Check Browser Permissions</h2> |
|
|
|
<div> |
|
|
|
<p>In Apple iOS, check Settings -> Notifications.</p> |
|
|
|
<p>In Android, check Settings -> Notifications.</p> |
|
|
|
|
|
|
|
You can find more details about compatibility |
|
|
|
<a |
|
|
|
href="https://developer.mozilla.org/en-US/docs/Web/API/Push_API#browser_compatibility" |
|
|
|
class="text-blue-500" |
|
|
|
target="_blank" |
|
|
|
> |
|
|
|
here <fa icon="arrow-up-right-from-square" class="fa-fw" /> |
|
|
|
</a> |
|
|
|
</div> |
|
|
|
|
|
|
|
<h2 class="text-xl font-semibold">Check OS Permissions</h2> |
|
|
|
<div class="px-2"> |
|
|
|
<div> |
|
|
|
<h3 class="text-lg font-semibold">Mobile Phone - Apple iOS</h3> |
|
|
|
<div> |
|
|
|
@ -45,49 +113,89 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<h3 class="text-lg font-semibold">Mobile Phone - Google Android</h3> |
|
|
|
<div>See the browser section.</div> |
|
|
|
|
|
|
|
<h3 class="text-lg font-semibold">Desktop - Mac</h3> |
|
|
|
<div>Requires Mac OS 13.</div> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
We recommend Chrome. It must be version 42 or higher. Check your |
|
|
|
version under Settings -> About Chrome. |
|
|
|
</div> |
|
|
|
|
|
|
|
<h2 class="text-xl font-semibold">Check browser-level permissions</h2> |
|
|
|
<p>Walk-throughs & screenshots for browser settings</p> |
|
|
|
<div> |
|
|
|
<h3 class="text-lg font-semibold">Desktop - Mac</h3> |
|
|
|
<div> |
|
|
|
<h3 class="text-lg font-semibold">Mobile Phone - Apple iOS</h3> |
|
|
|
<div>Make sure your OS (above) supports it.</div> |
|
|
|
<span> |
|
|
|
Requires Mac OS 13; see your macOS version under Apple -> About |
|
|
|
This Mac. |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
|
|
|
|
<h3 class="text-lg font-semibold">Mobile Phone - Android</h3> |
|
|
|
<div> |
|
|
|
Chrome requires version 50. Hold icon, select "App info", and enable |
|
|
|
notifications. |
|
|
|
<h3 class="text-lg font-semibold">Windows desktop</h3> |
|
|
|
In Windows, check Settings -> Notifications. |
|
|
|
<img |
|
|
|
src="../assets/help/windows-system-enable-notifications.png" |
|
|
|
alt="Windows system settings" |
|
|
|
class="ml-4" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
You can find more details about compatibility |
|
|
|
<a |
|
|
|
href="https://developer.mozilla.org/en-US/docs/Web/API/Push_API#browser_compatibility" |
|
|
|
class="text-blue-500" |
|
|
|
target="_blank" |
|
|
|
> |
|
|
|
here <fa icon="arrow-up-right-from-square" class="fa-fw" /> |
|
|
|
</a> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<h2 class="text-xl font-semibold">Explain full reset to start again</h2> |
|
|
|
<h2 class="text-xl font-semibold">Reinstall</h2> |
|
|
|
<div> |
|
|
|
<p> |
|
|
|
Walk-throughs for clearing everything & subscribing anew to get a |
|
|
|
message |
|
|
|
If all else fails, uninstall the app, ensure all the browser tabs with |
|
|
|
it are closed, and clear out caches and storage. |
|
|
|
</p> |
|
|
|
<ul class="ml-4 list-disc"> |
|
|
|
<li> |
|
|
|
Clear cache for site. (In Chrome, go to `chrome://settings/cookies` |
|
|
|
and "all site data and permissions"; in Firefox, go to |
|
|
|
`about:preferences` and search for "cache" then "Manage Data", and |
|
|
|
also manually remove the IndexedDB data if the DBs still show.) |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
Clear notification permission. (in Chrome, go to |
|
|
|
`chrome://settings/content/notifications`; in Firefox, go to |
|
|
|
`about:preferences` and search for "notifications".) |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
Unregister service worker. (in Chrome, go to |
|
|
|
`chrome://serviceworker-internals/`; in Firefox, go to |
|
|
|
`about:serviceworkers`.) |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
Clear Cache Storage. (in Chrome, in dev tools under Application; in |
|
|
|
Firefox, in dev tools under Storage.) |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
<p>Then reinstall the app.</p> |
|
|
|
</div> |
|
|
|
|
|
|
|
<h2 class="text-xl font-semibold">Auto-detection</h2> |
|
|
|
<p>Show results of auto-detection whether they're turned on</p> |
|
|
|
<button |
|
|
|
@click="showTestNotification()" |
|
|
|
class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2" |
|
|
|
> |
|
|
|
Send Test Notification Directly to Device |
|
|
|
</button> |
|
|
|
|
|
|
|
<button |
|
|
|
@click="alertWebPushSubscription()" |
|
|
|
class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2" |
|
|
|
> |
|
|
|
Show Subscription from Web Push Server |
|
|
|
Show Web Push Subscription Info |
|
|
|
</button> |
|
|
|
|
|
|
|
<button |
|
|
|
@click="sendTestWebPushMessage()" |
|
|
|
class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2" |
|
|
|
> |
|
|
|
Send Myself a Test Web Push Message |
|
|
|
Send Yourself a Test Web Push Message |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
@ -249,5 +357,17 @@ export default class HelpNotificationsView extends Vue { |
|
|
|
); |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
showNotificationChoice() { |
|
|
|
this.$notify( |
|
|
|
{ |
|
|
|
group: "modal", |
|
|
|
type: "notification-permission", |
|
|
|
title: "", // unused, only here to satisfy type check |
|
|
|
text: "", // unused, only here to satisfy type check |
|
|
|
}, |
|
|
|
-1, |
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
