pwa h5快应用缓存

最新推荐文章于 2024-04-27 16:45:20 发布

web修理工

最新推荐文章于 2024-04-27 16:45:20 发布

阅读量611

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_42374676/article/details/109984175

版权

JavaScript 专栏收录该内容

163 篇文章 2 订阅

订阅专栏

1https://segmentfault.com/a/1190000019414253 // 创建一个pwa 应用
1.pwa 前后端分离后 manifest的应用(随着前后端分离缓存 html 和css 使用ajax局部刷新这个问题得到了很好的解决)

简而言之，我crossorigin="use-credentials"在本节中添加了<link rel="manifest">元素<head>。

参考:https://www.w3.org/TR/2020/WD-appmanifest-20201019/#name-member
参考:https://www.jianshu.com/p/916a01670a23
参考 https://blog.csdn.net/hellodake/article/details/84024148
参考:https://developer.mozilla.org/zh-CN/docs/Web/Manifest
参考:https://segmentfault.com/a/1190000012353473

{
 
    // 必须的字段3个
 
    "name": "MyExtension", // 扩展名称
 
    "version": "1.0", // 版本。由1到4个整数构成。多个整数间用"."隔开
 
    "manifest_version": 2, // manifest文件版本号。Chrome18开始必须为2
 
    // 建议提供的字段3个
 
    "description": "",   // 描述。132个字符以内
 
    "icons": {
 
       "16": "image/icon-16.png",
 
       "48": "image/icon-48.png",
 
       "128": "image/icon-128.png"
 
    }, //扩展图标。推荐大小16，48，128
 
    "default_locale": "en", // 国际化
 
    // 以下字段多选一，或者都不提供
 
    "browser_action": {
 
       "default_icon": "image/icon-128.png",
 
        "default_title": "My Test",
 
       "default_popup": "html/browser.html"
 
    }, //地址栏右侧图标管理。含图标及弹出页面的设置等
 
    "page_action": {
 
        "default_icon": "image/icon-48.png",
 
        "default_title": "My Test",
 
        "default_popup": "html/page.html"
 
    }, //地址栏最后附加图标。含图标及行为等
 
    "theme": {}, // 主题，用于更改整个浏览器的外观
 
    "app": {}, // 指定扩展需要跳转到的URL
 
    // 根据需要提供
 
    "background": {
 
       "scripts": [
 
           "lib/jquery-3.3.1.min.js",
 
           "js/background.js"
 
       ] ,
 
        "page":"html/background.html"
 
    }, // 指定扩展进程的background运行环境
 
    "chrome_url_overrides": {
 
       "pageToOverride": "html/overrides.html"
 
    }, //替换页面。详见注释1
 
    "content_scripts": [{
 
      "matches": ["https://www.baidu.com/*"],
 
      "css": ["css/mystyles.css"],
 
      "js": ["lib/jquery-3.3.1.min.js", "js/content.js"]
 
    }], // 指定在web页面运行的脚本。详见注释2
 
    "content_security_policy": "",  // 安全策略
 
    "file_browser_handlers": [],   
 
    "homepage_url": "http://xxx", // 扩展的官方主页
 
    "incognito": "spanning", // 或"split"。详见注释3
 
    "intents": {}, // 用户操作意图描述
 
    "key": "", // 扩展唯一标识。不需要人为指定
 
    "minimum_chrome_version": "1.0", // 扩展所需chrome的最小版本
 
    "nacl_modules": [],  // 消息与本地处理模块映射
 
    "offline_enabled": true, // 是否允许脱机运行
 
    "omnibox": {
 
       "keyword": "myKey"
 
    }, //ominbox即地址栏。用于响应地址栏的输入事件
 
    "options_page": "aFile.html", // 选项页。用于在扩展管理页面跳转到选项设置
 
    "permissions": [
 
       "https://www.baidu.com/*",
 
       "background",
 
       "tabs"
 
    ], //权限。详见注释4
 
    "plugins": [{
 
       "path": "extension_plugin.dll",
 
       "public": true
 
    }], // 扩展。可调用第三方扩展
 
    "requirements": {}, // 指定所需要的特殊技术。目前只支持"3D"
 
    "update_url": "http://path/to/updateInfo.xml",   // 自动升级
 
    "web_accessible_resources": [] // 指定资源路径，为String数组
 
}


