当前位置：首页 > news >正文

pwa应用进阶2-动态加载manifest.json文件

news 来源：原创 2025/5/10 23:52:24

接pwa应用进阶-区分AB面-添加安装按钮而且区分不同的系统和浏览器的各种情况继续优化，主要是让manifest.json文件动态加载。
pwa应用进阶2-动态加载manifest.json文件
主要用途如下：

动态切换PWA的清单文件，例如根据不同的语言或者主题加载不同的manifest。
更新资源路径，例如在不同环境下切换不同的manifest文件。

步骤及说明

修改index.html中manifest的引用
将之前的

<link rel="manifest" href="/manifest.json">

改为

<link rel="manifest" id="my-manifest">

向服务器动态的请求manifest.json文件，代码如下:

    let manifestURL = 'https://www.lengmo714/manifest?p='+p;

其中，这里的链接为你自己服务器的链接，p为参数，可以自己设定。

修改index.html中<ilnk>标签的href属性，代码如下:

document.querySelector('#my-manifest').setAttribute('href', manifestURL);

示例代码：
我这里是想要将url地址中动态生成的参数带入我的应用中

    let url = "https://lengmo714.top"+window.location.search;let p = {start_url:url,'i1':'/icon-192x192.png','i2':'/icon-512x512.png'};p = JSON.stringify(p);p = encodeURIComponent(p);let manifestURL = 'https://www.lengmo714/manifest?p='+p;document.querySelector('#my-manifest').setAttribute('href', manifestURL);

这里我将manifest.json中的start_url和两个icon传给服务器，服务器返回给我一个manifest.json文件，然后我再动态的加载这个文件。

服务器代码

我这里是使用的go语言，具体代码如下:

package mainimport ("encoding/json""fmt""net/http""net/url"
)// Manifest 结构体
type Manifest struct {Name            string `json:"name"`ShortName       string `json:"short_name"`StartURL        string `json:"start_url"`Display         string `json:"display"`ThemeColor      string `json:"theme_color"`BackgroundColor string `json:"background_color"`Icons          []Icon `json:"icons"`
}// Icon 结构体
type Icon struct {Src   string `json:"src"`Sizes string `json:"sizes"`Type  string `json:"type"`
}func manifestHandler(w http.ResponseWriter, r *http.Request) {// 获取 URL 参数 pp := r.URL.Query().Get("p")if p == "" {http.Error(w, `{"error": "Missing parameter 'p'"}`, http.StatusBadRequest)return}// 解析 URL 编码的 JSON 字符串decodedP, err := url.QueryUnescape(p)if err != nil {http.Error(w, `{"error": "Failed to decode parameter 'p'"}`, http.StatusBadRequest)return}// 解析 JSON 数据var data map[string]stringerr = json.Unmarshal([]byte(decodedP), &data)if err != nil {http.Error(w, `{"error": "Invalid JSON format"}`, http.StatusInternalServerError)return}// 生成 manifest.jsonmanifest := Manifest{Name:            data["name"],ShortName:       data["name"],StartURL:        data["start_url"],Display:         "standalone",ThemeColor:      "#ffffff",BackgroundColor: "#000000",Icons: []Icon{{Src: data["i1"], Sizes: "192x192", Type: "image/png"},{Src: data["i2"], Sizes: "512x512", Type: "image/png"},},}// 设置 HTTP 头w.Header().Set("Content-Type", "application/json")w.WriteHeader(http.StatusOK)// 返回 JSON 响应json.NewEncoder(w).Encode(manifest)
}func main() {http.HandleFunc("/manifest", manifestHandler)port := 8080fmt.Printf("Server running at http://localhost:%d\n", port)http.ListenAndServe(fmt.Sprintf(":%d", port), nil)
}

自己在服务器另起一个go的服务器即可。

pwa应用进阶2-动态加载manifest.json文件

