首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >已使用apache别名不起作用的服务工作程序

已使用apache别名不起作用的服务工作程序
EN

Stack Overflow用户
提问于 2019-03-18 05:03:59
回答 1查看 421关注 0票数 1

我想在我的应用程序中添加服务工作线程来缓存加载的资源。

让我们假设我的应用程序是在https://domain/application下加载的

从该/application页面,我从服务器别名https://domain/mat-resources/applications/application1/dist/获取资源。

这是我的登记簿,

代码语言:javascript
运行
AI代码解释
复制
if (navigator.serviceWorker) {

    navigator.serviceWorker.register('/mat-resources/applications/application1/
/service-worker.js', {scope: '/mat-resources/applications/application1/'}).then(function (registration) {
            console.log("registration", registration);
    }).catch(function (e) {
        console.log(e);
    });
} else {
    console.log('Service Worker is not supported in this browser.')
}

这是我添加到service worker js中的代码。

代码语言:javascript
运行
AI代码解释
复制
'use strict';

const VERSION = 'v1';
const PRECACHE = `precache-${VERSION}`;
const RUNTIME = `runtime-${VERSION}`;
const enableRuntimeCache = true;
const mode = 'cache-update';

const PRECACHE_URLS = [
    'https://fonts.googleapis.com/css?family=Open+Sans:400,600|Roboto:400,500',
    './dist/js/vendor.bundle.js',
    './dist/js/app.bundle.js',
    './dist/css/styles.min.css'

];

let NetworkOnline = true;


self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(PRECACHE).then(cache => {
            cache.addAll(PRECACHE_URLS);
        }).then(self.skipWaiting())
    );
});

self.addEventListener('activate', event => {

    const currentCaches = [PRECACHE, RUNTIME];
    event.waitUntil(
        caches.keys().then(cacheNames => {
            return cacheNames.filter(cacheName => !currentCaches.includes(cacheName));
        }).then(cachesToDelete => {
            return Promise.all(cachesToDelete.map(cacheToDelete => {
                return caches.delete(cacheToDelete);
            }));
        }).then(() => {
            self.clients.claim();
        })
    );

});


self.addEventListener('fetch', event => {

    if (event.request.url.startsWith(self.location.origin)) {
        event.respondWith(fromCache(event.request));

        if (isOnline()) {
            if (mode === 'cache-update') {
                event.waitUntil(
                    update(event.request)
                    /*.then(refresh)*/
                    .catch(errorHandler)
                );
            }
        }
    }

});

/*function setFromCache(request) {

    console.log(self);
    updateFromCache(true);
}*/

function fromCache(request) {
    return caches.match(request).then(cachedResponse => {
        if (cachedResponse) {
            return cachedResponse;
        }

        if (isOnline()) {
            if (enableRuntimeCache) {
                return caches.open(RUNTIME).then(cache => {
                    return fetch(request).then(response => {
                        return cache.put(request, response.clone()).then(() => {
                            return response;
                        });
                    }).catch(errorHandler);
                });
            } else {
                return fetch(request).then(response => {
                    return response;
                });
            }
        }

    });
}

function update(request) {
    let asset = request.url.substr(request.url.lastIndexOf('/') + 1);
    let openCache = (PRECACHE_URLS.some(val => val.indexOf(asset) >= 0)) ? PRECACHE : RUNTIME;

    return caches.open(openCache).then(cache => {
        return fetch(`${request.url }?${new Date().valueOf()}`).then(response => {
            return cache.put(request, response.clone()).then(() => {
                return response;
            });
        }).catch(errorHandler);
    });
}


function refresh(response) {
    return self.clients.matchAll().then(clients => {
        clients.forEach(client => {
            var message = {
                type: 'refresh',
                url: response.url,
                eTag: response.headers.get('ETag')
            };

            client.postMessage(JSON.stringify(message));
        });
    });
}

function isOnline() {
    return self.navigator.onLine;
}

