React PWA с PWA рабочей панели

Я занимаюсь исследованием PWA с прошлой недели. Я обнаружил, что Workbox - хороший вариант для реализации, и я попытался реализовать PWA с помощью React + worbox + webpack. Я могу создать значок приложения, кэшировать данные GET apis, но не могу кешировать изображения пользователей на стороне сервера и POST api. И если кто-то обнаружит, что этот метод неверен, пожалуйста, предложите мне лучший метод для реализации PWA. Мне нужна помощь или руководство, которые помогут мне уложиться в сроки. Оценил вашу помощь. заранее спасибо

Package.json

"workbox-webpack-plugin": "^3.2.0"

webpack.config.js

var workboxPlugin = require('workbox-webpack-plugin');
                 plugins: [
                    new cleanPlugin([dist]),


new CopyWebpackPlugin([
                        // {output}/to/file.txt
                        { from: path.join(__dirname,'/index.html'), to: path.join(__dirname, '', 'www'), },
                        { from: path.join(__dirname,'/manifest.json'), to: path.join(__dirname, '', 'www'), },
                        { from: path.join(__dirname,'/.htaccess'), to: path.join(__dirname, '', 'www'), },
                        { from: path.join(__dirname,'/src/assets'), to: path.join(__dirname, '', 'www/src/assets') },

                    ]),
                    new UglifyJSPlugin(),
new workboxPlugin.GenerateSW({
                        swDest: 'service-workers.js',
                        clientsClaim: true,
                        skipWaiting: true,
                        globDirectory: dist,
                        globPatterns: ['**/*.{html,js,css,png,svg,jpg,gif,json}'],
                        globIgnores: [
                        "**/node_modules/**/*"
                          ],

                        runtimeCaching: [{
                        urlPattern: new RegExp('https://serverURl/api'),
                        handler: 'networkFirst',
                            options: {
                              cacheName: 'helloOne-api-cache',
                              networkTimeoutSeconds: 10
                          }
                        },
                        {
                        urlPattern: 'https://serverURl/images/users/(.*)',
                        handler: 'cacheFirst',
                            options: {
                            cacheName: 'helloOne-mk-images-cache',
                            expiration: {
                              maxEntries: 2,
                              maxAgeSeconds: 7 * 24 * 60 * 60,
                            }
                          }
                        }

                        ]
                    })
                    ]
                ]

index.html

<link rel="manifest" href="manifest.json">
 <meta name="mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-capable" content="yes">

manifest.json

{
              "short_name": "Welcome",
              "name": "Welcome One",
              "description": "WelcomeOne preproduction",
              "icons": [
                {
                "src": "src/assets/images/apps/appicon_60x60.png",
                "sizes": "60x60",
                "type": "image/png"
                },
                {
                "src": "src/assets/images/apps/appicon_72x72.png",
                "sizes": "72x72",
                "type": "image/png"
                },
                {
                "src": "src/assets/images/apps/appicon_48x48.png",
                "sizes": "48x48",
                "type": "image/png"
                },
                {
                "src": "src/assets/images/apps/appicon_36x36.png",
                "sizes": "36x36",
                "type": "image/png"
                },
                {
                "src": "src/assets/images/apps/appicon_76x76.png",
                "sizes": "76x76",
                "type": "image/png"
                },
                {
                "src": "src/assets/images/apps/appicon_96x96.png",
                "sizes": "96x96",
                "type": "image/png"
                },
                {
                "src": "src/assets/images/apps/appicon_120x120.png",
                "sizes": "120x120",
                "type": "image/png"
                },
                {
                "src": "src/assets/images/apps/appicon_152x152.png",
                "sizes": "152x152",
                "type": "image/png"
                },
                {
                "src": "src/assets/images/apps/appicon_180x180.png",
                "sizes": "180x180",
                "type": "image/png"
                },
                {
                "src": "src/assets/images/apps/appicon_512x512.png",
                "sizes": "512x512",
                "type": "image/png"
                }
              ],
              "start_url": ".",
              "display": "standalone",
              "background_color": "#415160",
              "theme_color": "#415160",
              "gcm_sender_id": "103953800507"
            }