接pwa应用进阶-区分AB面-添加安装按钮而且区分不同的系统和浏览器的各种情况继续优化，主要是让manifest.json文件动态加载。 pwa应用进阶2-动态加载manifest.json文件主要用途如下： 动态切换PWA的清单文件，例如根据不同的语言或者主题加载不…...

编程日记 2025/5/10 23:52:24

UI用例调试_元素能定位到且不在frame内_无法点击/录入文本

关于单据新增，编辑子集信息遇到的2个阻塞点，做记录已供后续参考 1、新增按钮元素能定位，就是无法点击实现效果： 单据新增时，前面单据数据编辑完之后，开始新增证件信息，需要先点击新增按钮。…...

编程日记 2025/5/10 23:39:49

Python的web框架Flask适合哪些具体的应用开发？

Flask 适用的具体应用及实现案例代码 Flask 是一个轻量级的 Web 应用框架，以其简洁性和灵活性而广受欢迎。以下是 Flask 适合的具体应用场景及相关的实现案例代码： 1. 小型网站或博客由于 Flask 的简洁性和易于使用的特性，它非常适合用来搭建个人博客或者小型的企业网站…...

编程日记 2025/5/10 22:43:07

oracle使用动态sql将多层级组织展平

ERP或者其他企业管理软件中都会有一张组织机构表，可以写固定sql的方式将其展平获取组织表中的字段信息，如负责人、上级组织负责人、分管领导、成立时间等。但是这种方式有个缺陷，就是如果只写到处理4个层级，那么后期层级增多就无法…...

编程日记 2025/5/10 4:57:50

vue学习笔记10

ChatGPT & Copilot AI 的认知两个工具 1、ChatGPT 3.5 2、Github Copilot ChatGPT 的基本使用 - Prompt 优化 AI 互动的过程中，容易出现的问题： 1、 AI未能理解问题的核心要点 2、 AI的回答过于宽泛或过于具体 3、 AI提供了错误的信息或…...

编程日记 2025/5/10 23:48:40

网络安全常识

随着互联网和移动互联网的持续火热，人们的生活也越来越离不开网络，网络安全，在这个信息化时代显得尤为重要，那么网络攻击和安全，这一攻守之间，主要涵盖哪些要点呢，下面我们就来对此进行抽丝剥茧…...

编程日记 2025/5/10 23:02:44

如何在 Visual Studio Code 中使用 DeepSeek R1 和 Cline？

让我们面对现实吧：像 GitHub Copilot 这样的 AI 编码助手非常棒，但它们的订阅费用可能会在你的钱包里烧一个洞。进入 DeepSeek R1 — 一个免费的开源语言模型，在推理和编码任务方面可与 GPT-4 和 Claude 3.5 相媲美。将它与 Cline 配对&#…...

编程日记 2025/5/10 2:03:45

从Sora到有言：3D视频生成技术的突破与应用

近年来，AIGC领域飞速发展，这个词也越来越高频地出现在了大家的生活中。AIGC 能完成的任务也越来越多，大模型的能力飞速增长 —— 从Deepseek生成文字，到StableDiffusion生成图像，再到Sora可以生成视频。而现在&#x…...

编程日记 2025/5/10 12:26:47

算法18（力扣136）只出现一次的数字

1、问题给你一个非空整数数组 nums，除了某个元素只出现一次以外，其余每个元素均出现两次。找出那个只出现了一次的元素。你必须设计并实现线性时间复杂度的算法来解决此问题，且该算法只使用常量额外空间。 2、示例 （1&…...

编程日记 2025/5/10 23:28:06

基于HTML5 Canvas 和 JavaScript 实现的烟花动画效果

以下是一个使用 HTML5 Canvas 和 JavaScript 实现的烟花动画效果代码盒子： <!DOCTYPE html> <html> <head><title>烟花效果...

编程日记 2025/5/4 19:37:33

网络变压器的主要电性参数与测试方法（1）

Hqst盈盛（华强盛）电子导读：网络变压器的主要电性参数与测试方法（1）.. 今天我们就一起先来看看网络变压器的2个主要电性参数与它的测试方法： 1. 开路电感（OCL or Lx----Open Circuit Ind…...

