Service Worker与Angular Universal中的SW Precache（预缓存）

Question

Service Worker与Angular Universal中的SW Precache（预缓存）

angularangular5service-workerangular-universalsw-precache

18

我使用了Service Worker的sw预缓存。在Service Worker中，我只缓存了浏览器文件夹。因此，服务端渲染在Service Worker中无法工作。能否有人帮我解决这个问题？如果服务端渲染工作，则Service Worker将无法工作，反之亦然。

以下是我的sw预缓存config.json：

module.exports = {
navigateFallback: '/index.html',
stripPrefix: 'dist/browser',
root: 'dist/browser',
staticFileGlobs: [

'dist/browser/index.html',
'dist/browser/**.js',
'dist/browser/**.css',
'dist/browser/**.ico',
'dist/browser/assets/images/**.jpg',
'dist/browser/assets/images/**.png',
'dist/browser/assets/images/**.gif',
'dist/browser/assets/js/**/**.js',
'dist/browser/assets/js/**.js',
'dist/browser/assets/css/**.css'


 ],

runtimeCaching: [{
urlPattern: /^https:\/\/tg\.s3\.rfyfg\.com\//,
handler: 'cacheFirst'
}]
};

谢谢

- kamalav

如果您缓存整个应用程序，那么 SSR 的意义何在？如果应用程序已经在客户端中使用服务工作者加载，为什么还要从服务器重新加载它？如果您始终想要从 SSR 加载，则为什么要缓存捆绑文件？ - Okan Aslankan

缓存是用于离线目的。但为了SEO目的，我正在使用Angular Universal进行服务器端渲染。 - kamalav

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Joshua Chan · Accepted Answer

你可以选择仅向网络爬虫发送服务器端渲染的内容，以便它们可以对您的页面进行SEO索引。

一个使用nginx的配置示例：

location / {
    proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto  https;
    proxy_set_header Host               $http_host;
    proxy_redirect                      off;
    proxy_ignore_headers                X-Accel-Expires Expires Cache-Control;
    if ($http_user_agent ~* "whatsapp|googlebot|yahoo|bingbot|baiduspider|yandex|yeti|yodaobot|gigabot|ia_archiver|facebookexternalhit|twitterbot|developers\.google\.com|linkedinbot|discordbot|embedly|quora link preview|slackbot|pinterest|vkShare") {
        proxy_pass http://localhost:4000; // your server
        break;
    }
    rewrite . /static/index.html last;
}