function errorHandler(error) {
    if (error instanceof TypeError) {
        if (error.message.includes('Failed to fetch')) {
            console.error('(FtF) Error caught:', error);
        } else {
            console.error('Error caught:', error);
        }
    }
}

在我成功刷新service worker之后,我可以看到service worker注册良好,但是资源没有被缓存。

请帮帮忙??

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-03-18 14:21:28

您已经在注册服务工作者时定义了一个作用域。这限制了服务工作者的访问权限,使其只能处理/mat-resources/applications/application1/**/*路径下的资源的获取

代码语言:javascript
运行
AI代码解释
复制
{scope: '/mat-resources/applications/application1/'}

如果希望服务工作者在应用程序/application的根目录下处理资源,则需要将作用域设置为/

代码语言:javascript
运行
AI代码解释
复制
{scope: '/'}

你可以在Web Fundamentals上阅读更多关于作用域的内容。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55214795

复制
相关文章
CSS——边距
边距包括外边距(Margin)属性和内边距(Padding)属性,外边距属性定义了元素间的间隔,内边距属性定义了元素边框与内容区域之间的空白区域。
Html5知典
2019/11/26
1.3K0
CSS_边距填充
填充:指向一个元素的内部,增加空间,(内边距),与外边距不同,填充会改变元素的大小。随着填充的增加,元素会被撑大。
bye
2020/11/24
1.1K0
CSS_边距填充
css负边距之详解
自从1998年CSS2作为推荐以来,表格的使用渐渐退去,成为历史。正因为此,从那以后CSS布局成为了优雅代码的代名词。 对于所有设计师使用过的CSS概念,负边距作为最少讨论到的定位方式要记上一功。这就像是在线纹身-每个人都会做,但是没有人会谈论它。(It’s like an online taboo—everyone’s doing it, yet no one wants to talk about it.) 为其正名 我们都使用过CSS得外边距,但是当谈到负边距的时候,我们好像往差的方向发展啦。在网页设
前朝楚水
2018/04/03
1.9K0
css负边距之详解
R|绘图边距及布局
简单介绍一下如何调整绘图区域及边距区域,如何将多个图形绘制在一张图中,并根据图形的大小及特性调整一下图形分布。
生信补给站
2020/08/06
2.4K0
css负边距之详解
自从1998年CSS2作为推荐以来,表格的使用渐渐退去,成为历史。正因为此,从那以后CSS布局成为了优雅代码的代名词。 对于所有设计师使用过的CSS概念,负边距作为最少讨论到的定位方式要记上一功。这就像是在线纹身-每个人都会做,但是没有人会谈论它。(It’s like an online taboo—everyone’s doing it, yet no one wants to talk about it.) 为其正名 我们都使用过CSS得外边距,但是当谈到负边距的时候,我们好像往差的方向发展啦。在网页设
用户1667431
2018/04/18
2.2K0
css负边距之详解
CSS盒模型及边距问题
盒模型是CSS的基石之一,页面的每一个元素都被看作一个矩形框,分别由外边距,边框,内边距,内容组成,
菜的黑人牙膏
2019/01/21
9670
[Java小工匠]CSS盒子模型-边距合并
  CSS外边距合并,只有上外边距和下外边距才会触发外边距合并,左外边距和右外边距不会。