编程日记 2025/5/10 22:49:54

Python + WhisperX：解锁语音识别的高效新姿势

大家好，我是烤鸭： 最近在尝试做视频的质量分析，打算利用asr针对声音判断是否有人声，以及识别出来的文本进行进一步操作。asr看了几个开源的，最终选择了openai的whisper，后来发现性能不行，又换了…...

编程日记 2025/5/10 23:19:19

Qt的isVisible ()函数介绍和判断窗口是否在当前界面显示

1、现象：当Qt的窗口最小化时，isVisible值一定是true，这是正常的。解释：在Qt中，当你点击窗口的最小化按钮时，Qt内部不会自动调用 hide() 方或 setVisible(false) 来隐藏窗口。相反，它会改变窗口…...

编程日记 2025/5/10 22:52:07

Github 2025-02-12 C开源项目日报 Top7

根据Github Trendings的统计，今日(2025-02-12统计)共有7个项目上榜。根据开发语言中项目的数量，汇总情况如下：开发语言项目数量C项目7Python项目2OpenSSL - 强大的开源加密工具包创建周期：4012 天开发语言：C协议类型：Apache License 2.0Star数量：23449 个Fork数量：10…...

编程日记 2025/5/10 23:33:49

PostgreSQL 数据类型

PostgreSQL 数据类型 PostgreSQL 是一款功能强大的开源关系型数据库管理系统，它以其出色的性能、灵活的数据类型和强大的扩展性而闻名。在 PostgreSQL 中，数据类型是构建数据库表和执行各种操作的基础。本文将详细介绍 PostgreSQL 中常用的数据类型，并探讨它们的使用场景。…...

编程日记 2025/5/6 21:55:05

synchronized关键字

文章目录 synchronized 关键字介绍synchronized 的内存语义 synchronized 关键字介绍 synchronized 块是 Java 提供的一种原子性内置锁， Java 中的每个对象都可以把它当作一个同步锁来使用 ， 这些 Java 内置的使用者看不到的锁被称为内部锁 &#xf…...

编程日记 2025/5/6 14:12:24

MATLAB计算反映热需求和能源消耗的度数日指标（HDD+CDD）（全代码）

目录度数日（Degree Days, DD）概述计算公式MATLAB计算代码调用函数1：计算单站点的 CDD参考度数日（Degree Days, DD）概述度数日（Degree Days, DD）是用于衡量建筑、城市和地区的热需求和能源消耗模式的指标。它分为两部分：加热度日（Heating Degree Days, HDD）：当室…...

编程日记 2025/5/10 23:35:57

在Linux中Redis不支持lua脚本的处理方法

redis安装在IP为x.x.x.x的服务器上 redis安装第一步，安装前，检测系统是否安装了redis。若安装了redis，则需要删除redis；若没有安装redis，则需要安装2.6版本以上的redis。 # 确保Redis版本支持Lua脚本。从Redis 2.6…...

编程日记 2025/5/10 23:08:02

第39周：猫狗识别 2(Tensorflow实战第九周)

目录前言一、前期工作 1.1 设置GPU 1.2 导入数据输出二、数据预处理 2.1 加载数据 2.2 再次检查数据 2.3 配置数据集 2.4 可视化数据三、构建VGG-16网络 3.1 VGG-16网络介绍 3.2 搭建VGG-16模型四、编译五、训练模型 5.1 上次程序的主要Bug 5.2 修改版…...

编程日记 2025/5/10 23:44:17

SpringBoot自定义starter

首先创建Maven项目引入依赖 <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-autoconfigure</artifactId><version>3.4.2</version></dependency> </dependencies…...

编程日记 2025/5/10 22:50:44

JVM学习

JVM 1、JVM是一个跨语言的平台，与语言无关 2、java虚拟机规范：一流企业做标准，二流企业做品牌，三流企业做产品 JVM种类 Hotspot：Oracle 公司，有商业版和免费版 open jdk 内部包含免费版本hotspot虚拟机 Jr…...