{
  "package": "com.lingan.seeyouxiaomi",
  "name": "美柚",
  "version": "1.2",
  "versionCode": 3,
  "versionName": "1.2",
  "minPlatformVersion": 100,
  "icon": "/Common/resources/logo_180.png",
  "features": [
    {
      "name": "com.miui.hybrid.features.Network"
    },
    {
      "name": "system.fetch"
    },
    {
      "name": "system.storage"
    },
    {
      "name": "system.prompt"
    }
  ],
  "permissions": [
    {
      "origin": "*"
    }
  ],
  "config": {
    "logLevel": "debug"
  },
  "router": {
    "entry": "Home",
    "pages": {
      "Home": {
        "component": "home"
      },
      "Me": {
        "component": "me"
      },
      "Setup": {
        "component": "setup"
      },
      "Records": {
        "component": "records"
      },
      "About": {
        "component": "about"
      },
      "Login": {
        "component": "login"
      },
      "Setpw": {
        "component": "setpw"
      },
      "Tips": {
        "component": "tips"
      }
    }
  },
  "display": {
    "backgroundColor": "#ffffff",
    "titleBar": true,
    "titleBarBackgroundColor": "#ff5073",
    "titleBarTextColor": "#ffffff",
    "pages": {
      "Home": {
        "titleBarText": "美柚"
      },
      "Me": {
        "titleBarText": "美柚"
      },
      "Setup": {
        "titleBarText": "经期设置"
      },
      "Records": {
        "titleBarText": "我的记录"
      },
      "About": {
        "titleBarText": "关于美柚"
      },
      "Login": {
        "titleBarText": "登入"
      },
      "Setpw": {
        "titleBarText": "填写密码"
      },
      "Tips": {
        "titleBarText": "今日贴士"
      }
    }
  }
}

简而言之，我crossorigin="use-credentials"在本节中添加了元素。

参考链接:https://github.com/alienzhou/learning-pwa/tree/manifest

2.php 是后台渲染因此缓存的模式

<!DOCTYPE html>
//缓存文件 demo.appcache 缓存appchache 网络传输是先本地 局域网 广域网 依次往上找(类似原型链)
<html lang="en" manifest="demo.appcache">
<head>
    <meta charset="UTF-8">
    <title>10-应用程序缓存</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="../js/cookie.js"></script>
    <script src="../js/jquery-3.3.1.js"></script>
    <script src="../js/template-web.js"></script>

</head>
<body>

</body>
<html>

缓存文件表示

//demo.appcache
CACHE MANIFEST
# 2020-02-21 v1.0.0 备注时间
/theme.css  //缓存 css
/logo.gif   //缓存 logo.gif
/main.js    //缓存 main.js

NETWORK:    //缓存的线上资源
login.asp

FALLBACK:  //访问资源 第二个是替补资源
ml5/ /404.html

php 后台渲染有个问题每次动态的资源都会拿缓存本地的得不到更新(弊端) 解决方案:动态manifest文件

<html  manifest="http://www.sofish.de/sofished.manifest">

nginx 传输缓存(网路请求缓存)

text/cache-manifest         appcache;

转载:https://www.cnblogs.com/brainmao/archive/2011/09/27/2193495.html
一、什么是 Cache Manifest
话说，作为一个 web 开发相关的人员，都不会少听到、看到 cache 这个词。是的，上面也已经说了，它是一种缓存的机制。它可以通过一个 .manifest 文件来配置需要缓存的或者一定要保持联网缓存的文件。而重点就是这个 .manifest 文件，具体的可以 Google 一下，而简单的我帮你整理一下现在可能会希望了解的东西：

MIME TYPE：text/cache-manifest
需要由你创建的：NAME.manifest
作用：主要是配置需要缓存的文件
二、如何实现
实现起来倒是非常简单（当然，这也是有问题的，这个我们后面讲解决方案），实现步骤如下：

在服务器上添加MIME TYPE支:
比如 Apache 中可在 .htaccess 中添加：

AddType text/cache-manifest manifest
创建 NAME.manifest:
其中第一行的 CACHE MANIFEST 标识是一定要有的，而 CACHE / NETWORK / FACKBACK 都是可选的。如果没有写标识，则默认缓存，CACHE 就不用说了，缓存；NETWORK 指不想缓存的页面，比如登陆页等；FALLBACK 是指当没有响应时的替代方案，比如我想请求某个页面，但这个页面的服务器挂了，那么，我可以显示另外一个指定的页面，文件结构如下：

配置文件参考

CACHE MANIFEST

# VERSION 0.3

# 直接缓存的文件
CACHE:
abc.html
images/sofish.png
js/main.js
css/layout.css

# 需要在时间在线的文件
NETWORK:
/wp-admin/

# 替代方案
FALLBACK:
/ajax/ ajax.html

配置文件参考

CACHE MANIFEST
# 井号备注，这边可以放版本更新时间，修改备注算更新 manifest 文件
CACHE:
# 首次下载 CACHE 后列出来的文件后缓存到本地。
/favicon.ico
/main.css
 
NETWORK:
# NETWORK 下的文件不可被缓存，必须要与服务器连接。
login.php
 
FALLBACK:
# 一行放两个路径，第一个是访问资源，第二个是替补；当无法访问前一个资源时，用后一个资源代替之。
/cat/ /404.html

