Экспресс обслуживают 2 разных угловых PWA - PullRequest
Новая
       13

Экспресс обслуживают 2 разных угловых PWA

0 голосов
/ 22 июня 2019

Я боролся с этим в течение некоторого времени, и я начинаю думать, что мой подход совершенно неверен.Если это так, пожалуйста, дайте мне знать и укажите направление.

Контекст

У меня есть два угловых приложения: одно обычное (для настольных ПК) и одно ионное (для мобильных устройств).Я обслуживаю их с помощью экспресс-сервера следующим образом: 

app.use(expressStatic(path.join(__dirname, '/../web-app'), { index: false }));
app.use(expressStatic(path.join(__dirname, '/../ionic-app'), { index: false }));

app.get('*', function(req, res) {
  if (isMobile(req)) {
    res.sendFile(path.join(__dirname, '/../ionic-app/index.html'));
  } else {
    res.sendFile(path.join(__dirname, '/../web-app/index.html'));
  }
});

Он работал с файлом, но недавно я создал их (оба) PWA с помощью команды ng add @angular/pwa ... и не изменил ничего, связанного с работником сервиса.

Проблема

Теперь я заметил одну проблему с этим решением.Если эти два местоположения /../web-app /../ionic-app имеют файл с одинаковым именем (например, ngsw-worker.js, manifest.webmanifest), он будет опущен при запросе, подобном этому <link rel="manifest" href="manifest.webmanifest">.Я не уверен, какой из них будет обслуживаться.

Решение проблемы файлов с одинаковыми именами

Я попытался обойти проблему, заменив приведенный выше код на: 

app.get('*.*', (req, res, next) => {
  if (isMobile(req)) {
    expressStatic(path.join(__dirname, '/../ionic-app'))(req, res, next);
  } else {
    expressStatic(path.join(__dirname, '/../web-app'))(req, res, next);
  }
});

app.get('*', function(req, res) {
  if (isMobile(req)) {
    res.sendFile(path.join(__dirname, '/../ionic-app/index.html'));
  } else {
    res.sendFile(path.join(__dirname, '/../web-app/index.html'));
  }
});

Это решило проблему с перезаписью файлов, но я нашел по крайней мере еще одну проблему.Выполните следующие действия:

  1. Войдите на сайт в мобильном режиме - он работает ✅
  2. Попробуйте войти с отключенной сетью (автономно) - работает)
  3. Запрос версии для настольного компьютерасайта - работает ✅
  4. Попробуйте войти с отключенной сетью (оффлайн) - не работает ❌
  5. Вернуться на мобильную версию сайта - работает ✅
  6. Попробуйте войти с отключенной сетью (в автономном режиме) - она ​​не работает ❌

Я знаю, что это сценарий, который не применим к большинству пользователей, но все же хотел бы, чтобы он работал.Более того, это убивает возможность запуска приложения в автономном режиме, пока кто-то не очистит кеш.

Я также боюсь, что это решение не очень «чистое» или «по книге».

Вопрос

Каким было бы «элегантное» решение «перейти к» для обслуживания двух разных версий приложения в зависимости от устройства (настольное / мобильное)?

Я бы предпочел, чтобы решение было простымнасколько это возможно, firebase или heroku для хостинга, поэтому никаких сложных решений nginx и т. д.

Мои мысли / исследования

Я заметил различное поведение в интернете:

  • Facebook, и некоторые старые сайты перенаправляют вас по другому пути с помощью мобильного приложения (facebook.com -> m.facebook.com) - это не решение, которое я имею в виду.
  • airbnb делает это молча, сортировкао том, как я хочу это здесь.Так что URL-адрес один и тот же, но обслуживаемое приложение отличается.
...