Java小工匠
2018/08/10
1.1K0
[Java小工匠]CSS盒子模型-边距合并
清空默认边距的完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>54-清空默认边距</title> <style> /* *{ margin: 0; padding: 0; } */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,c
贵哥的编程之路
2020/10/28
9680
【说站】css边距重叠是什么
css边距重叠是什么 1、边界重叠是指两个或两个以上盒子的相邻边界重合在一起,构成单一边界。 可以相邻也可以嵌套,其中没有非空内容、补白、边框。        .neighbor{ height: 100px; background: red; } .father{ background: #f436365e; } .child{ height: 100px; margin-top: 10px; background: #00800047; } <div> this is neighbor </div
很酷的站长
2022/11/24
9820
【CSS】盒子模型外边距 ④ ( 元素默认的外边距 | 清除元素默认的内外边距 | 行内元素边距设置 )
向 HTML 的 <body> 标签中 , 添加元素 , 并 不是紧贴 左侧 和 顶部 , 而是有一个 默认的间距 , 如下图所示 :
韩曙亮
2023/03/30
2.6K0
【CSS】盒子模型外边距 ④ ( 元素默认的外边距 | 清除元素默认的内外边距 | 行内元素边距设置 )
如何在 RunAs 启动的软件传入带空格的路径带空格参数
使用 RunAs 可以让程序使用普通用户或管理员权限运行,本文告诉大家如何 传入带空格的路径
林德熙
2020/02/18
2.3K0
关于元素间的边距重叠问题与BFC
BFC(Block Formatting Context),即块级格式化上下文,创建了 BFC 的元素是一个独立的容器,里面无论如何布局都不会影响到外面的元素
Leophen
2019/08/23
1.9K0
关于元素间的边距重叠问题与BFC
带空格的字符串反转
就是输入一段文本,然后让你实现字符串反转。 肺炎严重,假期延长,闲的不得不自主学习,然后就日常刷水题。 第一次的方法,简单易懂,就是时间超限了。TLIM #include<bits/stdc++.h> using namespace std; stack<string> st; int main(){ string s; cin>>s; reverse(s.begin(),s.end()); st.push(s); while(getchar() != '\n'){ cin>>s; re
杨鹏伟
2020/09/11
1.3K0
博弈论进阶之树的删边游戏与无向图的删边游戏
我们可以对无向图做如下改动:将图中的任意一个偶环缩成一个新点,任意一个奇环缩成一个新点加一个新边;所有连到原先环上的边全部改为与新点相连。这样的改动不会影响图的SG 值。
attack
2018/03/30
1.5K2
粗边面积图
▽▼▽ 这种图表制作起来步骤并不复杂,主要是排版和图表元素格式化需要一些精加工。 ●●●●● 下面是制作步骤: ▷首先整理源数据如下: ▷为了防止横轴时间变迁过长造成标签被自动压缩倾斜,我把横坐标
数据小磨坊
2018/04/10
9900
粗边面积图
【RecyclerView】 七、RecyclerView.ItemDecoration 条目装饰 ( getItemOffsets 边距设置 )
RecyclerView.ItemDecoration 是抽象类 , 当前使用的 onDraw , onDrawOver , getItemOffsets
韩曙亮
2023/03/28
5.7K0
【RecyclerView】 七、RecyclerView.ItemDecoration 条目装饰 ( getItemOffsets 边距设置 )
webkit中BFC元素临近浮动元素时的边距bug
一直以来我们都很熟悉IE的“浮动边距加倍”的bug,并且绝大多数重构人员都已经很擅长在需要浮动时就直接绕过他。其实以webkit为核心的浏览器,包括但不限于Safari和Chrome,也有一个关于浮动和边距的bug,同样会造成布局错误。我在最近三个月的前一个月连续遭遇了两次这个bug,后两个月虽然避免了再次出现,但是直到现在才把这个bug彻底弄清楚。 触发这个bug的条件是: 在一个非浮动元素上应用overflow,且其值不为visible(这将形成一个Block Formatting Context元素)
小李刀刀
2018/03/06
1.7K0
webkit中BFC元素临近浮动元素时的边距bug
如何解决兄弟元素或父子元素margin边距失效问题
背景:兄弟元素或父子元素同时设margin边距时,会导致margin边距会按照最大的那个边距展示,解决方案,行程 BFC,块级格式化上下文,来消除该问题。
蓓蕾心晴
2022/11/21
8450
UML2.51边译边学-部署图
本文是UML规范2.5.1中部署图相关部分中文翻译。原文可从https://www.omg.org/spec/UML/2.5.1下载。
面向对象思考
2021/10/14
5570
UML2.51边译边学-部署图
点击加载更多

相似问题

CSS带负边距的正边距

30

带折叠边距的填充/边距问题

14

图边距太大

10

添加空格后意外的页边距-顶部[无换行]

23

带边距的套式甜甜圈图

10
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文