至于如何更新这个配置文件？只要改变文件的内容即可，上面的 # VERSION 0.3 其实只是一行注释，但改变文件可以重新缓存，这样写上版本号，想更新的时候修改版本号来重新缓存，是一种比较推荐的方法，甚至可以是最佳实践。

给标签加 manifest 属性：

是的，就是如此简单，相信你花上30分钟也就了解了。当时我也这样。随后也很快地应用上去。结果。结果就是像这篇文章一样还没写完，但没有时间折腾，而是速速把它撤下，等问题解决后再应用。

三、Cache Manifest 存在的问题
经过上面一整，速度当然爽，帮忙测试的人也小震惊了一下，只是，还是存在一些问题，看一下，然后我们尝试解决：

自动缓存引用了 manifest 文件的页面
即使在 NETWORK 中指定 “*”（所有的页面都）使用网络，还是不能解决它自动缓存当前页面。这使得这个页面在 manifest 没有变更的情况下，会一直以"类静态"存在。比如，你后台更新了一篇文章，这个动态的首页，还是像第一次缓存的时候一样，没有变。这对于静态页面还好，但应用在一个动态系统就很麻烦了，因为你的内容是时时要更新的。

Firefox 弹出提示信息
可能是习惯了弹窗警告之类的，一不小心，用户还以为是网站被人挂马呢，想把不干净的东西存储到他的电脑。

159445840.jpg

四、解决方案
（一）关于自动缓存当前页面

我查了 w3c 的文档，也看了《Pro HTML5 Programming》的第10章（Creating HTML5 Offline Web Applications），最后还是 div into HTML5 的那句话，原意大概是：这并不是 Bug，而是机制的需要。

真是杯具，反正我能理解到的是，这是一种强加的功能。虽然说这样会让页面载入更快，但对于动态页面来说就是恶心了。至少应该有一种让用户选择是否缓存当前页的配置方案（或者说是一个开关）。不过，这是暂时不能解决的，毕竟这还只是一个 Draft，我们要用，就应用找一个合适的方案。

我的想法是，看看大家有没有更好的办法。结果，查了一下，无果。新的东西，几乎所有文章说的都只是我上面说的那个如何去写一个 manifest 文件，看来还是没办法偷懒。然后，便开始想：

一定不要缓存动态的页面，当前页一定不能引用 manifest文件
能不能从其他页面先载入缓存？
那么，如果有解决方案的话，解决方法应该是：

不在当前页面引用 manifest
在用户打开页面之前，需要有一个页面来实现缓存机制
如果这样，那么为何不试一下 iframe 来引入一个拥有 manifest 的静态文件？但用 iframe 还能会缓存到文件？经过一翻测试，Google Chrome 的调试工具给了答案：

manifest.png

太给力啦！！竟然成功缓存。做法是这样的，新建一个 cache.html 文件来当做为当前页面的代理，内容如下：

<!DOCTYPE html>
<html  manifest="http://www.sofish.de/sofished.manifest">
<head>
        <meta charset=utf-8 />
        <title>cache</title>
</head>
<body>
hi sofish!
</body>
</html>

然后，在每个页面通过 iframe 来引用这个静态文件，以达到我们不缓存当面页面，只缓存我们希望缓存文件的目的。

（二）关于 Firefox 弹出警告问题

这个，浏览器默认的，浏览器厂商的目的是为用户的安全着想，我们暂时也改变不了。其实，也不会有太大的影响，我也没有好好去想。

五、总结
测试下来，其实跟缓存当前页面还是有差别的，毕竟像站外的链接，特别是 gravatar 总要请求这么多图片，这点就又多了一点时间了。这现象主要出现在 Firefox 下，而 Webkit 而表示非常棒，速度几乎和缓存当前面一样，第二次打开的页面，都是瞬间响应的，这点不得不赞啊。

对于实践的 Demo，本来可以提供一份，不过，瞄了一下，突然发现自己写得太专心了，已凌晨 2：49 了，明天还要上班。所以，打开你的调试工具，把本博当 Demo 看吧，这是最直接的应用了。

好吧，大概就这样，能为用户省多少就是多少，这是一个前端希望做到的，也是能做到的。这也算是有了 fallback 方案。期待你，看到最后的你，还有更好的方法。也期待 HTML5 的发展，期待这些给力的新技术。

广积粮，筑高墙，缓称王

web修理工

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
pwa h5快应用缓存

1.pwa 前后端分离后 manifest的应用(随着前后端分离缓存 html 和css 使用ajax局部刷新这个问题得到了很好的解决)简而言之，我crossorigin="use-credentials"在本节中添加了<link rel="manifest">元素<head>。简而言之，我crossorigin="use-credentials"在本节中添加了元素。2.php 是后台渲染因此缓存的模式<!DOCTYPE html>//缓存文件 demo.
复制链接

扫一扫