React PWA与workbox PWA

Question

我做了一个关于PWA的研究，上周我发现Workbox是一个很好的实现选项，我尝试使用React+worbox+webpack实现PWA，我能够创建应用程序图标，缓存GET api数据，但不能缓存服务器端用户图像和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"
            }

Answer 1

这看起来像here中提到的一个错误，检查您生成的服务工作者文件是否在浏览器中加载，并检查运行时缓存规则是否存在。

您也可以尝试这样做。

在您的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在同一个文件夹中，并且应该有这样的内容:这是截取和缓存来自服务器的图像的块。Source

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请求，这是不可能的。Link