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複製代碼

參考資料

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。