Can I still use pjax if I break and change some requests by ServiceWorker? #254

New Issue

iLoveElysia · 2022-12-08T05:47:11-05:00

Liynw commented

2022-12-08 05:47:11 -05:00

(Migrated from github.com)

For example, my website is A(it's static) but it's slow.To improve the speed,I upload all my resources on the website B.And I use ServiceWorker to cache all the resources from B.The next time I need to use them,it will make the request return the cache.And I upload all my pages on B too,so I use ServiceWorker,if I visit a new page in A,ServiceWorker will break the request and pull the page on B.

The code sw.js is like:

//--------------A part of handle-------------------------
for (var i in blog.origin) {
        if (domain.split(":")[0] == blog.origin[i].split(":")[0]) {
            if (blog.local) { return fetch(req) }
            setTimeout(async () => {
                await set_newest_blogver()
            }, 30 * 1000);
            urls = []
            for (let k in blog.plus) {
                urls.push(`https://${blog.plus[k]}` + fullpath(pathname))
            }
            for (let k in blog.npmmirror) {
                urls.push(blog.npmmirror[k] + fullpath(pathname))
            }
            const generate_blog_html = async (res) => {
                return new Response(await res.arrayBuffer(), {
                    headers: {
                        'Content-Type': 'text/html;charset=utf-8'
                    },
                    status: res.status,
                    statusText: res.statusText
                })
            }
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    caches.match(req).then(function (resp) {
                        if (!!resp) {
                            cons.s(`Cache Hited! | Origin:${urlStr}`)
                            setTimeout(() => {
                                resolve(resp)
                            }, 200);
                            setTimeout(() => {
                                lfetch(urls, urlStr).then(async function (res) {
                                    return caches.open(CACHE_NAME).then(async function (cache) {
                                        cache.delete(req);
                                        cons.s(`Cache Updated! | Origin:${urlStr}`)
                                        if (fullpath(pathname).match(/\.html$/g)) {
                                            const NewRes = await generate_blog_html(res)
                                            cache.put(req, NewRes.clone());
                                            resolve(NewRes)
                                        } else {
                                            cache.put(req, res.clone());
                                            resolve(res)
                                        }
                                    });
                                });
                            }, 0);
                        } else {
                            cons.w(`Cache Missed! | Origin:${urlStr}`)
                            setTimeout(() => {
                                lfetch(urls, urlStr).then(async function (res) {
                                    return caches.open(CACHE_NAME).then(async function (cache) {
                                        if (fullpath(pathname).match(/\.html$/g)) {
                                            const NewRes = await generate_blog_html(res)
                                            cache.put(req, NewRes.clone());
                                            resolve(NewRes)
                                        } else {
                                            cache.put(req, res.clone());
                                            resolve(res)
                                        }
                                    });
                                }).catch(function (err) {
                                    resolve(caches.match(new Request('/offline/index.html')))
                                })
                            }, 0);
                            setTimeout(() => {
                                resolve(caches.match(new Request('/offline/index.html')))
                            }, 5000);
                        }
                    })
                }, 0);
            })
        }
    }
//-------------------------------------------------

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

I wonder whether I can use pjax if my website has a ServiceWorker like that.

For example, my website is A(it's static) but it's slow.To improve the speed,I upload all my resources on the website B.And I use ServiceWorker to cache all the resources from B.The next time I need to use them,it will make the request return the cache.And I upload all my pages on B too,so I use ServiceWorker,if I visit a new page in A,ServiceWorker will break the request and pull the page on B. The code `sw.js` is like: ```js //--------------A part of handle------------------------- for (var i in blog.origin) { if (domain.split(":")[0] == blog.origin[i].split(":")[0]) { if (blog.local) { return fetch(req) } setTimeout(async () => { await set_newest_blogver() }, 30 * 1000); urls = [] for (let k in blog.plus) { urls.push(`https://${blog.plus[k]}` + fullpath(pathname)) } for (let k in blog.npmmirror) { urls.push(blog.npmmirror[k] + fullpath(pathname)) } const generate_blog_html = async (res) => { return new Response(await res.arrayBuffer(), { headers: { 'Content-Type': 'text/html;charset=utf-8' }, status: res.status, statusText: res.statusText }) } return new Promise((resolve, reject) => { setTimeout(() => { caches.match(req).then(function (resp) { if (!!resp) { cons.s(`Cache Hited! | Origin:${urlStr}`) setTimeout(() => { resolve(resp) }, 200); setTimeout(() => { lfetch(urls, urlStr).then(async function (res) { return caches.open(CACHE_NAME).then(async function (cache) { cache.delete(req); cons.s(`Cache Updated! | Origin:${urlStr}`) if (fullpath(pathname).match(/\.html$/g)) { const NewRes = await generate_blog_html(res) cache.put(req, NewRes.clone()); resolve(NewRes) } else { cache.put(req, res.clone()); resolve(res) } }); }); }, 0); } else { cons.w(`Cache Missed! | Origin:${urlStr}`) setTimeout(() => { lfetch(urls, urlStr).then(async function (res) { return caches.open(CACHE_NAME).then(async function (cache) { if (fullpath(pathname).match(/\.html$/g)) { const NewRes = await generate_blog_html(res) cache.put(req, NewRes.clone()); resolve(NewRes) } else { cache.put(req, res.clone()); resolve(res) } }); }).catch(function (err) { resolve(caches.match(new Request('/offline/index.html'))) }) }, 0); setTimeout(() => { resolve(caches.match(new Request('/offline/index.html'))) }, 5000); } }) }, 0); }) } } //------------------------------------------------- const fullpath = (path) => { path = path.split('?')[0].split('#')[0] if (path.match(/\/$/)) { path += 'index' } if (!path.match(/\.[a-zA-Z]+$/)) { path += '.html' } return path } ``` I wonder whether I can use pjax if my website has a ServiceWorker like that.

iLoveElysia closed this issue

2025-04-04 12:54:46 -05:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: iLoveElysia/pjax#254