webpack插件webpack-manifest实现HTML5离线缓存

时间 2019-11-06

标签 webpack 插件 manifest 实现 html5 html 离线缓存栏目 HTML5 繁體版

原文原文链接

这是一个WebPACK插件。这主要是HTML5的缓存清单文件生成。生成HTML5的缓存清单文件，生成资产体现WebPACK插件，和 <html>标签、 manifest属性插入。php

webpack-manifest

安装

$ npm i webpack-manifest --save-dev复制代码

开始使用

var Manifest= require('webpack-manifest');
var pkg =require('./package');

module.exports = {
  plugins:[
    // 这个要放在前面就能够自动在 `<html>`标签中插入`manifest`属性
    // This should be placed in the front can antomatically insert the `manifest` attribute in hte `<html>` tag
    new HtmlWebpackPlugin({...}),
    new Manifest({
        cache: [
          'js/[hash:8].sorting-index.js', 
          'css/[hash:8].sorting-test.css',
          'css/[hash:8].index-index.css'
        ],
        //Add time in comments.
        timestamp: true,
        // 生成的文件名字，选填
        // The generated file name, optional.
        filename:'cache.manifest', 
        // 注意*星号前面用空格隔开
        network: [
          'http://api.map.baidu.com/ *',
          'http://img.jslite.com/ *'
        ],
        // 注意中间用空格隔开
        fallback: ['/ /404.html'],
        // manifest 文件中添加注释
        // Add notes to manifest file.
        headcomment: pkg.name + " v" + pkg.version, 
        master: ['index/index.html']
    })
  ]
}复制代码

生成 cache.manifest 文件css

CACHE MANIFEST
# Time: Sat Jun 04 2016 17:11:50 GMT+0800 (CST)
# webpack-multipage v1.0.0

CACHE:
js/8d4976fb.sorting-index.js
css/667ca815.sorting-test.css
css/3eaf22d0.index-index.css

NETWORK:
http://api.map.baidu.com/ * 
http://img.jslite.com/ * 

FALLBACK:
/ /404.html复制代码

NETWORK

下面的 NETWORK 小节规定文件 "login.php" 永远不会被缓存，且离线时是不可用的，html

NETWORK:
login.php
http://img.jslite.com/ *复制代码

可使用星号来指示全部其余资源/文件都须要因特网链接，或者你须要让某个地址下的全部请求不缓存这样配置http://img.jslite.com/ *，星号前面用空格隔开。html5

NETWORK:
*复制代码

FALLBACK

下面的 FALLBACK 小节规定若是没法创建因特网链接，则用 "404.html" 替代 /html5/ 目录中的全部文件：node

FALLBACK:
/html5/ /404.html复制代码

注释：第一个 URI 是资源，第二个是替补。webpack

master

指定一个HTML页面引入cache.manifest，例如git

<html manifest="path/to/name-of.manifest">复制代码

只须要一个页面引入使用缓存配置
没引入的页面会自动读取缓存配置

更新缓存

一旦应用被缓存，它就会保持缓存直到发生下列状况：github

用户清空浏览器缓存
manifest 文件被修改
由程序来更新应用缓存

说明

如何实现离线访问特性，实现的步骤很是简单，主要3个步骤： web

在服务器上添加MIME TYPE支，让服务器可以识别manifest后缀的文件

AddType text/cache-manifest manifestchrome

建立一个后缀名为.manifest的文件，把须要缓存的文件按格式写在里面，并用注释行标注版本

CACHE MANIFEST
# Time: Sat Jun 04 2016 17:11:50 GMT+0800 (CST)
# webpack-multipage v1.0.0 

CACHE:
Path/to/cache.js复制代码

给 <html> 标签加 manifest 属性，并引用manifest文件

<html manifest="path/to/name-of.manifest">复制代码

Apache设置

manifest的mime类型，apache下能够在httpd.conf中加上

AddType text/cache-manifest manifest
AddType text/cache-manifest .appcache复制代码

自动缓存的解决方案

在每一个页面经过 iframe来引用这个静态文件，以达到咱们不缓存当面页面，只缓存咱们但愿缓存文件的目的。

缓存致使接口请求没有发送出去

在NETWORK设置白名单，可是接口请求若是是https有可能致使失败，接口报错信息Provisional headers are shown，这个缘由是你指定白名单，而且请求是https。

NETWORK:
https://api.jslite.com/ *复制代码

解决方法： NETWORK白名单设置通配符*，以下：

NETWORK:
*复制代码

Chrome相关调试测试

查看cache

能够查看和清除缓存

chrome://appcache-internals复制代码

测试

打开调试工具 option+command+i 选择 Network ，工具栏选择Offline
地址栏打开网址chrome://flags/#show-saved-copy

# 设置下面选项
# Enable: Primary复制代码