如何使用PWA(渐进式Web应用程序)进行SSR(服务器端渲染)?
据我了解,
SSR运行时将加载页面并运行必要的脚本以将数据加载到页面上。然后返回呈现的html。这对于不运行javascript的Web爬网程序和没有脚本的浏览器很重要。至少第一印象将可用。
除其他外,PWA需要具有一个外壳,该外壳将被缓存,并且数据将在其之后。这意味着,即使用户处于脱机状态,shell也将被加载。
因此,如果我们要预先渲染数据,那么如何缓存与数据分开的外壳呢?
问题标题说明了一切.
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/react-redux/sw.js').then(() => {
console.log('registered');
}, err => console.log(err));
}
Run Code Online (Sandbox Code Playgroud)
看起来问题的根源是路径
navigator.serviceWorker.register('/react-redux/sw.js')
Run Code Online (Sandbox Code Playgroud)
如果我移动sw代码,那么我有
navigator.serviceWorker.register('swRoot.js').then(() => {
Run Code Online (Sandbox Code Playgroud)
一切正常.我尝试过几乎所有我能想到的上面,从/反应,终极版丢弃斜线,来添加{scope:的'./','/','/react-redux',和没有工作(有一些导致错误).
有谁知道需要什么配置魔法才能从域的根目录以外的地方加载服务工作者?
然后是我的整个sw.js.
self.addEventListener('install', function(event) {
console.log('hello');
try {
console.log('typeof System in install', typeof System);
} catch(e){}
console.log('caching');
event.waitUntil(
caches.open('v1').then(function(cache) {
console.log('caching - getting');
return cache.addAll([
'/react-redux/a.js'
]);
}).catch(function(error){ console.log('error', error) })
);
});
console.log('ADDING FETCH')
self.addEventListener('fetch', function(event) {
console.log('fetching ->', event.request);
event.respondWith(
caches.match(event.request)
.then(function(response) {
// Cache hit - …Run Code Online (Sandbox Code Playgroud) 关于它也有类似的问题,但是还不清楚如何应用该解决方案,并不断出现错误。
我解释。我想使用Service Worker技术创建一个简单的html / js应用程序。我有:
在app.js中,代码为(请参阅// ***注释以进行澄清):
// *** I receive always the error:
// *** ERROR: The path of the provided scope ('/') is not under the max scope allowed ('/js/').
// *** Adjust the scope, move the Service Worker script, or use the Service-Worker-Allowed HTTP header to allow the scope.
var headers = new Headers();
// *** I set the header in order to solve the error above:
// *** The …Run Code Online (Sandbox Code Playgroud)