custom header options needed

ChenYFan commented 2 years ago

Using npm(even cdnjs!) as a cdn for your static web pages is a good option.My blog mentions this and uses this work too:

https://blog.cyfan.top/p/d3c51290.html#%E5%85%A8%E7%AB%99NPM%E9%9D%99%E6%80%81%E5%8C%96

But in most of the headers returned by cdn, the html file's content-type is text/plain(like jsDelivr,if you don't change it to text/html,you will recieve a plain text webpage),because they don't want you to distribute it as a web page.But ServiceWorker can solve it.

You can open my blog in mainland China, my blog uses the sw written by myself to realize the distribution of the whole site to the npm mirror(most hit at eleme)

ChenYFan commented 2 years ago

The architecture of my blog:

Menci commented 2 years ago

现在 jsdelivr 没有国内镜像了，感觉用途不大了，只能自己建 CDN 了吧

ChenYFan commented 2 years ago

现在 jsdelivr 没有国内镜像了，感觉用途不大了，只能自己建 CDN 了吧

所以说npm可以用eleme，另外cdnjs也可以全站cdn啊

~~所以issue中文项目全英文是什么鬼~~

Menci commented 2 years ago

eleme 的 npm 是允许公开使用的吗，还是偷偷用的

On Sun, Jul 3, 2022 at 11:40 Menci @.***> wrote:

我一般看到有人用中文提 issue 就会用中文回

On Sun, Jul 3, 2022 at 11:38 ChenYFan @.***> wrote:

现在 jsdelivr 没有国内镜像了，感觉用途不大了，只能自己建 CDN 了吧

所以说npm可以用eleme，另外cdnjs也可以全站cdn啊

所以issue中文项目全英文是什么鬼

— Reply to this email directly, view it on GitHub https://github.com/Menci/service-worker-redirect-origin/issues/2#issuecomment-1173005062, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACWRBA4Q45W7SMDUHPYDKFLVSEDLPANCNFSM52OKWDKQ . You are receiving this because you commented.Message ID: @.***>

ChenYFan commented 2 years ago

eleme 的 npm 是允许公开使用的吗，还是偷偷用的 … On Sun, Jul 3, 2022 at 11:40 Menci @.> wrote: 我一般看到有人用中文提 issue 就会用中文回 On Sun, Jul 3, 2022 at 11:38 ChenYFan @.> wrote: > 现在 jsdelivr 没有国内镜像了，感觉用途不大了，只能自己建 CDN 了吧 > > 所以说npm可以用eleme，另外cdnjs也可以全站cdn啊 > > 所以issue中文项目全英文是什么鬼 > > — > Reply to this email directly, view it on GitHub > <#2 (comment)>, > or unsubscribe > https://github.com/notifications/unsubscribe-auth/ACWRBA4Q45W7SMDUHPYDKFLVSEDLPANCNFSM52OKWDKQ > . > You are receiving this because you commented.Message ID: > @.***> >

偷偷用的（笑

但是我提issue的目的是自定义header，不是自定义镜像

Menci commented 2 years ago

嗯我的意思是国内有可以嫖的公共 CDN 才会有这个改 header 的需求，不然自建的话就可以自己在远端处理 header 了

以及怎么解决 /path 不会返回 /path/index.html 的问题（/path/ 比较好处理）

On Sun, Jul 3, 2022 at 11:43 ChenYFan @.***> wrote:

eleme 的 npm 是允许公开使用的吗，还是偷偷用的 … <#m8620142906645601370> On Sun, Jul 3, 2022 at 11:40 Menci @.> wrote: 我一般看到有人用中文提 issue 就会用中文回 On Sun, Jul 3, 2022 at 11:38 ChenYFan @.> wrote: > 现在 jsdelivr 没有国内镜像了，感觉用途不大了，只能自己建 CDN 了吧 > > 所以说npm可以用eleme，另外cdnjs也可以全站cdn啊 > > 所以issue中文项目全英文是什么鬼 > > — > Reply to this email directly, view it on GitHub

<#2 (comment) https://github.com/Menci/service-worker-redirect-origin/issues/2#issuecomment-1173005062>, or unsubscribe > https://github.com/notifications/unsubscribe-auth/ACWRBA4Q45W7SMDUHPYDKFLVSEDLPANCNFSM52OKWDKQ . > You are receiving this because you commented.Message ID: > @.***>

偷偷用的（笑

但是我提issue的目的是自定义header，不是自定义镜像