编程日记 2025/5/3 18:13:42

RAG入门： RetroMAE、BGE、M3、MemoRAG

RAG实际上第一步都是先做Retrieval，关于Retrieval的思路有很多，持续更新： RetroMAE （论文RetroMAE: Pre-Training Retrieval-oriented Language Models Via Masked Auto-Encoder） RetraoMAE包括两个模块，…...

编程日记 2025/5/9 17:51:23

在51cto搜索的资料 ruby on rails的安装 http://developer.51cto.com/art/200906/129669.htm http://developer.51cto.com/art/200912/169391.htm http://developer.51cto.com/art/200908/147276.htm 史上最完整的ruby，rails环境架设配置（Apachefast…...

编程日记 2025/5/10 23:14:54

MySQL的备份与还原

备份数据库使用mysqldump工具是备份MySQL数据库的一种常用方法。mysqldump可以导出数据库的结构和数据到一个SQL文件中，这个文件稍后可以被用来重新创建数据库或恢复数据。以下是mysqldump命令的详细扩写： mysqldump -u <username> -p<passw…...

编程日记 2025/5/10 23:23:29

文心快码｜AI重构开发新范式，从工具到人机协同

本系列视频来自百度前端架构师张立理，他在以“应用来了”为主题的2024百度世界大会上，进行了文心快码3.0能力演示，端到端能力展示。以下视频是关于文心快码全栈编程智能体-AI重构开发新范式文心快码AI重构开发新范式百度前端架构师张立理认…...

编程日记 2025/5/10 23:02:45

Windows11+PyCharm利用MMSegmentation训练自己的数据集保姆级教程

系统版本：Windows 11 依赖环境：Anaconda3 运行软件：PyCharm 一.环境配置通过Anaconda Prompt(anaconda)打开终端创建一个虚拟环境 conda create --name mmseg python3.93.激活虚拟环境 conda activate mmseg 4.安装pytorch和cuda tor…...

编程日记 2025/5/10 23:07:00

方法（构造方法、方法重载、可变参数）

方法（Method） 方法是组织好的、可以重复使用的代码块，用于实现单一或相关联的功能。方法有助于提高代码的模块化和可读性，并且通过减少代码冗余来促进代码的重用。一个方法通常包含5中部分组成： 访问修饰符&#xf…...

编程日记 2025/5/10 23:30:10

ES节点配置的最佳实践

一个 Elasticsearch（ES）节点可以同时包含数据节点和主节点的角色。这种配置在某些场景下是可行的，尤其是在小型集群中。然而，在生产环境中，通常建议将主节点和数据节点的角色分离，以提高集群的稳定性和性能…...

编程日记 2025/5/10 22:53:09

langchain学习笔记之langserve服务部署

langchain学习笔记之langserve服务部署引言 LangServe \text{LangServe} LangServe简单介绍安装过程示例应用调用模型接口实现交互使用 Requests \text{Requests} Requests方式进行交互附： server.py \text{server.py} server.py完整代码引言本节将介绍 LangSe…...

编程日记 2025/5/10 5:55:26

Docker安装分布式vLLM

Docker安装分布式vLLM 1 介绍 vLLM是一个快速且易于使用的LLM推理和服务库，适合用于生产环境。单主机部署会遇到显存不足的问题，因此需要分布式部署。分布式安装方法 https://docs.vllm.ai/en/latest/serving/distributed_serving.html2 安装方法 …...

编程日记 2025/5/6 3:13:55

Java SpringBoot的ProblemDetail实现全局异常统一处理让接口不在需要catch/ProblemDetail实现错误处理的标准化

在开发 Web 应用时，有效的错误处理和响应是提升用户体验和系统健壮性的关键。Spring Boot 3.2 引入了对 ProblemDetail 的更好支持，使得错误处理更加标准化和便捷。本文将通过实战演示，带你深入了解如何在 Spring Boot 3.2 中使用 ProblemDet…...

