首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

【教程】使用 CF-Worker-Dir Cloudflare Worker 免费搭建导航网站

使用 CF-Worker-Dir Cloudflare Worker 免费搭建导航网站,可以用这个替换掉浏览器自带的主页,自用还是比较香的!...一般选择 FREE 除非大佬您真的可以用到 image.png 设置完基础的设置之后 点击 创建 Worker image.png Worker 代码编辑页面的左边粘贴 CloudFlare...进入域名中的 Workers 管理页面 image.png 点击 添加路由 设置新的路由 image.png 路由 输入自己想使用的子域名,如果想在根域名使用直接把当前域名输入即可,Worker 选择根据上文搭建好的...Worker 的名字即可 路由 所使用的域名地址必须已经解析好记录,如果没有能绑定的 IP 地址,可以输入 8.8.8.8 大法占位 至此,使用 CF-Worker-Dir Cloudflare...Worker 免费搭建导航网站的教程已经完成教学,去享受你的导航网叭!

5.7K20

Service Worker的应用

Service Worker的应用 Service worker本质充当Web应用程序、浏览器与网络(可用时)之间的代理服务器,这个API旨在创建有效的离线体验,它会拦截网络请求并根据网络是否可用来采取适当的动作...描述 Service Worker本质也是浏览器缓存资源用的,只不过他不仅仅是Cache,也是通过worker的方式来进一步优化,其基于h5的web worker,所以不会阻碍当前js线程的执行,其最主要的工作原理...web worker的基础增加了离线缓存的能力。 本质充当Web应用程序(服务器)与浏览器之间的代理服务器(可以拦截全站的请求,并作出相应的动作->由开发者指定的动作)。...等,使用Service Worker之前有一些注意事项: Service worker运行在worker,也就表明其不能访问DOM。...2、手动清除Service Worker。3、sw安装时直接跳过waiting阶段。

49210

PWA 的探索与应用

PWA是传统Web应用的基础,结合Manifest和service worker,完善Web应用的一些能力,比如: 添加至主屏幕,点击主屏幕图标可以实现启动动画以及隐藏地址栏 实现离线缓存功能,即使用户手机没有网络...Service Worker 支持的事件 [h8fubjhexm.png] install:Service Worker 安装成功后被触发的事件, 事件处理函数中可以添加需要缓存的文件 activate...非重要资源,即使有资源加载失败也不影响Service Worker安装 cache.addAll(urlsToPrefetch); //vipUrlsToPrefetch中资源全部请求成功,Service...Service Worker缓存策略 Service Worker缓存策略大部分在fetch与install时间中定义,对于某些固定不变的静态资源,可以Service Worker初次安装的...install事件中将其缓存,但资源过大或者网络不佳都会造成资源并未全部下载成功而导致Service Worker安装被中断安装失败

3.1K90

译 | App Service 禁用 Basic 认证

原文:Jason Freeberg, Shubham Dhond 翻译:汪宇杰 导语 App Service 使用网站的发布配置文件中的基本身份验证凭据访问 FTP 和 WebDeploy。...右侧面板,您可以看到响应代码和正文。要确认FTP访问被阻止,您可以尝试使用FileZilla这样的FTP客户端进行身份验证。要检索发布凭据,请转到网站的欢迎页,然后单击“下载发布配置文件”。...打开Azure门户 打开您要在其中创建自定义角色的订阅 左侧导航面板,单击访问控制(IAM) 单击+添加,然后单击下拉列表中的添加自定义角色 提供角色的名称和说明。...这将打开App Service的所有RBAC操作的列表。...你也可以部署槽上关闭这项设置。

1.8K20

service worker 使用

cache API 为绑定在 service worker 的全局对象,可以用来存储网络响应发来的资源,这些资源只站点域名内有效,并且一直存在,直到你告诉它不再存储。...如遇到该问题,可尝试这么做: webserver 添加对该文件的过滤规则,不缓存或设置较短的有效期。...(); }); service worker 生命周期 service worker 工作流程 service worker 基于注册、安装、激活等步骤浏览器 js 主线程中独立分担缓存任务。...如果注册成功,service worker ServiceWorkerGlobalScope 环境中运行; 这是一个特殊的 worker context,与主脚本的运行线程相独立,同时也没有访问 DOM...service worker 事件 install: service worker 安装成功后被触发的事件,事件处理函数中可以添加需要缓存的文件。

1.3K31

Service Worker初探

