Реагировать PWA с рабочей коробкой PWA - PullRequest
Новая
       40

Реагировать PWA с рабочей коробкой PWA

0 голосов
/ 23 мая 2018

Я изучаю 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"
            }

1 Ответ

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

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

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

В вашем 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-запросов, это невозможно. Ссылка

...