为 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

相关文章

Java实现优雅日期处理的方案详解

《Java实现优雅日期处理的方案详解》在我们的日常工作中,需要经常处理各种格式,各种类似的的日期或者时间,下面我们就来看看如何使用java处理这样的日期问题吧,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言一、日期的坑1.1 日期格式化陷阱1.2 时区转换二、优雅方案的进阶之路2.1 线程安全重构2

使用Python实现一个优雅的异步定时器

《使用Python实现一个优雅的异步定时器》在Python中实现定时器功能是一个常见需求,尤其是在需要周期性执行任务的场景下,本文给大家介绍了基于asyncio和threading模块,可扩展的异步定... 目录需求背景代码1. 单例事件循环的实现2. 事件循环的运行与关闭3. 定时器核心逻辑4. 启动与停

IDEA自动生成注释模板的配置教程

《IDEA自动生成注释模板的配置教程》本文介绍了如何在IntelliJIDEA中配置类和方法的注释模板,包括自动生成项目名称、包名、日期和时间等内容,以及如何定制参数和返回值的注释格式,需要的朋友可以... 目录项目场景配置方法类注释模板定义类开头的注释步骤类注释效果方法注释模板定义方法开头的注释步骤方法注

浅析Java中如何优雅地处理null值

《浅析Java中如何优雅地处理null值》这篇文章主要为大家详细介绍了如何结合Lambda表达式和Optional,让Java更优雅地处理null值,感兴趣的小伙伴可以跟随小编一起学习一下... 目录场景 1:不为 null 则执行场景 2:不为 null 则返回,为 null 则返回特定值或抛出异常场景

Python如何自动生成环境依赖包requirements

《Python如何自动生成环境依赖包requirements》:本文主要介绍Python如何自动生成环境依赖包requirements问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑... 目录生成当前 python 环境 安装的所有依赖包1、命令2、常见问题只生成当前 项目 的所有依赖包1、

MySQL中动态生成SQL语句去掉所有字段的空格的操作方法

《MySQL中动态生成SQL语句去掉所有字段的空格的操作方法》在数据库管理过程中,我们常常会遇到需要对表中字段进行清洗和整理的情况,本文将详细介绍如何在MySQL中动态生成SQL语句来去掉所有字段的空... 目录在mysql中动态生成SQL语句去掉所有字段的空格准备工作原理分析动态生成SQL语句在MySQL

SpringBoot利用@Validated注解优雅实现参数校验

《SpringBoot利用@Validated注解优雅实现参数校验》在开发Web应用时,用户输入的合法性校验是保障系统稳定性的基础,​SpringBoot的@Validated注解提供了一种更优雅的解... 目录​一、为什么需要参数校验二、Validated 的核心用法​1. 基础校验2. php分组校验3

Java利用docx4j+Freemarker生成word文档

《Java利用docx4j+Freemarker生成word文档》这篇文章主要为大家详细介绍了Java如何利用docx4j+Freemarker生成word文档,文中的示例代码讲解详细,感兴趣的小伙伴... 目录技术方案maven依赖创建模板文件实现代码技术方案Java 1.8 + docx4j + Fr

Java编译生成多个.class文件的原理和作用

《Java编译生成多个.class文件的原理和作用》作为一名经验丰富的开发者,在Java项目中执行编译后,可能会发现一个.java源文件有时会产生多个.class文件,从技术实现层面详细剖析这一现象... 目录一、内部类机制与.class文件生成成员内部类(常规内部类)局部内部类(方法内部类)匿名内部类二、

使用Jackson进行JSON生成与解析的新手指南

《使用Jackson进行JSON生成与解析的新手指南》这篇文章主要为大家详细介绍了如何使用Jackson进行JSON生成与解析处理,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. 核心依赖2. 基础用法2.1 对象转 jsON(序列化)2.2 JSON 转对象(反序列化)3.