Reactjs 将PWA与工作箱PWA反应

我从上个星期开始研究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">

---

这看起来像是在检查您生成的service worker文件是否加载到浏览器中以及检查运行时缓存规则是否存在时提到的错误

你也可以试试这个

在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>

if（导航器中的“serviceWorker”）{
navigator.serviceWorker.register（'sw.js'）
.然后（（）=>{
console.log（“安装了服务人员”）；
})
.catch（err=>console.error（'error'，err））；
}    

您的sw.js应该和index.html位于同一个文件夹中，并且应该具有以下内容：这是拦截和缓存来自服务器的图像的块。

importScripts（'https://storage.googleapis.com/workbox-cdn/releases/3.0.0/workbox-sw.js');
if（工作箱）{
console.log（`Yay！Workbox已加载PWA service worker缓存用于浏览器，而不是服务器端！那么如何将来自服务器端的用户图像存储在缓存中..没有办法吗？Flipkart lite如何做到这一点？这在sw.js中出现（可以是任何名称，仅使用sw.js）文件，不在manifest.json中。如果您使用cra，它将自动生成。签出此链接并搜索
precacheConfig
，您将看到它如何使用哈希设置文件名以进行缓存。请阅读-总结是，这不是解决志愿者问题的理想方法，可能会对获得答案产生反作用。请重新阅读你可以缓存POST请求，但你必须自己实现逻辑。可以使用IndexDB（例如）或Firestore之类的解决方案，提供开箱即用的脱机持久性。我写了一篇文章“”准确描述如何与PWA一起使用，以便在用户离线时提供完整的CRUD操作。
<script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('sw.js')
        .then(() => {
          console.log('service worker installed');
        })
        .catch(err => console.error('Error', err));
    }    
  </script>