缓存存储在Chrome PWA中正常工作，但可以在iOS PWA中工作

发布于 2025-01-24 00:42:34 字数 915 浏览 4 评论 0原文

我正在使用vite运行vue.js应用程序，并且在chrome/firefox浏览器中一切正常。同样，基本功能在Safari和iOS上都很好。我正在尝试在pwa应用程序和Safari浏览器之间访问缓存存储和同步令牌。

发生了两个奇怪的事情：

当用户登录到网站时，我设置了缓存并模拟用户行为。例如，基本的用户登录名，然后将URL更改为其他内容，然后返回网站。发生这种情况时，缓存变量是未定义的...
当我设置缓存和用户安装pwa时，高速缓存存储中没有存储数据。

注意：我在浏览器的local-Storage中坚持缓存，并且我知道我不能使用local-Storage来

获取

令牌：

const CACHE_NAME = "auth";
const TOKEN_KEY = "token";
const FAKE_ENDPOINT = "/get-token";


export const saveToken = async (token: string) => {
    try {
        const cache = await caches.open(CACHE_NAME);
        const responseBody = JSON.stringify({
            [TOKEN_KEY]: token
        });
        const response = new Response(responseBody);
        await cache.put(FAKE_ENDPOINT, response);
        console.log("Token saved!

原文

I'm running vue.js app using vite and everything works fine in chrome/firefox browsers. also the basic functionality works fine on safari and IOS. I'm trying to access the cache storage and sync token between pwa app and safari browser.

Two weird things happens:

When user login to the website I set the cache and I simulate user behavior. for example a basic user login and then change the url to something else and back to the website. When this thing happens the caches variable is undefined...
When I set cache and user installs pwa there's no data stored in cache storage.

Note: I persist cache in local-storage of the browser and I know that I can't use local-storage to get token thus I use cache to share it between browser and pwa

Codes

How I cache token:

const CACHE_NAME = "auth";
const TOKEN_KEY = "token";
const FAKE_ENDPOINT = "/get-token";


export const saveToken = async (token: string) => {
    try {
        const cache = await caches.open(CACHE_NAME);
        const responseBody = JSON.stringify({
            [TOKEN_KEY]: token
        });
        const response = new Response(responseBody);
        await cache.put(FAKE_ENDPOINT, response);
        console.log("Token saved! ????");
        console.log("Saved token: ", await getToken())
    } catch (error) {
        // It's up to you how you resolve the error
        console.log("saveToken error:", {error});
    }
};

export const getToken = async () => {
    try {
        const cache = await caches.open(CACHE_NAME);
        const response = await cache.match(FAKE_ENDPOINT);

        if (!response) {
            return null;
        }

        const responseBody = await response.json();
        return responseBody[TOKEN_KEY];
    } catch (error) {
        // Gotta catch 'em all
        console.log("getToken error:", {error});
    }
};

分享到QQ

分享到微博