Q: Service Worker работает в браузере, но не как PWA - PullRequest
Новая
       10

Q: Service Worker работает в браузере, но не как PWA

0 голосов
/ 13 сентября 2018

Я работаю над своим первым PWA и начал с нуля. Когда я запускаю его в Chrome, он работает нормально и кэширует все статические файлы, а когда я выхожу в автономный режим, он все еще работает. Моя проблема в том, что когда я загружаю pwa и затем отключаюсь, он по какой-то причине не кеширует его. Я не могу найти какое-то решение для этого, поэтому я пытаюсь получить некоторое представление отсюда.

Вот мой код: 

const CACHE_NAME = 'static_cache_v1'
const staticAssets = [
    './',
    './style.css',
    './main.js'
];
self.addEventListener('install', async event => {
    const cache = await caches.open(CACHE_NAME);
    cache.addAll(staticAssets);
});
self.addEventListener('fetch', async event => {
    const req = event.request;
    event.respondWith(cacheFirst(req));
});
async function cacheFirst(req) {
    const cachedResponse = await caches.match(req);
    return cachedResponse || fetch(req);
}
self.addEventListener('activate', async event => {

});

Вы можете увидеть мой пример здесь: PWA

1 Ответ

0 голосов
/ 14 сентября 2018

Попробуйте с этим кодом, Я реализовал и работал нормально

  • Убедитесь, что вы добавили работника службы в корневой каталог
  • Убедитесь, что ваше приложение работает по протоколу https (localhost также будет работать нормально), ни один http-сайт не будет иметь функциональные возможности Service Service 
var cacheName = 'bemna-LAstLAP-2013';


self.addEventListener('install', function (event) {
    event.waitUntil(
        caches.open('v1').then(function (cache) {
            return cache.addAll([
                '/',
               // all file which you need to cache at start - static caching 
            ]);
        })
    );
});

// To delete the old chache if name changed it will delete old chache 
self.addEventListener('activate', (event) => {
    console.info('Event: Activate');
    event.waitUntil(
        caches.keys().then((cacheNames) => {
            return Promise.all(
                cacheNames.map((cache) => {
                    if (cache !== cacheName) {
                        return caches.delete(cache);
                    }
                })
            );
        })
    );
});

self.addEventListener('fetch', function (event) {
                event.respondWith(
                    // Cache first approch 
                    caches.open(cacheName).then(function (cache) {
                        return cache.match(event.request).then(function (response) {
                            return response || fetch(event.request).then(function (response) {
                                cache.put(event.request, response.clone());
                                return response;
                            });
                        });
                    })
                );

});

self.addEventListener('sync', function (event) {
    if (event.tag == 'myFirstSync') {
        console.log("synching")

    }
    console.log("test");
});
  • Теперь установите файл манифеста в приложении, при настройке манифеста, пожалуйста, проверьте, правильны ли Scope и start_url
  • Устанавливаемый Destop PWA будет поддерживаться в (Версия 69.0.3497.92 (Официальная сборка) (64-разрядная версия), которую я пробовал в этом 
{
    "short_name": "Chat",
    "name": "Chat App",
    "icons": [
      {
        "src": "images/web_application.png",
        "type": "image/png",
        "sizes": "192x192"
      },
      {
        "src": "images/web_application.png",
        "type": "image/png",
        "sizes": "512x512"
      }
    ],
    "start_url": "./#comments",
    "background_color": "#3367D6",
    "display": "standalone",
    "scope": "/",
    "theme_color": "#3367D6"
  }

Как только вы установите манифест для получения баннера опции установки, вам нужно включить несколько функций в Chrome.

  • Откройте новую вкладку в Chrome и введите chrome: // flags / в браузере
  • Поиск Настольных PWAs и Баннеры приложений и включение обоих
  • После включения перезапустите браузер и обновите страницу
  • Вверху вы увидите баннер с просьбой установить приложение на рабочий стол, если вы не увидели там, перейдите на панель параметров (3 точки справа), где вы можете увидеть вариант установки вашего веб-сайта.

Теперь ваше приложение будет иметь значок для запуска, и оно будет работать как нативное / настольное приложение

Надеюсь, это сработает для вас.

...