Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >已使用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

复制
相关文章
js日期格式化
js日期格式化 每次遇到日期格式化都要去网上搜一次,这次认真做次笔记。 <html> <head> <script> function test(){ //Js获取当
河岸飞流
2019/09/11
11.5K0
js日期格式化
js时间戳转换日期格式和日期计算
一、时间戳转换日期 1 function formatDate(datetime) { 2 // 获取年月日时分秒值 slice(-2)过滤掉大于10日期前面的0 3 var year = datetime.getFullYear(), 4 month = ("0" + (datetime.getMonth() + 1)).slice(-2), 5 date = ("0" + datetime.getDate()).
半指温柔乐
2018/09/11
29.2K0
如何在 Node.js 项目中使用 Prettier 进行代码格式化
在 Node.js 项目中,代码的可读性和格式化一直是一个重要的问题。代码的可读性对于维护和开发项目至关重要。Prettier 是一款流行的代码格式化工具,它可以自动化地进行代码格式化,以帮助开发者提高代码的可读性和维护性。本文将介绍如何在 Node.js 项目中使用 Prettier 进行代码格式化,并探讨 Prettier 的一些优缺点以及使用 Prettier 的最佳实践。
网络技术联盟站
2023/07/13
2.1K0
如何在 Node.js 项目中使用 Prettier 进行代码格式化
js前端日期格式化处理
js前端日期格式化处理 1.项目中时间返回值,很过时候为毫秒值,我们需要转换成 能够看懂的时间的格式; 例如: ​ yyyy-MM-dd HH:mm:ss 2.处理方法(处理方法有多种,可以传值到前端处理,也可以后台可以好之后再传递到页面) ​ 方法一:实体类中添加时间转换注解(注意时区问题) /** * 开始时间 */ @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone="GMT+8") pr
Dream城堡
2018/09/10
9K0
JS日期格式化转换方法
1. 将日期转换为指定的格式:比如转换成 年月日时分秒 这种格式:yyyy-MM-dd hh:mm:ss 或者 yyyy-MM-dd。当然是网上的方法,只是总结下。
全栈程序员站长
2022/07/01
13.6K0
JS日期格式化转换方法
Node.js文件编码格式的转换
项目很多 lua 文件不是 utf-8格式,使用 EditPlus 查看的时候,显示为ASCII。还有的是带BOM的,带BOM倒好处理,之前写过,有一定规律。
meteoric
2018/11/20
5.5K0
如何把 Node.js 嵌入自己的项目中
Node.js 不仅可以单独运行,还可以以库的方式被使用,本文介绍下如何把 Node.js 嵌入到自己项目中。首先第一步下载 Node.js 源码,然后根据 Node.js 的文档进行编译安装。这样我们就可以拿到 Node.js 提供的头文件和库文件了。接下来根据官方的 demo 写一个测试程序。
theanarkh
2022/07/01
1.6K0
GitLab CI/CD 在 Node.js 项目中的实践
首先是测试用例,最初我们设计在了 git hooks 里边,在执行 git commit 之前会进行检查,在本地运行测试用例。 这会带来一个时间上的问题,如果是日常开发,这么操作还是没什么问题的,但如果是线上 bug 修复,执行测试用例的时间依据项目大小可能会持续几分钟。 而为了修复 bug,可能会采用 commit 的时候添加 -n 选项来跳过 hooks ,在修复 bug 时这么做无可厚非,但是即使大家在日常开发中都采用commit -n 的方式来跳过繁琐的测试过程,这个也是没有办法管控的,毕竟是在本地做的这个校验,是否遵循这个规则,全靠大家自觉。
贾顺名
2019/12/09
1.4K0
JS日期格式化转换方法
1. 将日期转换为指定的格式:比如转换成 年月日时分秒 这种格式:yyyy-MM-dd hh:mm:ss 或者 yyyy-MM-dd。当然是网上的方法,只是总结下。
跟着阿笨一起玩NET
2020/10/27
17.4K0
JS日期格式化转换方法
GitLab CI/CD 在 Node.js 项目中的实践
来源 | https://juejin.im/post/5cef97e0e51d45776031af91
五月君
2019/08/09
3.3K0
javascript Date format(js日期格式化)
方法一:这个很不错,好像是 csdn 的 Meizz 写的: // 对Date的扩展,将 Date 转化为指定格式的String // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符, // 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字) // 例子: // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
空空云
2018/09/27
7.6K0
js日期、经纬度格式化
如果你不出去走走,你就会以为这就是全世界。——《天堂电影院》 如果你不出去走走,你就会以为这就是全世界。——《天堂电影院》 之前写过一篇js时间戳格式化以及一篇js中Date函数的api 今天写篇“人性化”的格式化的 // 格式化 传入毫秒值,计时秒表用 function formatTime(time) { if (typeof time !== 'number' || time < 0) { return time } var hour = parseInt(time / 36
阿超
2022/08/16
6.1K0
js日期、经纬度格式化
js格式化日期时间工具类
dateUtil.js /** * 格式化日期时间 */ export function formatDatetime(date, fmt) { if(/(y+)/.test(fmt)){ fmt = fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4-RegExp.$1.length)) } let obj = { "M+": date.getMonth() + 1, "d+": date.getDay(
solocoder
2022/04/06
11.2K0
js中yyyy-MM-dd格式的日期转换
1.转换为yyyy年MM月dd日 var str = "2021-09-13"; var reg =/(\d{4})\-(\d{2})\-(\d{2})/; var date = str.replace(reg,"$1年$2月$3日"); alert(date); 2.转换为yyyy/MM/dd/ var str = "2021-09-13"; var reg =/(\d{4})\-(\d{2})\-(\d{2})/; var date = str.repl
江一铭
2022/06/16
6.9K0
js中日期格式化常用方法
任何语言中都会有对时间相关处理的方法,JavaScript中当然也有很多时间相关的方法,但是平时我们用到的很少,像我就是,总是记不住,用到的时候就去搜一下,但是网上推荐的总是类似的文章,有时候就会错过很多好用的方法,今天就来总结一下相关的方法,用的时候再也不愁了。
十里青山
2022/08/22
6.2K0
mysql日期格式转换_MySQL日期格式转换
DATE_FORMAT(date,format):根据参数对date进行格式化。1
全栈程序员站长
2022/07/02
11.7K0
JS生成Van-Picker 指定日期格式~
项目中需要根据后台配置生成指定的Picker日期格式,按照自然月或者按照指定日期生成月区间。
执行上下文
2023/07/24
3030
JS生成Van-Picker 指定日期格式~
js时间戳与日期格式间的相互转换
1. 将时间戳转换成日期格式 function timestampToTime(timestamp) {         var date = new Date(timestamp * 1000);/
Sindsun
2018/04/28
6K0
js获取当前日期并格式化_json格式怎么打开
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
全栈程序员站长
2022/09/29
7.9K0
js获取当前日期并格式化_json格式怎么打开
plsqldev 日期格式
之前装 win7 + oracle 11 R2 (64) + instantclient_11_2 (32) + PLSQL(32) 费了很大力气,见前一个帖子,后果就是plsql启动时读的环境变量位置是五花八门,可能是注册表中oraclehone下的,也可能是instantclient下的或者是电脑高级属性中环境变量,当然start.bat中的设置优先。
全栈程序员站长
2022/08/25
2K0

相似问题

如何在node.js中更改日期格式

32

node.JS中的日期格式

60

如何在node.js中更改格式化日期

120

如何在角2项目中更改moment.js格式

10

2 Node.js API日期格式

14
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

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

洞察 腾讯核心技术

剖析业界实践案例

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