Fix PWA redirect loop and installation options after uninstalling PWA

This commit is contained in:
David Frassi
2026-06-18 02:36:52 +02:00
parent 93385097f2
commit b0bb5735c8
20 changed files with 466 additions and 145 deletions
+9 -6
View File
@@ -1072,8 +1072,10 @@ export class PlayerPage implements OnInit, AfterViewInit, OnDestroy {
// Try to fetch YouTube thumbnail first if available
if (thumbUrl) {
try {
// Use images.weserv.nl as a CORS proxy to bypass YouTube's CORS policy
const proxiedUrl = `https://images.weserv.nl/?url=${encodeURIComponent(thumbUrl)}`;
const response = await Promise.race([
fetch(thumbUrl),
fetch(proxiedUrl),
new Promise<Response>((_, reject) => setTimeout(() => reject(new Error('Timeout')), 3000))
]);
if (response.ok) {
@@ -1083,10 +1085,8 @@ export class PlayerPage implements OnInit, AfterViewInit, OnDestroy {
} catch (e) {
console.warn('[Share] Failed to fetch YouTube thumbnail due to CORS or timeout:', e);
}
}
// If no YouTube thumb or fetch failed, fallback to local canticristiani logo (favicon)
if (!fileToShare) {
} else {
// If no YouTube thumb is available, fallback to local canticristiani logo (favicon)
try {
const response = await fetch('assets/icon/favicon.png');
if (response.ok) {
@@ -1106,7 +1106,10 @@ export class PlayerPage implements OnInit, AfterViewInit, OnDestroy {
url: shareLink
};
if (fileToShare && navigator.canShare && navigator.canShare({ files: [fileToShare] })) {
const isMac = /Macintosh|MacIntel|MacPPC|Mac68K/.test(navigator.userAgent) ||
(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
if (!isMac && fileToShare && navigator.canShare && navigator.canShare({ files: [fileToShare] })) {
shareDataObj.files = [fileToShare];
}
+4 -1
View File
@@ -178,7 +178,10 @@ export class PlaylistPage {
const blob = await res.blob();
const file = new File([blob], fileName, { type: 'image/png' });
if (navigator.share && navigator.canShare && navigator.canShare({ files: [file] })) {
const isMac = /Macintosh|MacIntel|MacPPC|Mac68K/.test(navigator.userAgent) ||
(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
if (!isMac && navigator.share && navigator.canShare && navigator.canShare({ files: [file] })) {
await navigator.share({
files: [file],
title: 'Playlist CantiCristiani',
+15 -1
View File
@@ -53,6 +53,20 @@
</div>
</div>
<!-- PWA Install Group (Desktop Fallback Instructions) -->
<div class="settings-group glass ion-margin-bottom" *ngIf="!settingsService.showInstallButton() && !settingsService.isStandalone() && !settingsService.isIos()">
<ion-item class="transparent-item" lines="none">
<ion-icon name="download-outline" slot="start" color="secondary"></ion-icon>
<ion-label class="outfit-font" style="white-space: normal;">
<h2 class="settings-item-title" style="color: var(--ion-color-secondary); font-weight: bold; margin-bottom: 6px;">Come installare l'applicazione</h2>
<p class="settings-item-subtitle" style="font-size: 0.85rem; line-height: 1.45; opacity: 0.9; color: var(--ion-text-color); margin: 0;">
Se usi <strong>Chrome / Edge / Brave</strong>: puoi installarla cliccando sull'icona di installazione <span style="display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.1); border-radius: 6px; padding: 2px 6px; font-size: 0.9rem; vertical-align: middle;"></span> o <span style="display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.1); border-radius: 6px; padding: 2px 6px; font-size: 0.9rem; vertical-align: middle;">📥</span> che appare a destra nella barra degli indirizzi del browser.<br><br>
Se usi <strong>Safari (su Mac)</strong>: clicca sul menu <strong>File</strong> in alto e seleziona <strong>Aggiungi al Dock...</strong>.
</p>
</ion-label>
</ion-item>
</div>
<div class="settings-group glass ion-margin-bottom">
<ion-item class="transparent-item" lines="none">
<ion-icon name="scan-outline" slot="start" color="secondary"></ion-icon>
@@ -175,7 +189,7 @@
<div class="glass" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); padding: 8px 12px; border-radius: 10px; flex-grow: 1; display: flex; align-items: center;">
<input type="text"
#comunitaCodeInput
placeholder="Es: 123456"
placeholder="il codice di 6 cifre"
style="background: transparent; border: none; color: var(--ion-text-color); font-size: 0.85rem; width: 100%; outline: none;"
class="outfit-font"
(keyup.enter)="saveComunitaCode(comunitaCodeInput.value)">