PWA работает в автономном режиме

#https #progressive-web-apps #offline #offlineapps

Вопрос:

Я пытаюсь создать PWA, который должен работать в автономном режиме.

Мой работник службы:

 self.addEventListener("install", function (event) {
  event.waitUntil(
    caches.open("sw-cache").then(function (cache) {
      return cache.add("index.html");
    })
  );
});

self.addEventListener("fetch", function (event) {
  event.respondWith(
    caches.match(event.request).then(function (response) {
      return response || fetch(event.request);
    })
  );
});
 
  1. Если я запускаю LiveServer в VSCode, я могу установить свой PWA в Edge и в Chrome. (https://http://127.0.0.1:5500 /), но мой PWA доступен только в том случае, если сервер запущен.
  2. Если я попытаюсь установить его локально, я без какого-либо сервера получу TypeError: Failed to register a ServiceWorker: The URL protocol of the current origin ('null') is not supported.

Я где-то читал, что PWA или работнику службы требуется что-то https для запуска? Как я могу запустить PWA в автономном режиме? Возможно ли это вообще, или мне нужно приложение Electron, Android или iOS?

Ответ №1:

Сначала я забыл кэшировать свои файлы, но это: https://medium.com/dev-channel/learn-how-to-build-a-pwa-in-under-5-minutes-c860ad406ed очень помогло, но для ответа на мой вопрос лучшее, что я смог найти, — это комментарий на reddit, в котором говорится::

«PWA — это необычные вкладки браузера». и это правда,

я бы добавил: они связаны с кешем и хранилищем вашего браузера, поэтому, если вы очистите кеш браузера при закрытии, ваши данные PWA также исчезнут, и вам нужно повторно кэшировать.

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

Не стесняйтесь поправлять меня, если я не понял правильно.