用工作箱 PWA 反应 PWA

Question

我从上周开始对 PWA 进行研究，我发现 Workbox 是一个很好的实现选择，我尝试使用 React+worbox+webpack 实现 PWA 我能够创建应用程序图标，缓存 GET apis 数据但不能能够缓存服务器端用户图像和 POST api。如果有人发现这种方法不正确，请建议我实现 PWA 的最佳方法。我正在寻求帮助或指导，以帮助我完成最后期限。感谢您的帮助。提前致谢

包.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 中，您应该像这样注册 service worker 文件“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