forked from jsnbuchanan/crowd-funder-for-time-pwa
doc: add more help for the notifications
This commit is contained in:
@@ -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>
|
||||
<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"
|
||||
>
|
||||
See a Test Notification
|
||||
</button>
|
||||
|
||||
<h2 class="text-xl font-semibold">Check OS-level permissions</h2>
|
||||
<h2 class="text-xl font-semibold">Full Test</h2>
|
||||
<div>
|
||||
Walk-throughs & screenshots, maybe for all combinations of OS &
|
||||
browsers.
|
||||
<p>
|
||||
If this works then you're all set.
|
||||
<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 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 App Permissions</h2>
|
||||
<div>
|
||||
<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>
|
||||
<div>
|
||||
We recommend Chrome. It must be version 42 or higher. Check your
|
||||
version under Settings -> About Chrome.
|
||||
</div>
|
||||
|
||||
<h3 class="text-lg font-semibold">Desktop - Mac</h3>
|
||||
<div>Requires Mac OS 13.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="text-xl font-semibold">Check browser-level permissions</h2>
|
||||
<p>Walk-throughs & screenshots for browser settings</p>
|
||||
<div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold">Mobile Phone - Apple iOS</h3>
|
||||
<div>Make sure your OS (above) supports it.</div>
|
||||
|
||||
<h3 class="text-lg font-semibold">Mobile Phone - Android</h3>
|
||||
<div>
|
||||
Chrome requires version 50. Hold icon, select "App info", and enable
|
||||
notifications.
|
||||
<span>
|
||||
Requires Mac OS 13; see your macOS version under Apple -> About
|
||||
This Mac.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<p>
|
||||
Walk-throughs for clearing everything & subscribing anew to get a
|
||||
message
|
||||
</p>
|
||||
<h2 class="text-xl font-semibold">Reinstall</h2>
|
||||
<div>
|
||||
<p>
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user