Как реализовать skipWaiting с помощью приложения «Создать React»?

Question

Я хотел бы, чтобы пользователи могли обновляться на месте, когда новый работник службы доступен и ждет?Я уже могу показывать всплывающее окно, когда доступно новое обновление, но я хотел бы добавить кнопку, чтобы вызвать обновление на месте.Я понимаю, что это может быть достигнуто с помощью вызова skipWaiting, но не уверен, как реализовать это с помощью приложения Create React.Кто-нибудь смог этого добиться?Буду признателен за помощь.Спасибо!

Answer 1

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

в package.json :

"build": "react-scripts build && node ./src/serviceWorkerBuild"

serviceWorkerBuild.js

const workboxBuild = require('workbox-build');

// NOTE: This should be run *AFTER* all your assets are built
const buildSW = () => {
  // This will return a Promise
  return workboxBuild.injectManifest({
    swSrc: 'src/serviceWorkerRules.js',
    swDest: 'build/sw.js',
    globDirectory: 'build',
    globPatterns: [
      '**\/*.{js,css,html,png}',
    ]
  }).then(({count, size, warnings}) => {
    // Optionally, log any warnings and details.
    warnings.forEach(console.warn);
    console.log(`${count} files will be precached, totaling ${size} bytes.`);
  });
};

buildSW();

и serviceWorkerRules.js где вы можете добавить свои правила:

importScripts(
    'https://storage.googleapis.com/workbox-cdn/releases/3.5.0/workbox-sw.js'
);
/* global workbox */
if (workbox) {
    console.log('Workbox is loaded');

  self.addEventListener('install', event => {
    self.skipWaiting();
  });

    /* injection point for manifest files.  */
    workbox.precaching.precacheAndRoute([]);

/* custom cache rules*/
workbox.routing.registerNavigationRoute('/index.html', {
    blacklist: [/^\/_/, /\/[^\/]+\.[^\/]+$/],
    });

workbox.routing.registerRoute(
    /\.(?:png|gif|jpg|jpeg|svg)$/,
    workbox.strategies.cacheFirst({
        cacheName: 'images',
        plugins: [
            new workbox.expiration.Plugin({
                maxEntries: 60,
                maxAgeSeconds: 5 * 24 * 60 * 60, // 5 Days
            }),
        ],
    }),
    );

Также добавьте window.location.reload(); в serviceWorker.js в строке № 78.

Answer 2

ответ от @ user10532439 у меня не сработал.В итоге я использовал https://github.com/bbhlondon/cra-append-sw и добавил

// @ts-ignore
workbox.skipWaiting();

// @ts-ignore
workbox.clientsClaim();

вместе с

"build": "react-scripts build && cra-append-sw -s ./src/custom-sw.js",

Answer 3

skipWaiting и clientsClaim уже сгенерированы по умолчанию.

Вот как я сделал автообновление create_react_app_pwaupdate

Я использую window.location.reload() в serviceWorker.js и

self.addEventListener('install', event => {
    self.skipWaiting();
    //event.waitUntil(
    // caching etc
    //);
});

в custom-sw.js

Проверьте src \ custom-sw.js и src \ serviceWorker.js

Answer 4

Я использовал пакет с именем https://github.com/bbhlondon/cra-append-sw, чтобы добавить следующий код для вызова триггера skipWaiting:

self.addEventListener('message', event => {
  if (event.data === 'skipWaiting') {
    self.skipWaiting();
  }
});