具有角度通用的服务工作者和 sw 预缓存

Posted 2023-02-19

【中文标题】具有角度通用的服务工作者和 sw 预缓存

【英文标题】：service worker and sw precache with angular universal

【发布时间】：2018-10-30 18:06:09

【问题描述】：

我将 sw precache 与 service worker 一起使用。我只缓存了 service worker 中的浏览器文件夹。所以服务器端渲染在 service worker 中不起作用。谁能帮我解决这个问题。如果 s-s-r 工作 service worker 不工作，反之亦然

下面是我的 sw precache 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'
]
;

谢谢

【问题讨论】：

如果您缓存整个应用程序，s-s-r 的意义何在？如果应用程序已经使用服务工作者加载到客户端，为什么要再次从服务器加载它？如果您想始终从 s-s-r 加载；为什么还要缓存捆绑文件？

缓存用于离线目的。但出于 seo 目的，我使用 Angular Universal 进行服务器端渲染

【参考方案1】：

您可以选择仅将服务器端呈现的内容发送给网络爬虫，以便他们可以为您的页面编制索引以进行 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;

【讨论】：

谢谢。但这并不能解决我的问题。我对包含诸如“/^https:\/\/tg\.s3\.rfyfg\.com”之类的 url 的文件使用 cachefirst \//"。所以，它不会影响s-s-r。

我明白了，我个人通过仅向 facebookexternalhit、googlebot 等网络爬虫发送 s-s-r 来解决此问题。你也可以试试。

我如何发送这个。你能提供一个例子

我已经编辑了我的答案以提供一个使用 nginx 的示例。

感谢 Joshua。我们使用 iis 节点服务器在 iis 中托管了我们的项目。在查看页面源时，使用 service worker 后我们看不到更新的元数据和内容。但是我们可以发布我们的文章到 facebook。但我们需要在查看页面源代码中获取这些内容。这是我的问题