编程日记 2025/5/10 10:53:35

PHP 基础介绍

PHP 学习资料 PHP 学习资料 PHP 学习资料 PHP 是一种广泛使用的开源服务器端脚本语言，尤其适合 Web 开发，能轻松嵌入 HTML 中，生成动态网页内容。接下来，让我们一起了解 PHP 的基础内容。一、PHP 的安装与配置在开始编写 PH…...

编程日记 2025/5/10 22:45:23

CI/CD部署打包方法

项目目前部署方式： 各地区服务器打包同一个runner（需要互相排队，不并发）各地区客户端可以并发打包，同个地区客户端打多个包需要排队部署方法下载gitlab-runner： https://docs.gitlab.com/runner/insta…...

编程日记 2025/5/10 22:56:53

Unity-Mirror网络框架-从入门到精通之PlayerTest示例

文章目录前言示例介绍PlayerReliable，PlayerUnreliable，PlayerHybrid区别PlayerControllerRB和PlayerController区别最后前言在现代游戏开发中，网络功能日益成为提升游戏体验的关键组成部分。本系列文章将为读者提供对Mirror网络框架的深入了解，涵盖从基础到高级的多个主…...

编程日记 2025/5/7 13:04:35

C++ 设计模式-抽象工厂

C中的抽象工厂模式（Abstract Factory Pattern）是一种创建型设计模式，它提供了一个接口，用来创建一系列相关或相互依赖的对象，而无需指定它们具体的类。通过抽象工厂模式，客户端可以通过工厂接口获取一系列产…...

编程日记 2025/5/7 6:27:00

ONES 功能上新｜ONES Copilot、ONES TestCase、ONES Wiki 新功能一览

ONES Copilot 支持基于当前查看的工作项相关信息，利用 AI 模型，在系统中进行相似工作项的查找，包括基于已关联工作项的相似数据查找。应用场景： 在查看工作项时，可利用 AI 模型，基于语义相似度&#xff0c…...

编程日记 2025/5/8 13:21:59

Jenkins | Jenkins安装

Jenkins安装一、前置准备二、启动三、登录一、前置准备下载安装包 war包下载地址: https://www.jenkins.io/ 安装jdk 要求jdk11版本以上集成maven项目的话需要有maven 与 git 二、启动启动命令需要注意使用jdk11以上的版本 /usr/java/jdk17/bin/java -Xms2048m -X…...

编程日记 2025/5/10 17:17:17

JavaScript设计模式 -- 观察者模式

在实际开发中，经常会遇到这样一种需求：当某个对象状态发生改变时，需要自动通知并更新其他相关对象。观察者模式（Observer Pattern）正是为了解决这一问题而设计的，它定义了一种一对多的依赖关系，…...

编程日记 2025/5/6 10:03:22

DeepSeek AI 满血版功能集成到WPS或Microsoft Office中

DeepSeek AI集成到 WPS或Microsoft Office中, 由于deepseek被攻击或者非常繁忙导致超时的服务器，所以可以用硅基流动部署的DeepSeek 。当然用官网的也可以。使用 OfficeAI 插件集成(wps为例)： 下载并安装 OfficeAI 插件：从可靠的软件下载平台…...

编程日记 2025/5/4 11:21:47

单调队列与栈