— Reply to this email directly, view it on GitHub https://github.com/Menci/service-worker-redirect-origin/issues/2#issuecomment-1173005471, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACWRBAYBHLQAJHJG4MAOOODVSED5VANCNFSM52OKWDKQ . You are receiving this because you commented.Message ID: @.***>

ChenYFan commented 2 years ago

嗯我的意思是国内有可以嫖的公共 CDN 才会有这个改 header 的需求，不然自建的话就可以自己在远端处理 header 了以及怎么解决 /path 不会返回 /path/index.html 的问题（/path/ 比较好处理） … On Sun, Jul 3, 2022 at 11:43 ChenYFan @.> wrote: eleme 的 npm 是允许公开使用的吗，还是偷偷用的 … <#m8620142906645601370> On Sun, Jul 3, 2022 at 11:40 Menci @.> wrote: 我一般看到有人用中文提 issue 就会用中文回 On Sun, Jul 3, 2022 at 11:38 ChenYFan @.> wrote: > 现在 jsdelivr 没有国内镜像了，感觉用途不大了，只能自己建 CDN 了吧 > > 所以说npm可以用eleme，另外cdnjs也可以全站cdn啊 > > 所以issue中文项目全英文是什么鬼 > > — > Reply to this email directly, view it on GitHub > <#2 (comment) <#2 (comment)>>, > or unsubscribe > https://github.com/notifications/unsubscribe-auth/ACWRBA4Q45W7SMDUHPYDKFLVSEDLPANCNFSM52OKWDKQ > . > You are receiving this because you commented.Message ID: > @.> > 偷偷用的（笑但是我提issue的目的是自定义header，不是自定义镜像 — Reply to this email directly, view it on GitHub <#2 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACWRBAYBHLQAJHJG4MAOOODVSED5VANCNFSM52OKWDKQ . You are receiving this because you commented.Message ID: @.***>

我自己的办法是正则，一个比较粗糙的函数：

const fullpath = (path) => {
    path = path.split('?')[0].split('#')[0]
    if (path.match(/\/$/)) {
        path += 'index'
    }
    if (!path.match(/\.[a-zA-Z]+$/)) {
        path += '.html'
    }
    return path
}

我在我的博客提到过

ChenYFan commented 2 years ago

嗯我的意思是国内有可以嫖的公共 CDN 才会有这个改 header 的需求，不然自建的话就可以自己在远端处理 header 了以及怎么解决 /path 不会返回 /path/index.html 的问题（/path/ 比较好处理） … On Sun, Jul 3, 2022 at 11:43 ChenYFan @.> wrote: eleme 的 npm 是允许公开使用的吗，还是偷偷用的 … <#m8620142906645601370> On Sun, Jul 3, 2022 at 11:40 Menci @.> wrote: 我一般看到有人用中文提 issue 就会用中文回 On Sun, Jul 3, 2022 at 11:38 ChenYFan @.> wrote: > 现在 jsdelivr 没有国内镜像了，感觉用途不大了，只能自己建 CDN 了吧 > > 所以说npm可以用eleme，另外cdnjs也可以全站cdn啊 > > 所以issue中文项目全英文是什么鬼 > > — > Reply to this email directly, view it on GitHub > <#2 (comment) <#2 (comment)>>, > or unsubscribe > https://github.com/notifications/unsubscribe-auth/ACWRBA4Q45W7SMDUHPYDKFLVSEDLPANCNFSM52OKWDKQ > . > You are receiving this because you commented.Message ID: > @.> > 偷偷用的（笑但是我提issue的目的是自定义header，不是自定义镜像 — Reply to this email directly, view it on GitHub <#2 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACWRBAYBHLQAJHJG4MAOOODVSED5VANCNFSM52OKWDKQ . You are receiving this because you commented.Message ID: @.***>

我自己的办法是正则，一个比较粗糙的函数：

const fullpath = (path) => {
    path = path.split('?')[0].split('#')[0]
    if (path.match(/\/$/)) {
        path += 'index'
    }
    if (!path.match(/\.[a-zA-Z]+$/)) {
        path += '.html'
    }
    return path
}

我在我的博客提到过

ChenYFan commented 2 years ago

嗯我的意思是国内有可以嫖的公共 CDN 才会有这个改 header 的需求，不然自建的话就可以自己在远端处理 header 了以及怎么解决 /path 不会返回 /path/index.html 的问题（/path/ 比较好处理） … On Sun, Jul 3, 2022 at 11:43 ChenYFan @.> wrote: eleme 的 npm 是允许公开使用的吗，还是偷偷用的 … <#m8620142906645601370> On Sun, Jul 3, 2022 at 11:40 Menci @.> wrote: 我一般看到有人用中文提 issue 就会用中文回 On Sun, Jul 3, 2022 at 11:38 ChenYFan @.> wrote: > 现在 jsdelivr 没有国内镜像了，感觉用途不大了，只能自己建 CDN 了吧 > > 所以说npm可以用eleme，另外cdnjs也可以全站cdn啊 > > 所以issue中文项目全英文是什么鬼 > > — > Reply to this email directly, view it on GitHub > <#2 (comment) <#2 (comment)>>, > or unsubscribe > https://github.com/notifications/unsubscribe-auth/ACWRBA4Q45W7SMDUHPYDKFLVSEDLPANCNFSM52OKWDKQ > . > You are receiving this because you commented.Message ID: > @.> > 偷偷用的（笑但是我提issue的目的是自定义header，不是自定义镜像 — Reply to this email directly, view it on GitHub <#2 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACWRBAYBHLQAJHJG4MAOOODVSED5VANCNFSM52OKWDKQ . You are receiving this because you commented.Message ID: @.***>

就是因为cdn不是自己的所以才要考虑在sw端改header啊...我的想法是如果能得到多star可以考虑用cdnjs

Menci commented 2 years ago

你这个只处理了 /path/，没处理 /path

https://blog.cyfan.top/links 是打不开的

我有一个思路是手动指定要加上 index.html 的 pathname regex，比如有些站点可以匹配到最后一级没有点就可以认为是目录

ChenYFan commented 2 years ago

你这个只处理了 /path/，没处理 /path

https://blog.cyfan.top/links 是打不开的

我有一个思路是手动指定要加上 index.html 的 pathname regex，比如有些站点可以匹配到最后一级没有点就可以认为是目录

因为默认情况下，/path就应该是/path.html，/path/默认才是/path/index.html

如果你处理了/path，如果一个页面下同时存在/path和/path.html，那怎么解决冲突

Menci commented 2 years ago

没有 /path 到 /path.html 的说法吧

按照一般 http server（比如 nginx）的行为，/path 如果是一个文件就会被直接返回，如果是文件夹就会跳转到 /path/ 并返回指定的索引页面文件名（index.html）的内容

ChenYFan commented 2 years ago

没有 /path 到 /path.html 的说法吧

按照一般 http server（比如 nginx）的行为，/path 如果是一个文件就会被直接返回，如果是文件夹就会跳转到 /path/ 并返回指定的索引页面文件名（index.html）的内容

1.我待会儿试试githubpage对此如何处理 2.前端也没办法判断啊。。。那也只能并发两个请求？

Menci commented 2 years ago

@ChenYFan 是没法判断，所以只能让用户来指定了

ChenYFan commented 2 years ago

是的，在github中是这样表现的

/path 对应的是文件，不跳转；存在文件，直接返回源文件；不存在再加.html后缀
/path 对应的是文件夹，先不管是否存在index.html 直接跳转到/path/，然后返回默认的/path/index.html，如果不存在就直接404
/path 同时对应/path.html和/path/index.html，优先/path.html


https://tester.cyfan.top/PageRouteTest/test3 -301-> https://tester.cyfan.top/PageRouteTest/test3/ -获取index.html-> https://tester.cyfan.top/PageRouteTest/test3/index.html

https://tester.cyfan.top/PageRouteTest/test4 -301-> https://tester.cyfan.top/PageRouteTest/test4/ -index.html获取失败-> 404

ChenYFan commented 2 years ago

@ChenYFan 是没法判断，所以只能让用户来指定了

所以这里可以并发三个，对/path同时请求/path/index.html 、/path 、/path.html，返回2XX / 3XX即可

当然，非缺省情况还是让用户自己解决。。。

Menci commented 2 years ago

观察了一下 GitHub Pages 的行为

0：对照，直接返回 1：只有 1/index.html，会跳转到 1/ 并返回 1/index.html 2：只有 2.html，会直接返回 2.html 3：同时有 3/index.html 和 3.html，会直接返回 3.html，忽略 3/index.html

Menci commented 2 years ago

Nginx 这里的行为是我说的那样

ChenYFan commented 2 years ago

Nginx 这里的行为是我说的那样

一个比较麻烦的事实是前端对于文件和文件夹是不好判断的，cdn对前端用户就类似一个黑盒。所以一般缺省就同时并发，当然用户选择自然是最好的

ChenYFan commented 2 years ago

可以用Promise.any + Promise Settimeout设置优先级，依次为：

/path
/path.html
/path/index.html

在上一个超时(~50ms阈值)或者失败后立刻启动下一个进程，这也是一个比较简单的想法

此外，我博客提到了一个比较原始的方法，但那个方法会在超时后返回一个无法获取原Promise错误，不过不会影响使用（就是难看点罢了，原因是原先的Promise已resolve，再次resolve会失败，这在sw端不会影响下一个行为）。

这里还有一个ugly的、以前练手用的sw+jsdelivr全站加速项目 https://blog-jsdelivr.cyfan.top/sw.js https://github.com/ChenYFan/ClientWorker 你看着乐就行

Menci commented 2 years ago

我觉得在前端并发尝试不同的请求并不好，应该部署的时候让用户自己定义 transform rules，因为用户应当是了解自己对哪些路径需要哪些行为的

rewrite-rules: |
  /\/([^\/.]+)\/?$//$1/index.html

（语法：每行一条规则，每个规则是一个 js RegExp 表达式跟着替换字符串，替换结果不需要转义）

ChenYFan commented 2 years ago

我觉得在前端并发尝试不同的请求并不好，应该部署的时候让用户自己定义 transform rules，因为用户应当是了解自己对哪些路径需要哪些行为的
rewrite-rules: |
  /\/([^\/.]+)\/?$//$1/index.html
（语法：每行一条规则，每个规则是一个 js RegExp 表达式跟着替换字符串，替换结果不需要转义）

正解，毕竟我不太会开发那种适配所有情况的项目 ~~我太菜了~~

此外，回归正题，自定义header目前考虑的怎么样了 ~~还记得issue题嘛~~

Menci commented 2 years ago

另外可以定义用来 302 redirect 的 redirect rules，比如（会更符合后端行为，先跳转再返回默认文档）：

redirect-rules: |
  /(\/[^/.]+)$/$1/
rewrite-rules: |
  /(\/[^/]+)\/$/$1/index.html

Menci commented 2 years ago

自定义 Header 也可以用类似的方法来实现，对于某个 Header，匹配到指定的路径就返回指定的值

因为这种情况下一定需要上面说的 redirect-rule 和 rewrite-rule 来实现，所以只需要匹配最终生成的带 index.html 的 url 即可

response-header-rules: |
  /\.html$/Content-Type: text/html; charset=utf-8

生效顺序是，先判断 redirect-rules，匹配则直接返回 302，然后判断 rewrite-rules，匹配则修改真实请求的 URL，得到响应后使用真实请求的 URL 来判断 response-header-rules

ChenYFan commented 2 years ago

@Menci 一个想法：反正ServiceWorker可以import js-yaml，为何不试试在前端配置yml文件，安装时缓存到cachestorage，之后直接用sw解析yml完成自定义设置，也可以参考我npm版本自动更新

~~最近比较忙,我就是过来提个想法,如果你觉得不合适那我就自己实现吧~~

Menci commented 2 years ago

不需要动态解析 yaml，太重了，在 build service worker 的时候把逻辑 build 进去就可以了

ChenYFan commented 2 years ago

关于那个Event引擎，他在获取文件的时候相对路径会出现错误，你要重构他的url才行

假设用户在 https://example.com/ 请求 index.js，而index.js中会请求assets/index.css，那么正常请求路径应该是这样：

https://example.com
-> index.js
<- https://example.com/index.js √
-> index.js -> assets/index.css
<- https://example.com/assets/index.css √

使用外部cdn加载

https://example.com
-> index.js
<- https://examplecdn.com/package/dist/index.js √
-> index.js -> assets/index.css
<- https://examplecdn.com/assets/index.css ×

在请求assets/index.css时，用户会错误的请求到了cdn的根目录

https://github.com/ChenYFan/ClientWorker/commit/e20e45325a231084787ea4a6a6ec0bb3af5c4c94

Menci commented 2 years ago

处理相对路径是在进入 service worker 的 fetch 之前浏览器处理好的吧

ChenYFan commented 2 years ago

处理相对路径是在进入 service worker 的 fetch 之前浏览器处理好的吧

我的意思是js获取到的相对路径不是请求的相对路径，而是sw劫持时返回的路径

Menci commented 2 years ago

指 import.meta.url 吗，我没测过，但我感觉 sw 对网页内的 js 应该是透明的啊，而且我也没有任何一个地方从 sw 向网页返回了真实请求地址

On Sat, Jul 16, 2022 at 17:36 ChenYFan @.***> wrote:

处理相对路径是在进入 service worker 的 fetch 之前浏览器处理好的吧

我的意思是js获取到的相对路径不是请求的相对路径，而是sw劫持时返回的路径

— Reply to this email directly, view it on GitHub https://github.com/Menci/service-worker-redirect-origin/issues/2#issuecomment-1186132747, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACWRBA4OJ5XMQ5PLJ26KAW3VUJ7CLANCNFSM52OKWDKQ . You are receiving this because you were mentioned.Message ID: @.***>

Menci commented 2 years ago

我一般看到有人用中文提 issue 就会用中文回

On Sun, Jul 3, 2022 at 11:38 ChenYFan @.***> wrote:

现在 jsdelivr 没有国内镜像了，感觉用途不大了，只能自己建 CDN 了吧

所以说npm可以用eleme，另外cdnjs也可以全站cdn啊

所以issue中文项目全英文是什么鬼

— Reply to this email directly, view it on GitHub https://github.com/Menci/service-worker-redirect-origin/issues/2#issuecomment-1173005062, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACWRBA4Q45W7SMDUHPYDKFLVSEDLPANCNFSM52OKWDKQ . You are receiving this because you commented.Message ID: @.***>

Menci commented 2 years ago

你这个只处理了 /path/，没处理 /path

https://blog.cyfan.top/links 是打不开的

我有一个思路是手动指定要加上 index.html 的 pathname regex，比如有些站点可以匹配到最后一级没有点就可以认为是目录

On Sun, Jul 3, 2022 at 11:49 ChenYFan @.***> wrote:

嗯我的意思是国内有可以嫖的公共 CDN 才会有这个改 header 的需求，不然自建的话就可以自己在远端处理 header 了以及怎么解决 /path 不会返回 /path/index.html 的问题（/path/ 比较好处理） … <#m4118970551732075802> On Sun, Jul 3, 2022 at 11:43 ChenYFan @.*> wrote: eleme 的 npm 是允许公开使用的吗，还是偷偷用的 … <#m8620142906645601370> On Sun, Jul 3, 2022 at 11:40 Menci @.> wrote: 我一般看到有人用中文提 issue 就会用中文回 On Sun, Jul 3, 2022 at 11:38 ChenYFan @.> wrote: > 现在 jsdelivr 没有国内镜像了，感觉用途不大了，只能自己建 CDN 了吧 > > 所以说npm可以用eleme，另外cdnjs也可以全站cdn啊 > > 所以issue中文项目全英文是什么鬼 > > — > Reply to this email directly, view it on GitHub > <#2 https://github.com/Menci/service-worker-redirect-origin/issues/2 (comment) <#2 (comment) https://github.com/Menci/service-worker-redirect-origin/issues/2#issuecomment-1173005062>>,

or unsubscribe > https://github.com/notifications/unsubscribe-auth/ACWRBA4Q45W7SMDUHPYDKFLVSEDLPANCNFSM52OKWDKQ https://github.com/notifications/unsubscribe-auth/ACWRBA4Q45W7SMDUHPYDKFLVSEDLPANCNFSM52OKWDKQ . > You are receiving this because you commented.Message ID: > @.> > 偷偷用的（笑但是我提issue的目的是自定义header，不是自定义镜像 — Reply to this email directly, view it on GitHub <#2 (comment) https://github.com/Menci/service-worker-redirect-origin/issues/2#issuecomment-1173005471>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACWRBAYBHLQAJHJG4MAOOODVSED5VANCNFSM52OKWDKQ https://github.com/notifications/unsubscribe-auth/ACWRBAYBHLQAJHJG4MAOOODVSED5VANCNFSM52OKWDKQ . You are receiving this because you commented.Message ID: @.>

我自己的办法是正则，一个比较粗糙的函数：

const fullpath = (path) => {
path = path.split('?')[0].split('#')[0]

if (path.match(/\/$/)) {

    path += 'index'

}

if (!path.match(/\.[a-zA-Z]+$/)) {

    path += '.html'

}

return path
}

我在我的博客提到过 https://blog.cyfan.top/p/d3c51290.html#%E5%85%A8%E7%AB%99NPM%E9%9D%99%E6%80%81%E5%8C%96

— Reply to this email directly, view it on GitHub https://github.com/Menci/service-worker-redirect-origin/issues/2#issuecomment-1173005965, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACWRBA25XQL54BLJYSZG4XDVSEEULANCNFSM52OKWDKQ . You are receiving this because you commented.Message ID: @.***>

Menci / service-worker-redirect-origin

custom header options needed #2