Django PWA not installable on android

I have develop a simple django PWA project (without the published django-pwa app) to test for offline features. I have deployed my project on pythonanywhere: lecarrou.pythonanywhere.com. When I get my app in my desktop, my app is installable (Chrome and Edge).

But I have issues when trying to install on android mobile (Chrome, Edge, Firefox). I have tested many configurations (last following django-pwa structure) but I never get option to install app and beforeinstallprompt event seems not to be fired. I have build manifest.json following 'rules'. I debug using Chrome DevTools :

• Service worker is activated
• manifest is available (display:standalone ; Icons are available ; start_url and scope: '/')

As many tests I've made :

• console.log(window.matchMedia('display-mode: standalone)).'matches) return false
• fired manually beforeinstallprompt but failed

I have open and navigate many times in my app on Chrome for several days.

I have no idea what is going wrong and how I can solve this issue.

#serviceworker.js

const CACHE_NAME = "cdss-cache-v1";
const urlsToCache = [
    '/',
    '/cdss/select/',
    '/cdss/screening/',
    '/cdss/scoring/',
    '/cdss/recommandation/',
    '/static/css/styles.css',
    '/static/js/script.js',
    '/static/materialize/css/materialize.min.css',
    '/static/materialize/js/materialize.min.js',
    '/static/fonts/fonts.css',
    '/static/fonts/lobster-v30-latin-regular.woff2',
    '/static/fonts/material-icons-v143-latin-regular.woff2',
    '/static/pwa/images/icons/72x72.png',
    '/static/pwa/images/icons/96x96.png',
    '/static/pwa/images/icons/128x128.png',
    '/static/pwa/images/icons/144x144.png',
    '/static/pwa/images/icons/152x152.png',
    '/static/pwa/images/icons/192x192.png',
    '/static/pwa/images/icons/384x384.png',
    '/static/pwa/images/icons/512x512.png',
    '/static/pwa/images/icons/favicon.ico',
    // '/static/admin/'
    // ajoute toutes les routes et fichiers nécessaires pour le mode offline
];

self.addEventListener("install", function(event) {
    console.log("⚙️ Service Worker installé !");
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(function(cache) {
                return cache.addAll(urlsToCache);
            })
    );
});
self.addEventListener('activate', (event) => {
    console.log("✅ Service Worker activé !");
});
self.addEventListener('fetch', (event) => {
    console.log("🚀 Fetch event déclenché pour :", event.request.url);
    event.respondWith(fetch(event.request).catch(() => new Response("⚠️ Erreur de requête interceptée par Service Worker")));
});

#manifest.json

{
  "name": "CDSS Web",
  "short_name": "CDSSWeb",
  "description": "Clinical Decision Support System for TB",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#317EFB",
  "icons": [
    {
      "src": "/static/pwa/images/icons/192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/pwa/images/icons/512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "screenshots": [
    {
      "src": "/static/pwa/images/screenshot1.png",
      "sizes": "1080x1920",
      "type": "image/png",
      "form_factor": "wide"
    },
    {
      "src": "/static/pwa/images/screenshot2.png",
      "sizes": "1080x1920",
      "type": "image/png"
    }
  ],
  "dir": "auto",
  "lang": "en",
  "orientation": "any",
  "display_override": [
    "standalone",
    "window-controls-overlay",
    "fullscreen"
  ],
  "categories": [
    "health"
  ]
}

Вернуться на верх