Задать вопрос
@m4son

Как создать простое PWA без работы офлайн?

Мне нужен простой PWA:
1) без работы офлайн
2) если пользователь заходит без интернета, выводить заглушку
3) Кешировать только изображения, css и js

Я создал файлы, в консоли появилась строка 'Service worker active', но Lighthouse выдает ошибку
"No matching service worker detected. You may need to reload the page, or check that the scope of the service worker for the current page encloses the scope and start URL from the manifest.",
хотя файлы загрузились и имеют статус 200.

manifest.json
{
  "lang": "ru",
  "name": "Name",
  "short_name": "Name",
  "icons": [
    {
      "src": "/android-chrome-48x48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "/mstile-150x150.png",
      "sizes": "150x150",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "start_url": "/",
  "display": "standalone",
  "orientation": "natural"
}

service-worker.js
const registerServiceWorker = async function() {
  console.log("file serviceWorker is include");
  if ('serviceWorker' in navigator) {
    console.log("serviceWorker in navigator");
    try {
      const registration = await navigator.serviceWorker.register(
        '/service-worker.js',
        {
          scope: '/',
        }
      );
      if (registration.installing) {
        console.log('Service worker installing');
      } else if (registration.waiting) {
        console.log('Service worker installed');
      } else if (registration.active) {
        console.log('Service worker active');
      }
    } catch (error) {
      console.error(`Registration failed with ${error}`);
    }
  }
};

registerServiceWorker();
  • Вопрос задан
  • 168 просмотров
Подписаться 2 Простой Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы