Workbox не удалось получить из кэша для заголовка запроса Введите «text / html» - PullRequest
Новая
       19

Workbox не удалось получить из кэша для заголовка запроса Введите «text / html»

0 голосов
/ 01 июня 2019

Я просто внедряю Workbox для моего приложения PWA React, для практики / обучения.

Поэтому я реализовал механизм кэширования, когда есть запрос на выборку с принимающим заголовком 'text / html', во-первых, он долженперейдите в сеть, чтобы получить ответ, если он получил ответ из сетевого хранилища / обновил его до кэша рабочего времени, если нет отката отклика для поиска этого конкретного запроса в кеше, если он все еще не найден в кеше, верните резервный вариант 404.htmlстраница, которая была preache

Все хорошо работает в моей локальной среде с виртуальными хостами.Но на производственной среде (виртуальный хостинг).Когда я перехожу в автономный режим и пытаюсь получить доступ к html-странице, которая была кэширована, он не будет возвращать ответ из этого кэша, а вместо этого всегда будет возвращать страницу отката 404.html, даже если запрошенная страница существует в кэше времени выполнения рабочего ящика.

Это мои коды:

/ service-worker.js 

importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js');
importScripts('/src/js/jakeaarchibald.idb.4.0.3/ja-idb.js');
importScripts('/src/js/config/app.js');
importScripts('/src/js/utility.js');
importScripts('/src/js/idb_handler.js');
importScripts('/src/js/fetch_handler.js');
importScripts('/src/js/notification_handler.js');

workbox.routing.registerRoute(
    /^https:\/\/larvicidal-drunks\.hivelinks\.co\.id\/api/,
    new workbox.strategies.NetworkOnly()
);

workbox.routing.registerRoute(
    /^https:\/\/use\.fontawesome\.com/,
    new workbox.strategies.CacheFirst({
        cacheName: 'fontawesome',
        plugins: [
            new workbox.cacheableResponse.Plugin({
                statuses: [0, 200]
            }),
            new workbox.expiration.Plugin({
                maxAgeSeconds: 60 * 60 * 24 * 365,
                maxEntries: 16
            }),
        ],
    })
);

workbox.routing.registerRoute(
    /.*(?:code\.jquery|cdnjs\.cloudflare|stackpath\.bootstrapcdn|unpkg)\.com/,
    new workbox.strategies.CacheFirst({
        cacheName: 'cdn',
        plugins: [
            new workbox.cacheableResponse.Plugin({
                statuses: [0, 200]
            }),
            new workbox.expiration.Plugin({
                maxAgeSeconds: 60 * 60 * 24 * 30,
                maxEntries: 10
            }),
        ],
    })
);

workbox.routing.registerRoute(
    /.*\.(png|jpg|jpeg|svg|gif)/,
    new workbox.strategies.CacheFirst({
        cacheName: 'post-images',
        plugins: [
            new workbox.cacheableResponse.Plugin({
                statuses: [0, 200]
            }),
            new workbox.expiration.Plugin({
                maxAgeSeconds: 60 * 60 * 24 * 30,
                maxEntries: 20
            }),
        ],
    })
);

/* Below are the code for routing fetch request and caching strategy for the text/html */
workbox.routing.registerRoute(
    function (routeData) {
        return (routeData.event.request.headers.get('accept').includes('text/html'));
    },
    function (args) {
        return fetch(args.event.request)
            .then(function (res) {
                const cacheName = workbox.core.cacheNames.runtime;
                return caches.open(cacheName).then(function (cache) {
                    cache.put(args.event.request.url, res.clone());
                    return res;
                })
            })
            .catch(function () {
                return caches.match(args.event.request)
                    .then(function (response) {
                        if (response) return response;
                        else return Promise.reject(new Error(response.status));
                    })
                    .catch(function () {
                        return caches.match('/404.html').then(function (cache) {
                            return cache;
                        });
                    });
            });
    }
);