reactjs progressive-web-apps service-worker workbox-webpack-plugin background-sync
person kusum.ratawa    schedule 23.05.2018    source источник
comment
Кэширование сервисного воркера PWA предназначено для браузеров, а не для серверной части!   -  person Fawaz    schedule 23.05.2018
comment
Тогда как я могу хранить изображения пользователей в кеше, который поступает со стороны сервера .. разве нет возможности? Как Flipkart lite это делает?   -  person kusum.ratawa    schedule 23.05.2018
comment
Это находится в файле sw.js (может быть любое имя, просто используя sw.js), а не в manifest.json. Если вы используете cra, он будет автоматически сгенерирован.   -  person Fawaz    schedule 23.05.2018
comment
Проверьте эту ссылку github.com/fawaz-ahmed/redux -app / blob / master / service-worker.js и выполните поиск precacheConfig, вы увидите, как он устанавливает имена файлов с хешем для кеширования.   -  person Fawaz    schedule 23.05.2018
comment
Прочтите При каких обстоятельствах я могу добавить к своему вопросу «срочно» или другие подобные фразы, чтобы получить более быстрые ответы? - Резюме заключается в том, что это не идеальный способ обращения к волонтерам и, вероятно, контрпродуктивен для получения ответов. Пожалуйста, воздержитесь от добавления этого к своим вопросам.   -  person halfer    schedule 23.05.2018
comment
Спасибо тебе @halfer   -  person kusum.ratawa    schedule 23.05.2018
comment
@Fawaz Спасибо, что поделились ссылкой. Я просмотрел, но я думаю, что вы не указали URL-адрес сервера в предварительном кэшировании изображений. Пожалуйста, дайте мне знать, если мне что-то здесь не хватает   -  person kusum.ratawa    schedule 23.05.2018
comment
@ kusum.ratawa Верно, я не кэширую изображения, но вы можете! Собственно в моем репо статичных изображений нет.   -  person Fawaz    schedule 24.05.2018

Ответы (1)


arrow_upward
0
arrow_downward

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

Вы также можете попробовать это.

В вашем index.html вы должны зарегистрировать файл сервис-воркера «sw.js» в моем случае, как это.

<script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('sw.js')
        .then(() => {
          console.log('service worker installed');
        })
        .catch(err => console.error('Error', err));
    }    
  </script>

Ваш sw.js должен находиться в той же папке, что и ваш index.html, и должен иметь следующее: Это блок, который будет перехватывать и кэшировать изображения с сервера. Источник

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.0.0/workbox-sw.js');

if (workbox) {
  console.log(`Yay! Workbox is loaded ????`);

  workbox.precaching.precacheAndRoute([]);
  workbox.skipWaiting();
  workbox.clientsClaim();

  workbox.routing.registerRoute(
    /\.(?:png|gif|jpg|jpeg|svg)$/,
    workbox.strategies.cacheFirst({
      cacheName: 'images',
      plugins: [
        new workbox.expiration.Plugin({
          maxEntries: 60,
          maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
        }),
      ],
    }),
  ); 
}else {
  console.log(`Boo! Workbox didn't load ????`);
}

Что касается кеширования запросов POST, это невозможно. Ссылка

person RamY    schedule 01.06.2018
comment
Вы можете кэшировать POST-запросы, но вам придется реализовать логику самостоятельно. Либо с помощью IndexDB (например), либо с такими решениями, как Firestore, которые предлагают автономное сохранение из коробки. Я написал статью dev.to/paco_ita/ break-the-cache-api-limits-in-our-pwa-oo3, точно описывая, как использовать его с PWA, чтобы обеспечить полные операции CRUD, даже когда пользователь находится в автономном режиме. - person Francesco; 20.08.2019