Merge pull request #3779 from thelounge/xpaw/ios-notifs-note

Add an explanation why push notifications are not supported on iOS

client/components/Windows/Settings.vue

@@ -249,6 +249,17 @@
 					<div v-if="$store.state.pushNotificationState === 'unsupported'" class="error">
 						<strong>Warning</strong>:
 						<span>Push notifications are not supported by your browser.</span>
+
+						<div v-if="isIOS" class="apple-push-unsupported">
+							Safari does
+							<a
+								href="https://bugs.webkit.org/show_bug.cgi?id=182566"
+								target="_blank"
+								rel="noopener"
+								>not support the web push notification specification</a
+							>, and because all browsers on iOS use Safari under the hood, The Lounge
+							is unable to provide push notifications on iOS devices.
+						</div>
 					</div>
 				</div>
 			</template>
@@ -461,6 +472,7 @@ export default {
 					"The current password field does not match your account password",
 				update_failed: "Failed to update your password",
 			},
+			isIOS: navigator.platform.match(/(iPhone|iPod|iPad)/i) || false,
 		};
 	},
 	computed: {

client/css/style.css

@@ -1839,6 +1839,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	margin-top: 15px;
 }
 
+#settings .apple-push-unsupported,
 #settings .settings-sync-panel {
 	padding: 10px;
 	margin-bottom: 16px;
@@ -1868,6 +1869,11 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
 }
 
+#settings .apple-push-unsupported a {
+	color: inherit;
+	text-decoration: underline;
+}
+
 #settings .opt {
 	display: block;
 	padding: 5px 0 5px 1px;