Как создать настраиваемую автономную резервную страницу с приложением create-реагировать? - PullRequest
0 голосов
/ 23 сентября 2018

Я хочу разработать приложение, которое работает на автономной странице с кешем.Я использую рабочую коробку и перереагируем приложение-переадресация на сгенерированные пользовательские сервис-работники для приложения «Реагировать».Я уже успешно предварительно кэшировал статический файл и сначала кэшировал динамический контент с помощью Network.Но когда я хочу, чтобы приложение показывало автономную страницу, когда я получаю доступ к странице, которая не кэшируется, я получаю пустую страницу.Это мой пользовательский код SW.Кто-нибудь может решить мою проблему?Я застрял с этой проблемой.

// importScripts('path/to/offline-google-analytics-import.js');
// workbox.googleAnalytics.initialize();
workbox.setConfig({ debug: true });
// See https://developers.google.com/web/tools/workbox/guides/configure-workbox
workbox.core.setLogLevel(workbox.core.LOG_LEVELS.debug);
self.addEventListener('install', event => event.waitUntil(self.skipWaiting()));
self.addEventListener('activate', event => event.waitUntil(self.clients.claim()));

// We need this in Webpack plugin (refer to swSrc option): https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#full_injectmanifest_config
workbox.precaching.precache(self.__precacheManifest);

workbox.precaching.precache([
  {
    url: '/offline.html',
    revision:'1234',
  }
]);

workbox.precaching.addRoute();

// app-shell cahcing
workbox.routing.registerRoute("/", workbox.strategies.cacheFirst());

//fungsinya buat apa ? Cari tau dulu
workbox.routing.registerNavigationRoute('/index.html');

var networkFirst = workbox.strategies.networkFirst({
  cacheName: 'outside-pages',
  plugins: [
     new workbox.cacheableResponse.Plugin({
       statuses: [0, 200],
     })
   ]
});

const customHandler = async (args) => {
  try {
    console.log(args.event.request.url)
    const response = await networkFirst.handle(args);
    return response || await caches.match(args.event.request.url);
  }catch (error) {
      return caches.open('/offline.html').then(function(cache) {
         return caches.match('/offline.html');
    })
  }
}

workbox.routing.registerRoute(
  new RegExp('http://192.168.1.37/api/(.*)'),
  customHandler,
);

workbox.routing.setCatchHandler(({url, event, params}) => {
  console.log(event)
});

И это моя пользовательская автономная страница:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>Page cahced yet</h1>
<p>This is a paragraph.</p>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...