Как я могу исправить свое настольное прогрессивное веб-приложение - PullRequest
Новая
       8

Как я могу исправить свое настольное прогрессивное веб-приложение

0 голосов
/ 22 октября 2018

Я написал следующий простой код для создания и тестирования Progressive Web App для настольных ПК с Chrome 70:

manifest.json: 

{
    "name": "App name",
    "short_name": "Short name",
    "scope": "/",
    "start_url": "/index.html",
    "display": "standalone",
    "background_color": "#2196F3",
    "theme_color": "#2196F3",
    "icons": [{
        "src": "images/icons/icon-128x128.png",
          "sizes": "128x128",
          "type": "image/png"
        }, {
          "src": "images/icons/icon-144x144.png",
          "sizes": "144x144",
          "type": "image/png"
        }, {
          "src": "images/icons/icon-152x152.png",
          "sizes": "152x152",
          "type": "image/png"
        }, {
          "src": "images/icons/icon-192x192.png",
          "sizes": "192x192",
          "type": "image/png"
        }, {
          "src": "images/icons/icon-256x256.png",
          "sizes": "256x256",
          "type": "image/png"
        }]
}

main.js: 

if (window.matchMedia('(display-mode: standalone)').matches) {
    console.log('display-mode is standalone');
  }

  // For Safari
  if (window.navigator.standalone === true) {
    console.log('display-mode is standalone');
  }



  let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
   // Update UI notify the user they can add to home screen
  // btnAdd.style.display = 'block';
});


  btnAdd.addEventListener('click', (e) => {
    // hide our user interface that shows our A2HS button
    btnAdd.style.display = 'none';
    // Show the prompt
    deferredPrompt.prompt();
    // Wait for the user to respond to the prompt
    deferredPrompt.userChoice
      .then((choiceResult) => {
        if (choiceResult.outcome === 'accepted') {
          console.log('User accepted the A2HS prompt');
        } else {
          console.log('User dismissed the A2HS prompt');
        }
        deferredPrompt = null;
      });
  });

    // If app is instaled
    window.addEventListener('appinstalled', (evt) => {
        app.logEvent('a2hs', 'installed');
      });

index.html: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="canonical" href="https://weather-pwa-sample.firebaseapp.com/final/">

    <title>Page Title</title>
    <!-- manifest  -->
    <link rel="manifest" href="/manifest.json">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>

    <!-- Add to home screen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Weather PWA">
<link rel="apple-touch-icon" href="images/icons/icon-152x152.png">
<meta name="msapplication-TileImage" content="images/icons/icon-144x144.png">
<meta name="msapplication-TileColor" content="#2F3BA2">

</head>
<body>
    Hello World!
</body>
</html>

Я запустил его с мыслью Приложение Chrome Server , но ничего не попросил меня установить на домашний экран или что-то еще.

Я думаю, что мой main.js пропущен, есть ошибка, может ли кто-нибудь мне помочь!

...