progressive-web-apps - SSR 如何与 PWA 搭配使用

Question

如何使用 PWA(渐进式 Web 应用程序)进行 SSR(服务器端渲染)？
据我了解，
固态继电器
SSR 运行时将加载页面并运行必要的脚本以将数据加载到页面上。然后返回渲染的 html。这对于不会运行 javascript 和无脚本浏览器的网络爬虫很重要。至少第一印象是可用的。
PWA
其中，PWA 需要一个 shell，它会被缓存并且数据会在它之后出现。这意味着，即使用户离线，shell 也会被加载。
?
那么，如果我们要预渲染数据，如何将 shell 与数据分开缓存呢？

Answer 1

如果您只想从带有初始数据的预渲染 SSR View 中缓存 shell，您必须提供两个 View :

/view-url来自 SSR

的数据

/view-url?shell只有 shell 版本，没有数据(您可以将逻辑从 url-query 更改为例如请求 header )。

用户第一次输入/view-url您在 Service Worker /view-url?shell 中发送 1. 版本和缓存.当用户返回 /view-url你送他/view-url?shell通过执行以下操作从 Service Worker 缓存中:

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在服务 worker !

如果您想了解有关此技术的更多信息，我写了一篇关于此问题的文章 How to combine PWA and isomorphic rendering (SSR)?