如果在installing中,有任何资源加载失败,都会导致安装失败Service Worker会直接进入废弃状态。...发送http请求的时候,请求会先到达Service WorkerService Worker中,使用CacheStorage来查询是否具有可用的缓存。...在请求失败的情况下,使用的缓存也不一定是正在请求资源的缓存,同样也可以是其他的缺省资源。就像第一个代码示例一样,html请求失败的情况下,我们可以返回一个断网页面。...图片请求失败的情况下,我们可以提供一个默认图片 self.addEventListener('fetch', (event) => { event.respondWith( caches.open...Service Worker的支持下,我们可以页面上注册一个同步事件发送到Service WorkerService Worker中完胜数据请求。 这样,就不需要担心用户数据丢失的问题了。

1.2K20

天人合一物我相融,站点升级渐进式Web应用PWA(Progressive Web Apps)实践

为此我们需要提供两张不同分辨率的站点图标文件:     ServiceWorker服务     Service Worker是一个注册指定源和路径下的事件驱动型Web Worker。...Service Worker本质就是一个Web Worker,因此它具有Web Worker的特点:无法操作DOM、脱离主线程、独立上下文。    ...以本站为例,站点根目录创建sw.js文件,注意Service Worker文件位置一定得根目录,如果不在根目录也要通过重写或者url映射让其可以通过根目录路径进行访问,如:https://v3u.cn...Worker后,Service Worker开始进行安装,安装成功之后,会在worker中触发install事件;如果安装失败,则进入废弃状态。    ...install事件中,我们使用caches.open方法打开cache对象,并通过cache.addAll缓存所有我们列出的文件。

68320

WorkBox 之底层逻辑Service Worker

在给定的「作用域」(scope)内,service worker能够为页面执行处理资源的相关工作。 作用域 一个service worker的作用域由其「 Web 服务器的位置确定」。...尽管在此origin注册了一个service worker,但仍然会显示一条消息,说明没有当前的service worker。这是因为此页面不在已注册service worker的作用域内。...客户端 当说一个service worker正在控制一个页面时,实际「是控制一个客户端」。客户端是指URL位于该service worker作用域内的「任何打开的页面」。...如果service worker的内容包含「语法错误」,注册会失败,并丢弃service workerservice worker一个作用域内运行。...创建缓存之后,使用其异步的addAll方法「预缓存」一个资源URL数组。 如果传递给event.waitUntil的Promise被「拒绝,安装将失败」。

28420

Web性能优化之Worker线程(下)

前天Web性能优化之Worker线程()中针对Worker中的专用工作线程Dedicated Worker做了简单介绍和描述了如何配合webpack项目中使用。...今天,我们就着重对服务工作线程Service Worker进行介绍。由于,实际项目中,还未做实践,所以有些东西更偏向于概念和API的描述。...管理服务文件缓存 ⭐️⭐️⭐️ 线程消息 ⭐️⭐️⭐️ 拦截 fetch 事件 ⭐️⭐️⭐️⭐️⭐️ 1.服务工作线程Service Worker 服务工作线程Service Worker是一种类似浏览器中...❝与共享工作线程类似,来自「一个域」的多个页面「共享」一个服务工作线程 ❞ 服务工作线程两个主要任务最有用: 充当「网络请求的缓存层」 启用「推送通知」 ❝某种意义 服务工作线程就是用于把网页变成像...服务工作线程可以「安装时缓存后备资源」,然后缓存和网络都失败时返回它们。

2.4K20

JavaScript工作原理(八):Service Workers,生命周期和应用案例

基本Service Worker是一种网络工作者,更具体地说,它就像一个Shared WorkerService Worker它自己的全局脚本上下文中运行 它没有绑定到特定的网页 它无法访问DOM...安装阶段,最好加载和缓存一些静态资源。资源成功缓存后,Service Worker安装完成。如果没有成功(加载失败) – Service Worker将重试。...安装阶段,最好加载和缓存一些静态资源。资源成功缓存后,Service Worker安装完成。如果没有成功(加载失败) – Service将重试。一旦安装成功,您将知道静态资产位于缓存中。...如果安装了Service Worker,则浏览器需要为这个额外的线程花费额外的CPU和内存,否则浏览器将花费渲染网页。...为了避免两个版本的Web应用程序同时运行在不同的选项卡 – 这在网络实际非常常见,并且可能会创建非常糟糕的错误(例如,浏览器中存储数据时存在不同模式的情况)。

96510

Service Worker 全面进阶

继续~ Service Worker 讲道理是由两部分构成,一部分是 cache,还有一部分则是 Worker。...所以,SW(Service Worker) 本身的执行,就完全不会阻碍当前 js 进程的执行,确保性能第一。那 SW 到底是怎么工作的呢?...记住,下面的部分是另外一个 js 中的脚本,使用的是 worker 的编程方法。如果,有同学还不理解 worker 的话,可以先去学习一下,这样在后面的学习中才不会踩很深的坑。...这是 fetch 通信方式 很重要的两个概念。fetch 不仅分装了 ajax,而且通信方式也做了进一步的优化,同 node 一样,使用流来进行重用。...不过事实,还有更简单的办法来完成,即,直接使用 caches 对象。caches 和 web worker 类似。都是直接挂载到 window 对象的。

3.5K10

将字体进行缓存,优化网站速度

看着现在动辄几兆的字体,在网页使用会严重拖慢加载速度,有没有什么方法能够改善这种情况?...使用 Service Worker 进行缓存 # 此方法的前提是你已经注册好了 Service Worker // Service Worker 文件 // 此处将文件路径修改为实际路径 const...font.woff', '/path/to/font.ttf', ]; self.addEventListener('install', event => { event.waitUntil( caches.open...这种方法也无法享受到 Service Worker 提供的离线缓存和自动更新的功能,如果你的环境支持 Service Worker,推荐使用 Service Worker 缓存方案 3....两种方法的不同 # Service Worker 缓存字体 IndexedDB/LocalStorage 缓存字体 功能和用途 提供高级缓存控制和离线支持 简单的数据存储和访问 存储位置 浏览器的缓存存储

18110
领券