v2.5.2
Giriş yap

ios pwa sorunu

rotaile
38 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
6 gün önce

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

rotaile
5 gün önce

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