一.题 1. 思路： 构建小压大的单调递减栈，对于每个栈的元素都进行处理并加到结果上 class Solution { public:int sumSubarrayMins(vector<int>& arr) {int stk[10000000],top 0;long long ans 0;for(int i 0;i<arr.size();i){while(top…...

编程日记 2025/5/6 0:25:05

阿里云sls查询两种查询方式学习：SQL查询和SPL 查询

一、阿里云日志服务 SPL 语法归纳 1. SPL 简介 SPL（Search Processing Language）用于查询和处理日志数据，支持检索、过滤、分析日志。 2. 基本查询语法查询所有日志：* 条件过滤：response_status: error 多条件查…...

编程日记 2025/5/8 11:15:24

【ISO 14229-1:2023 UDS诊断（会话控制0x10服务）测试用例CAPL代码全解析①】

ISO 14229-1:2023 UDS诊断【会话控制0x10服务】_TestCase01 作者：车端域控测试工程师更新日期：2025年02月14日关键词：UDS诊断、0x10服务、诊断会话控制、ECU测试、ISO 14229-1:2023 TC10-001测试用例用例ID测试场景验证要点参考条款预期…...

编程日记 2025/5/5 22:36:11

从技术债务到架构升级，滴滴国际化外卖的变革

背景商家营销简述在外卖平台的运营中，我们致力于通过灵活的补贴策略激励商家，与商家共同打造良好的合作关系，也会提供多样化的营销活动，帮助商家吸引更多用户下单。通过这些活动，不仅能够提高商家的销量&#xff0c…...

编程日记 2025/5/10 5:54:38

第J2周：ResNet50V2算法实战与解析

文章目录一、准备工作1.设置GPU2.导入数据3.查看数据二、数据预处理1.加载数据2.可视化数据总结 🍨 本文为🔗365天深度学习训练营中的学习记录博客🍖 原作者：K同学啊一、准备工作 1.设置GPU import tensorflow as tf gpus …...

编程日记 2025/5/9 22:59:32

如何使用 HPjtune 分析 Java GC 日志并优化 JVM 性能

HPjtune 是一款用于分析 Java 应用程序垃圾回收（GC）日志的工具，主要用于优化 JVM 性能。虽然 HPjtune 本身并不直接生成 HTML 格式的报告，但可以通过结合其他工具或方法将分析结果导出为 HTML 格式。以下是实现这一目标的步骤和方…...

编程日记 2025/5/3 20:45:05

【MySQL在Centos 7环境安装】

文章目录一. 卸载不必要的环境二. 检查系统安装包三. 卸载这些默认安装包四. 获取mysql官⽅yum源五. 安装mysql yum 源，对⽐前后yum源六. 看看能不能正常⼯作七. 安装mysql服务八. .查看配置⽂件和数据存储位置九. 启动服务并查看服务是否存在十. 登陆⽅法十一. 设…...

编程日记 2025/5/7 17:22:56

PostgreSQL技术内幕25：时序数据库插件TimescaleDB

文章目录 0.简介1.基础知识1.1 背景1.2 概念1.3 特点 2.TimescaleDB2.1 安装使用2.1 文件结构2.2 原理2.2.1 整体结构2.2.2 超表2.2.3 自动分区2.2.4 数据写入与查询优化2.2.5 数据保留策略2.2.6 更多特性 0.简介现今时序数据库的应用场景十分广泛，其通过保留时间…...

编程日记 2025/5/9 17:30:22

Flask Web开发的重要概念和示例

一口气列举Flask Web应用的所有概念和示例 Flask Web 应用基本框架路由（Routing）模版（Template） request 对象 JSON 数据处理 redirect 示例文件上传示例文件下载示例 Session 示例 Cookie操作 Flask Web 应用基本框架这是一个最基础的 Flask Web 应用，…...

编程日记 2025/5/6 14:10:57

使用pocketpal-ai在手机上搭建本地AI聊天环境

1、下载安装pocketpal-ai 安装github的release APK 2、安装大模型搜索并下载模型，没找到deepseek官方的，因为海外的开发者上传了一堆乱七八糟的deepseek qwen模型，导致根本找不到官方上传的……deepseek一开源他们觉得自己又行了。点击之…...

编程日记 2025/5/10 4:01:04

后台终端方法

使用tmux实现终端后台运行首先，在Linux系统上安装tmux sudo apt install tmux使用方法： 创建终端 #直接创建 tmux #自定义名称 tmux new -s {name}退出tmux终端：Ctrlb 之后 d 退出后查看后台终端： tmux ls abc: 1 windows (cr…...

编程日记 2025/5/10 9:06:49

步骤及说明

服务器代码

相关文章：