为 Web 站点优雅的生成 Manifest 文件

2024-04-23 00:20

本文主要是介绍为 Web 站点优雅的生成 Manifest 文件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

为 Web 站点优雅的生成 Manifest 文件

mainfest.json

manifest.json 文件通常包含有关 Web 应用程序的元数据信息,这些信息会影响到浏览器如何展示和处理这个应用程序。常见的信息包括:

  • name:应用程序的名称。
  • short_name:应用程序的简短名称,通常用于手机屏幕上的应用程序图标。
  • start_url:应用程序启动时加载的 URL。
  • display:定义应用程序的显示模式,如 “fullscreen”、“standalone”、“minimal-ui” 等。
  • background_color:应用程序启动时的背景颜色。
  • theme_color:应用程序的主题颜色,影响浏览器工具栏、状态栏等。
  • icons:包含各种尺寸的图标,用于不同的设备和分辨率。
  • scope:应用程序的范围,指定了应用程序可以控制的 URL 范围。
  • description:应用程序的描述信息。
  • categories:应用程序所属的分类,用于 App Stores 等。
  • lang:应用程序使用的语言。
  • orientation:应用程序的方向,如 “landscape” 或 “portrait”。
  • prefer_related_applications:指示是否更喜欢用户使用相关的本机应用程序,而不是 Web 应用程序。
  • related_applications:如果应用程序有相关的本机应用程序,则提供相关应用程序的信息。

利用 Webpack 的特性生成文件

Webpack 编译完成阶段,生成一个 manifest.json 文件

class MakeManifestPlugin {constructor(options) {this.opts = options}apply (compiler) {const _this = this// webpack4if (compiler.plugin) {// 完成输出事件compiler.plugin('after-emit', function (compilation, done) {_this.generateVersion()done()})return}// webpack5compiler.hooks.compile.tap('MakeManifestPlugin', (compilation) => {_this.generateVersion()})}generateVersion () {fs.writeFile('public/manifest.json', JSON.stringify(this.opts), function (err) {if (err) {return err}})}
}

使用插件

{configureWebpack: (config) => {if (process.env.NODE_ENV === 'production') {config.plugins.push(new GenerateVersionPlugin({version,isOpenVersion}))}}
}

使用 manifest.json 做什么

提醒用户刷新浏览器

现在有了版本号信息,就可以主动判断是否需要最新的资源了。当版本号发生变换时,页面提醒用户有新版本发布,请刷新浏览器。

优化缓存文件

通常针对为了获取最新鲜的静态资源,会有如下写法:

const now = new Date().getTime()const url = `https://www.unpkg.com/browse/react@16.7.0/index.js?t=${now}`

不是所有的静态都需要时刻最新,合理运用缓存。当版本发生变化时,再拿最新的资源。

const url = `https://www.unpkg.com/browse/react@16.7.0/index.js?v=${version}`

这篇关于为 Web 站点优雅的生成 Manifest 文件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/927271

相关文章

JSON Web Token在登陆中的使用过程

《JSONWebToken在登陆中的使用过程》:本文主要介绍JSONWebToken在登陆中的使用过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录JWT 介绍微服务架构中的 JWT 使用结合微服务网关的 JWT 验证1. 用户登录,生成 JWT2. 自定义过滤

java中使用POI生成Excel并导出过程

《java中使用POI生成Excel并导出过程》:本文主要介绍java中使用POI生成Excel并导出过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录需求说明及实现方式需求完成通用代码版本1版本2结果展示type参数为atype参数为b总结注:本文章中代码均为

一文教你如何将maven项目转成web项目

《一文教你如何将maven项目转成web项目》在软件开发过程中,有时我们需要将一个普通的Maven项目转换为Web项目,以便能够部署到Web容器中运行,本文将详细介绍如何通过简单的步骤完成这一转换过程... 目录准备工作步骤一:修改​​pom.XML​​1.1 添加​​packaging​​标签1.2 添加

在java中如何将inputStream对象转换为File对象(不生成本地文件)

《在java中如何将inputStream对象转换为File对象(不生成本地文件)》:本文主要介绍在java中如何将inputStream对象转换为File对象(不生成本地文件),具有很好的参考价... 目录需求说明问题解决总结需求说明在后端中通过POI生成Excel文件流,将输出流(outputStre

C/C++随机数生成的五种方法

《C/C++随机数生成的五种方法》C++作为一种古老的编程语言,其随机数生成的方法已经经历了多次的变革,早期的C++版本使用的是rand()函数和RAND_MAX常量,这种方法虽然简单,但并不总是提供... 目录C/C++ 随机数生成方法1. 使用 rand() 和 srand()2. 使用 <random

Flask 验证码自动生成的实现示例

《Flask验证码自动生成的实现示例》本文主要介绍了Flask验证码自动生成的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习... 目录生成图片以及结果处理验证码蓝图html页面展示想必验证码大家都有所了解,但是可以自己定义图片验证码

Python如何在Word中生成多种不同类型的图表

《Python如何在Word中生成多种不同类型的图表》Word文档中插入图表不仅能直观呈现数据,还能提升文档的可读性和专业性,本文将介绍如何使用Python在Word文档中创建和自定义各种图表,需要的... 目录在Word中创建柱形图在Word中创建条形图在Word中创建折线图在Word中创建饼图在Word

web网络安全之跨站脚本攻击(XSS)详解

《web网络安全之跨站脚本攻击(XSS)详解》:本文主要介绍web网络安全之跨站脚本攻击(XSS)的相关资料,跨站脚本攻击XSS是一种常见的Web安全漏洞,攻击者通过注入恶意脚本诱使用户执行,可能... 目录前言XSS 的类型1. 存储型 XSS(Stored XSS)示例:危害:2. 反射型 XSS(Re

nginx生成自签名SSL证书配置HTTPS的实现

《nginx生成自签名SSL证书配置HTTPS的实现》本文主要介绍在Nginx中生成自签名SSL证书并配置HTTPS,包括安装Nginx、创建证书、配置证书以及测试访问,具有一定的参考价值,感兴趣的可... 目录一、安装nginx二、创建证书三、配置证书并验证四、测试一、安装nginxnginx必须有"-

Java实战之利用POI生成Excel图表

《Java实战之利用POI生成Excel图表》ApachePOI是Java生态中处理Office文档的核心工具,这篇文章主要为大家详细介绍了如何在Excel中创建折线图,柱状图,饼图等常见图表,需要的... 目录一、环境配置与依赖管理二、数据源准备与工作表构建三、图表生成核心步骤1. 折线图(Line Ch