progressive-web-apps - SSR 如何与 PWA 搭配使用
问题描述
如何使用 PWA(渐进式 Web 应用程序)进行 SSR(服务器端渲染)?
据我了解,
固态继电器
SSR 运行时将加载页面并运行必要的脚本以将数据加载到页面上。然后返回渲染的 html。这对于不会运行 javascript 和无脚本浏览器的网络爬虫很重要。至少第一印象是可用的。
PWA
其中,PWA 需要一个 shell,它会被缓存并且数据会在它之后出现。这意味着,即使用户离线,shell 也会被加载。
?
那么,如果我们要预渲染数据,如何将 shell 与数据分开缓存呢?
解决方案
如果您只想从带有初始数据的预渲染 SSR 视图中缓存 shell,您必须提供两个视图:
/view-url
来自 SSR 的数据/view-url?shell
只有 shell 版本,没有数据(您可以将逻辑从 url-query 更改为例如请求标头)。
当用户第一次进入时/view-url
,您在 Service Worker 中发送 1. 版本和缓存/view-url?shell
。当用户回到你身边时,通过执行以下操作从 Service Worker 缓存中/view-url
发送他:/view-url?shell
const CACHE_NAME = 'cache-token';
const staticUrlsToCache = ['/style.css', '/script.js', '/logo.png'];
const shellUrlsToCache = ['/view-url'];
const urlsToCache = [
...staticUrlsToCache,
shellUrlsToCache.map(url => `${url}?shell`),
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME).then(cache => cache.addAll(urlsToCache))
);
});
self.addEventListener('fetch', event => {
let request = event.request;
const shellUrl = shellUrlsToCache.find(url => request.url.endsWith(url));
if (shellUrl) {
// here is real magic!
request = new Request(`${shellUrl}?shell`);
}
event.respondWith(
caches.match(request).then(response => response || fetch(request))
);
});
这里的关键是您将原始请求更改/view-url
为/view-url?shell
在 Service Worker 中!
如果你想了解更多关于这项技术的信息,我写了一篇关于这个问题的文章How to combine PWA and isomorphic rendering (SSR)?
推荐阅读
- mysql - Laravel:如何在 MySql 数据库中存储印地语字符
- javascript - 在附加了语言环境的 javascript 中生成日期格式
- oracle - 如何关闭 docker 容器内的 oracle 数据库?
- python - TensorFlow 识别但不会使用我的 GPU
- maven - 从 Maven CLI 执行 Cucumber 功能文件
- python - tkinter 按钮限制命令不重复
- graphql - 你能在graphql中请求一个文字值吗?
- wordpress - WooCommerce 选择属性过滤器时如何显示匹配的产品变体?
- python - 如何在 Python 中更改匿名函数变量?
- wordpress - 如何在子主题中添加/修改 Redux 框架选项