v2.5.2
Giriş yap

ios pwa sorunu

rotaile
433 defa görüntülendi

merhaba arkadaşlar, Tayfun hocanın pwa makalesini gördüm ve sayfama uyguladım. Android tarafında chrome da sıkıntı yok fakat samsung internette ve ios tarafında çalışmıyor.

sayfamın bağlantısı

html:

    <link rel="manifest" href="{{ asset('/manifest.json') }}">
    <meta name="theme-color" content="#6777ef"/>
    <link rel="apple-touch-icon" href="{{ asset('img/logo.png') }}">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-title" content="sosyalkampus.net">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link href="{{ asset('img/logo.png') }}" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
    <link href="{{ asset('img/logo.png') }}" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
    <link href="{{ asset('img/logo.png') }}" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
    <link href="{{ asset('img/logo.png') }}" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
    <link href="{{ asset('img/logo.png') }}" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
    <link href="{{ asset('img/logo.png') }}" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
    <link href="{{ asset('img/logo.png') }}" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
    <link rel="apple-touch-icon" sizes="128x128" href="{{ asset('img/logo.png') }}">
    <link rel="apple-touch-icon-precomposed" sizes="128x128" href="{{ asset('img/logo.png') }}">
    <link rel="icon" sizes="128x128" href="{{ asset('img/logo.png') }}">
    <script src="{{ asset('/sw.js') }}"></script>
    <script>
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', function () {
                navigator.serviceWorker.register('/sw.js');
            });
        }
    </script>

javascript:

const installApp = document.getElementById('install-app');

installApp.addEventListener('click', async () => {
    if (deferredPrompt !== null) {
        deferredPrompt.prompt();
        const { outcome } = await deferredPrompt.userChoice;
        if (outcome === 'accepted') {
            deferredPrompt = null;
        }
    }
});

window.addEventListener('beforeinstallprompt', (e) => {
    $('.install-app-container').show();
    deferredPrompt = e;
});

manifest.json:

    {
    "name": "Sosyal Kampüs",
    "short_name": "Sosyal Kampüs",
    "start_url": "/giris-yap",
    "theme_color": "#212529",
    "background_color": "#ffc107",
    "display": "fullscreen",
    "orientation": "natural",
    "icons": [
        {
            "src": "img/pwa/logo.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ]
}
Cevap yaz
Cevaplar (2)
bbera
868 gün önce

Büyük olasılıkla bahsettiğin cihazlardaki browserlar PWA desteği sunmuyor. Buradan kontrol edbilirsin.

rotaile
867 gün önce

Sence tarayıcı sorunu mu yoksa cihaz mı?