webpack--PWA(网站离线访问技术)

2023-05-16


webpack.config.js

const WorkboxWebpackPlugin=require('workbox-webpack-plugin');
//终端下载npm i workbox-webpack-plugin -D

plugins:[
new WorkboxWebpackPlugin.GenerateSW({
//1.帮助serviceworker快速启动
//2.删除旧的serviceworker
clientsClaim:true,
skipWaiting:true
})
]
index.js

注册serviceWorker
 处理兼容性问题
 //serviceWorker  注意首字母大写
 if('serviceWorker' in navigator){
 window.addEventListener('load',()=>{
   navigator.serviceWorker
   .register('/service-worker.js')
   .then(()=>{
    console.log('sw注册成功了‘)
    })
    .catch(()=>{
     console.log('sw注册失败了’)
     });
  });
 }
1.eslit不认识window,navigator全局变量
2.serviceworker代码必须运行在服务器上
--->nodejs 
    npm i serve -g //serve可以帮我们快速创建一个静态资源服务器
    serve -s build 启动服务器,将build目录下所有资源作为静态资源暴露出去

package.json

"eslintConfig":{
"extends":"airbnb-base",
"env":{
 "broser":true
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

webpack--PWA(网站离线访问技术) 的相关文章

  • 字符串子序列匹配问题

    题目给你长度为n的字符串L xff0c 给你q个长度为0 m的字符串b xff0c 让你判断每一个b是否是字符串L的子序列 L和b长度小于1e5 xff09 例题 xff1a Long Long Ago 有三种做法 最后一种能过 一 最长公
  • 字符串最小字典序子序列

    给出一个长度为n 1 lt n lt 10000 的只有小写字母的字符串 xff0c 然后找出一个长度为m的最小字典子序列 做一个预处理 xff0c 首先26个vector存储每个字母出现位置的下标 xff0c O n 遍历字符串 xff0
  • 关于vscode中使用c语言链接mysql的问题

    关于vscode中使用c语言链接mysql的问题 最近想着写一个图书管理系统 用来当C语言的期末设计作业 xff0c 想着反正都要写了 就写 大 一点就想着连一下数据库吧 xff01 xff01 就碰到了N多的问题 首先我使用的是vscod
  • debain 、pve虚拟化平台修改国内源并修改dns

    pve 是基于debain的一个linux 虚拟化平台 xff0c 可以实现创建虚拟机 问题 xff1a Failed to fetch xxxxxxx E Failed to fetch http ftp debian org debia
  • 虚拟化平台PVE(ProxmoxVirtual Environment)安装部署

    1 iso下载 官方ISO下载地址 2 ventoyu盘制作工具 ventoy官方下载 使用上边制作好u盘 xff0c 将下载好的PVE镜像文件拖入u盘中 3 进入主板bios xff0c 设置u盘为第一启动项 4 进入pe系统选择镜像 5
  • ubuntu22.04安装教程

    1 选择语言 默认 2 取消安装更新 默认 3 选择键盘语言 默认 4 配置ip xff0c 可以直接选择dhcp xff0c 也可选择配置静态ip 默认 5 配置代理 跳过不填写 6 设置镜像源 默认 https mirrors aliy
  • Ubuntu 16.04源码编译安装MySQL5.7

    CentOS源码编译安装 xff0c 可以参考 CentOS 6源码编译安装MySQL5 6 这篇文章 1 软件环境 Ubuntu 16 04mysql 5 7 24 2 安装前的准备 Ubuntu 16 04 sudo apt get i
  • 解决Ubuntu 16.04软件中心闪退的问题

    依次执行以下命令 xff1a sudo apt get update sudo apt get dist upgrade sudo apt get install reinstall software center 引用链接 xff1a h
  • 【Zookeeper+Hadoop+HBase】WMware上搭建基于Ubuntu18.04的Zookeeper+Hadoop+HBase集群

    WMware上搭建基于Ubuntu18 04的Zookeeper 43 Hadoop 43 HBase集群 前言一 环境准备1 创建虚拟机2 网络配置3 克隆2个虚拟机4 更改主机名hostname以及修改hosts文件4 配置各节点之间的
  • 【SpringBoot+阿里云ssl】完成 http转https以及ws转wss

    SpringBoot 43 阿里云ssl完成 http转https以及ws转wss 前言一 HTTP转HTTPS二 ws转wss 前言 本文工作是建立在已经有一个SSL证书的基础之上 阿里云证书如何申请可以参考以下链接 xff1a 阿里云免
  • 【python】pyplot绘制横轴为时间的图

    1 导入环境 span class token keyword import span numpy span class token keyword as span np span class token keyword import sp
  • 【Python】numpy二维数组删除指定行和列

    Python numpy二维数组删除指定行和列 1 原始数据2 删除指定行3 删除指定列4 删除指定多行和多列 1 原始数据 span class token keyword print span span class token punc
  • 【Pytorch】深度学习快速上手心得

    Pytorch 深度学习快速上手心得 前言一 环境安装1 1 安装Anaconda1 2 Anaconda 常见指令1 4 Pytorch环境安装1 3 Jupyter安装 二 一个简单的demo快速入门深度学习2 1 环境依赖2 2 数据
  • 【nginx】快速入门——SpringBoot项目代理及图片代理

    nginx快速入门 1 简介2 Ngnix下载2 Nginx启动与停止2 1 启动2 2 关闭2 3 重新启动 3 Ngnix配置文件4 SpringBoot项目代理5 图片代理6 代理html页面 1 简介 nginx engine x
  • 【Nginx+SSL】在华为云和腾讯云上配置Nginx+SSL,实现Http转Https

    Nginx 43 SSL 在华为云和腾讯云上配置Nginx 43 SSL xff0c 实现Http转Https 0 前言0 1 腾讯云证书下载0 2 华为云证书下载 1 Nginx的SSL模块安装2 SSL证书上传3 Nginx的配置3 1
  • 【大论文中注意事项】2022年11月3日记录

    大论文中注意事项 1 时间安排2 论文标题3 摘要4 自己的内容 重要 5 第一章的全文研究内容6 关于正文中的序号7 第一章的课题来源8 文章9 文献10 第一章的本文主要研究内容11 实验的对比12 每一章的小节13 章节正文开始14
  • 【文件上传】前端html上传 + 后端SpringBoot接收并保存

    1 前端页面 lt form gt 记得设置一下enctype 61 34 multipart form data 34 span class token doctype span class token punctuation lt sp
  • linux系统下,11款常见远程桌面控制软件

    远程控制能够给人们带来很多便利 xff0c 本文介绍了11款常见的Linux系统下的远程桌面控制工具 xff0c 总有一款能适合您 一 Grdc 它是一个用GTK 43 编写的 xff0c 适用于gnome桌面环境的远程桌面访问软件 看图
  • ubuntu远程桌面到Windows

    我知道的有两种方法 xff1a 1 xff09 使用Terminal Server Client 打开Applications gt Internet gt Terminal Server Client xff0c 在 General 选项
  • 交叉编译 WPA_Supplicant

    本文记录这个wifi配置工具的编译过程 xff0c 步骤不少 xff0c 涉及的开源代码包也比较多 xff0c 以后很容易忘 WPA Supplicant简介 首先 xff0c 稍稍介绍下wpa supplicant xff0c 这是一个控

随机推荐

  • UltraEdit 最新安装教程

    1 下载完成UltraEdit 之后 xff0c 双击应用程序 xff0c 选择安装位置 xff0c 点击安装 2 点击下一步 3 安装完成 4 首次登录 xff0c 提示输入许可证秘钥 5 输入激活码页面 xff0c 输入后点击激活
  • Pyside2 学习系列二:PyInstaller打包项目exe (超详细的Pyside2 攻略)

    继上一篇文章创建了项目后 xff0c 本章我们进行项目的打包工作 本项目的所有演示代码 xff1a github可在这里下载 打包只用的工具为PyInstaller 打包步骤 1 准备环境1 1 安装 96 PyInstaller 96 2
  • JSP中的四种范围属性

    JSP中的对象 xff0c 包括用户创建的对象 如JavaBean对象 和JSP的隐含对象 xff0c 都有一个范围属性 范围属性规定了这些对象的作用域 xff0c 定义了在什么时间内 xff0c 在哪一个JSP页面中可以被访问 在JSP中
  • 【xml】[Qt] 生成xml格式对象或xml字符串(速成 QT处理xml)

    本文为什么称为速成呢 xff0c 因为本人就是速成的 xff0c 接手的项目里有个关于xml的bug xff0c 对xml一无所知到解决bug xff0c 自己硬着头皮上 xff0c 速成成功了 xff0c 也就觉得有写点什么东西的必要了
  • Mysql8.0如何重置密码

    环境 xff1a mysql8 0以上版本 无密码登录 修改配置文件 xff1a etc my cnf xff0c 在 mysqld 后面任意一行添加 skip grant tables xff0c 这样登录时就可以跳过密码验证的过程 重启
  • 华为交换机配置SNMP

    SNMP参数详情 Quidway snmp agent community 为SNMPv1 amp SNMPv2c访问设置团体名group 设置基于用户安全模型的组local engineid 设置本地SNMP实体的引擎IDmib view
  • VMware设置虚拟机的网络为桥接模式,虚拟机使用主机的网段,虚拟机设置和主机一样的网关(网段)

    VMware设置虚拟机的网络为桥接模式 KeyValue电脑版本win 10 1909虚拟机版本 VMware 17 点击编辑虚拟机设置 这样虚拟机即可在和主机在同一个网段 验证 虚拟机的地址 xff1a 192 168 2 144 ip
  • Rust权威指南 读书笔记

    Rust权威指南 本书由 Rust 核心开发团队编写而成 xff0c 由浅入深地探讨了 Rust 语言的方方面面 从学习函数 选择数据结构及绑定变量入手 xff0c 逐步介绍所有权 trait 生命周期 安全保证等高级概念 xff0c 模式
  • Rust:使用libloader调用动态链接库 (DLL)

    掘金为同人创作 xff1a 掘金 最近需要使用Rust动态调用动态链接库 xff0c 本来打算是使用libloading的 xff0c 但是libloading在调用dll中的函数的时 xff0c 是必须要在编译时确定参数和return的类
  • 用flatpak安装程序(比如GIMP)的方法

    linux世界真的是无奇不有 xff0c 什么安装程序的方法都有 比如gimp xff0c 如果必要安装官网的最新版安装包 xff0c 你会发现他是flatpakref后缀的 xff0c 我刚开始懵了 xff0c 这是什么安装包 xff0c
  • 怎样查看本机打开的端口?

    怎样查看本机打开的端口 xff1f https zhidao baidu com question 203087246 html Netstat xff0c 显示协议统计和当前的 TCP IP 网络连接 a xff0c 显示所有连接和侦听端
  • webpack4基本使用

    基本使用 初始化一个package json文件 npm init yes 安装webpack以及webpack cli cnpm i webpack webpack cli save dev package json 34 scripts
  • C++中enum与字符串或CString互相转换的方法

    C 43 43 中没有专门为enum与字符串或CString互相转换的直接方法 xff0c 但是工作中会常遇到相互转换的场景 下面介绍一种自己实现的方法 xff0c 首先得定义一个enum类型 xff0c 同时 xff0c 定义一个与之对应
  • VC++标准化路径PathCanonicalize

    外部输入的参数不能直接作为文件路径 xff0c 防止被恶意攻击 xff0c 比如构造一个跨目录限制的文件路径 etc passwd或 boot ini xff0c 或构造一个指向系统关键文件的链接文件symlink 34 etc shado
  • 解决时间机器无法识别硬盘问题

    T7 SSD分区后做时光机器 xff0c 但无法识别 xff08 如图 xff09 xff0c 问题解决 一 问题描述 xff1a 当时没保存照片 xff0c 图片来自网络 问题详情 xff1a 硬盘没分区且是苹果可识别的格式 xff08
  • vscode stm32cubemx 优雅开发stm32,最简单步骤教程

    配置安装环境 下载STM32cubeMX xff0c 这个大家可以自己在stm的官网下载到下载VSCode下载arm none eabi gcc下载MinGW w64 xff0c 为了实现里面的makefile 等功能下载OpenOCD这里
  • Epoll两种模式浅析(ET or LT)

    linux异步IO浅析 http hi baidu com kouu blog item e225f67b337841f42f73b341 html epoll有两种模式 Edge Triggered 简称ET 和 Level Trigge
  • 5GC自学-5G接入网组成

    5GC接入网 如图所示 xff1a EPC xff08 就是4G核心网 xff09 被分为New Core xff08 5GC xff0c 5G核心网 xff09 和MEC xff08 移动网络边界计算平台 xff09 两部分 MEC移动到
  • 《C++程序设计实验3》

    描述 晶晶的朋友贝贝约晶晶下周一起去看展览 xff0c 但晶晶每周的1 3 5必须上课 xff0c 请帮晶晶判断她能否接受贝贝的邀请 xff0c 如果能输出YES xff1b 如果不能则输出NO 输入 输入贝贝邀请晶晶去看展览的日期 xff
  • webpack--PWA(网站离线访问技术)

    webpack config js const WorkboxWebpackPlugin 61 require 39 workbox webpack plugin 39 终端下载npm i workbox webpack plugin D