v2.5.2
Giriş yap

ios pwa sorunu

rotaile
338 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"
        }
    ]
}
bbera
621 gün önce

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