workbox.precaching.precacheAndRoute([
  {
    "url": "favicon.ico",
    "revision": "2cab47d9e04d664d93c8d91aec59e812"
  },
  {
    "url": "index.html",
    "revision": "8c84f274a4c1c177c4eb2282c263b642"
  },
  {
    "url": "manifest.json",
    "revision": "e4d2f2e746e1aa253074b85bf0ef0024"
  },
  {
    "url": "src/css/404.css",
    "revision": "75ebe33ca594f6cbb17ced9da1752264"
  },
  {
    "url": "src/css/custom.css",
    "revision": "fda77a58ccadafe691ab8f922ba15a68"
  },
  {
    "url": "src/js/404.js",
    "revision": "b623c2a4926bc5cae9020e75192d2af9"
  },
  {
    "url": "src/js/app.js",
    "revision": "035d41f28cd358b3d6aef5462557ac69"
  },
  {
    "url": "src/js/button_enable_notification.js",
    "revision": "9c5186d4dce4c26a97d1e24772d804f7"
  },
  {
    "url": "src/js/components/h2Title.comp.js",
    "revision": "92794984a2dc868899499c1af1cf61e9"
  },
  {
    "url": "src/js/components/inputText.comp.js",
    "revision": "de3b168a3601b301cdc3e40e34720e47"
  },
  {
    "url": "src/js/components/responseAlert.comp.js",
    "revision": "f3a92c5a1d358af77bed21bd38786b80"
  },
  {
    "url": "src/js/config/app.js",
    "revision": "b8ed964acc46c662c1beaee4464e8440"
  },
  {
    "url": "src/js/fetch_handler.js",
    "revision": "80111deb5460e8b032fc7d973bdaea87"
  },
  {
    "url": "src/js/form_create_post.js",
    "revision": "972300e8a967fa9b4ef9795ec4b9c1d1"
  },
  {
    "url": "src/js/form_login.js",
    "revision": "ee36ba14fd7f4658eac65771a5814422"
  },
  {
    "url": "src/js/form_sign_up.js",
    "revision": "7b02067b77e914ee04f1251944431bfd"
  },
  {
    "url": "src/js/form_update_account.js",
    "revision": "ad9f3a77d7bab84992ef6076b083717c"
  },
  {
    "url": "src/js/home.js",
    "revision": "33315696987b2ff575b2f6f618cab6ab"
  },
  {
    "url": "src/js/idb_handler.js",
    "revision": "7b3d0c14c7b6d2bc471727b285278ac2"
  },
  {
    "url": "src/js/jakeaarchibald.idb.4.0.3/ja-idb.js",
    "revision": "dcc2849d153447b5d723a7081b1a9165"
  },
  {
    "url": "src/js/logout.js",
    "revision": "e46be5bbeb9ab3141719a244b43ac186"
  },
  {
    "url": "src/js/navigation.js",
    "revision": "5bc0cd4f82634c2669bcd36825d31e76"
  },
  {
    "url": "src/js/notification_handler.js",
    "revision": "388ff00bcd350bcc614acf6fc7498628"
  },
  {
    "url": "src/js/posts.js",
    "revision": "49f2c767c16ec3a8e461574643288a9b"
  },
  {
    "url": "src/js/utility.js",
    "revision": "a9a99b941d294d028222f01a9997deb8"
  },
  {
    "url": "src/js/welcome.js",
    "revision": "d4e8c20eaf1a0f2bf68f6874e077b6ee"
  },
  {
    "url": "src/js/wrapperComponents/withChechkAuthComponentDidMount.js",
    "revision": "5b970006a2503813c4621c237db0ad87"
  },
  {
    "url": "src/js/wrapperComponents/withSetStateFormData.js",
    "revision": "e2923c3fe02fcc4230458cf45f7693d9"
  }
]);

self.addEventListener('install', (event) => {
    const urls = [
        "/404.html"
    ];
    event.waitUntil(caches.open('self-precache').then((cache) => cache.addAll(urls)));
});

self.addEventListener('sync', function (evt) {
    switch(evt.tag){
        case 'sync-logout-token':
            evt.waitUntil(
                idbGetAllData('logout_token').then(function (data) {
                    for(let dt of data)
                        fetchHandler("GET", BACK_END_API_URL + "/api/logout", true, null, dt)
                    idbClearStore('logout_token');
                })
            );
            break;
        case 'sync-new-posts':
            evt.waitUntil(
                idbGetAllData('sync_posts').then(function (data) {
                    for(let dt of data) {
                        let postFormData = new FormData();
                        postFormData.append('idb_id', dt.id);
                        postFormData.append('title', dt.title);
                        postFormData.append('location', dt.location);
                        postFormData.append('file', dt.picture, 'picture_upload.jpeg');

                        fetchHandler("POST", BACK_END_API_URL + "/api/post/create", true, postFormData)
                            .then(function (response) {
                                if(response.status===201){
                                    response.json().then(function (resData) {
                                        idbDeleteData('sync_posts', parseInt(resData.idb_id));
                                    });
                                }
                                else return Promise.reject(new Error(response.status));
                            })
                            .catch(function (err) {
                                console.log('Error sending sync data.', err);
                            });
                    }
                })
            );
            break;
        default: break;
    }
});

self.addEventListener('push', function (evt) {
    let pushedData = {};
    if(evt.data) pushedData = evt.data.json();
    console.log(pushedData);
    if(pushedData){
        let options = {
            body: pushedData.body,
            icon: '/src/images/icons/app-icon-96x96.png',
            badge: '/src/images/icons/app-icon-96x96.png'
        };
        if(typeof pushedData.image !== undefined && pushedData.image !== undefined && pushedData.image !== null && pushedData.image !== '') options["image"] = pushedData.image;

        evt.waitUntil(
            self.registration.showNotification(pushedData.title, options)
        );
    }
});

/manifest.json

{
  "name": "PWA REACT JS Laravel API Instagram Clone",
  "short_name": "PRJLAGram",
  "start_url": "/",
  "scope": ".",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#343a40",
  "description": "A simple instagram clone builds with PWA, ReactJS, and Laravel REST API.",
  "dir": "ltr",
  "lang": "en-US",
  "icons": [
    {
      "src": "/src/images/icons/app-icon-48x48.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "/src/images/icons/app-icon-96x96.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "/src/images/icons/app-icon-144x144.png",
      "type": "image/png",
      "sizes": "144x144"
    },
    {
      "src": "/src/images/icons/app-icon-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/src/images/icons/app-icon-256x256.png",
      "type": "image/png",
      "sizes": "256x256"
    },
    {
      "src": "/src/images/icons/app-icon-384x384.png",
      "type": "image/png",
      "sizes": "384x384"
    },
    {
      "src": "/src/images/icons/app-icon-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

/. htaccess 

Options All -Indexes

<IfModule mod_rewrite.c>
    Options +FollowSymLinks

    RewriteEngine on

    RewriteCond %{HTTPS} !^on$ [OR]
    RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]
    RewriteRule ^(.*)$ https://pwa-react-practice.rockaboyd.com%{REQUEST_URI} [L,R=301]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # Handle Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [L]
</IfModule>

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

Это мой рабочий URL https://pwa -react-practice.rockaboyd.com

ОБНОВЛЕНИЕЯ проверил это на двух браузерах Chrome и Mozilla.И эта проблема возникает только в Chrome, поэтому приложение хорошо работает в Mozilla.

Pleaseeee Help.

Whyyy no body отвечаяg .. ???пожалуйста, кто-нибудь, я в отчаянии ... не могу найти решение для этого .. пожалуйста ...

...