mirror of
https://gitlab.com/PronounsPage/PronounsPage.git
synced 2025-09-22 12:03:25 -04:00
58 lines
2.3 KiB
Vue
58 lines
2.3 KiB
Vue
<template>
|
||
<div v-if="display" class="alert alert-warning small">
|
||
<button v-if="dismissable" type="button" class="btn-close float-end" aria-label="Close" @click="dismiss"></button>
|
||
<p>
|
||
Hi! It seems you're using Safari. We’ve been getting reports regarding issues with some pages not loading on that browser.
|
||
From the information we’ve gathered so far, it seems like the issue is limited to Safari
|
||
(and on iPhones and iPads all browsers are unfortunately forced to use Safari under the hood as their engine).
|
||
</p>
|
||
|
||
<p>
|
||
Safari has been changing a lot recently about the way they handle Progressive Web Apps
|
||
so that they can implement malicious compliance with new EU regulations –
|
||
and <a href="https://techcrunch.com/2024/02/15/apple-confirms-its-breaking-iphone-web-apps-in-the-eu-on-purpose/" target="_blank">
|
||
Apple has actually confirmed they break such apps on purpose
|
||
</a> –
|
||
and while we haven’t been able yet to identify the root cause of those issues, they seem to be stemming from those changes on Apple’s end.
|
||
</p>
|
||
|
||
<p>
|
||
This issue is very difficult to debug, as we’re not getting error messages in the logs or the console,
|
||
and we cannot even reproduce it ourselves, as it seems to only be broken for some users, but not all.
|
||
We’ll be working on trying to find a solution, but we can’t make any promises yet.
|
||
Accessing the page from a non-Safari browser on a desktop seems to be the only solution in the meanwhile.
|
||
Keep in mind that Apple forces all browsers on iPhone / iPad to use Safari's engine under the hood.
|
||
</p>
|
||
|
||
<p class="mb-0">
|
||
Sorry for the trouble! 😢
|
||
</p>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: {
|
||
dismissable: { type: Boolean },
|
||
},
|
||
data() {
|
||
return {
|
||
display: false,
|
||
};
|
||
},
|
||
mounted() {
|
||
this.display = this.$isSafari();
|
||
|
||
if (this.dismissable && !!localStorage.getItem('safariWarningDismissed')) {
|
||
this.display = false;
|
||
}
|
||
},
|
||
methods: {
|
||
dismiss() {
|
||
localStorage.setItem('safariWarningDismissed', '1');
|
||
this.display = false;
|
||
},
|
||
},
|
||
};
|
||
</script>
|