vuepress-----9、PWA

2023-11-30 11:12
文章标签 vuepress pwa

本文主要是介绍vuepress-----9、PWA,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

# 9、PWA

image-20231123184339739

image-20231123185119618

使用babel 的插件形式

   ['@vuepress/pwa',{serviceWorker: true,updatePopup: {message: "New content is available.",buttonText: "Refresh"}}]

image-20231123185428090

提供 Manifest 和 icons (opens new window)

image-20231123185857343

拷贝到public目录下

image-20231123190229429

发布后出现 service workers

image-20231123191921627

[外链图片转存中…(img-AlnMx2Ly-1701237061219)]

这篇关于vuepress-----9、PWA的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

VuePress搭建文档博客 超详细教程

前言 搭建文档,个人博客用什么比较用;当然是Vue全家桶之一的vuepress啦;这可是大神尤雨溪推出的一款模板; vuepress用于迅速搭建技术文档网站与个人博客,简单快捷,下面和我一起开始学习吧! 一、成品展示 1. 技术文档网站: vue全家桶官网:vue、vuex、vue-cli、vue-router以及vuepress本身 2. 个人博客: 组件zhb-ui 使用文档

将自己的网站改造成可安装的PWA

概述 本文是一篇水文,感兴趣的读者可以看看。分享一下怎么讲自己的网站改造成可安装的PWA。 PWA简介 渐进式 Web 应用(Progressive Web App,PWA)是一个使用 web 平台技术构建的应用程序,但它提供的用户体验就像一个特定平台的应用程序。它像网站一样,PWA可以通过一个代码库在多个平台和设备上运行。它也像一个特定平台的应用程序一样,可以安装在设备上,可以离线和在后台

Vuepress 2从0-1保姆级进阶教程——标准化流程

Vuepress 2 专栏目录 1. 入门阶段 Vuepress 2从0-1保姆级入门教程——环境配置篇Vuepress 2从0-1保姆级入门教程——安装流程篇Vuepress 2从0-1保姆级入门教程——文档配置篇Vuepress 2从0-1保姆级入门教程——范例与部署 2.进阶阶段 Vuepress 2从0-1保姆级进阶教程——全文搜索篇Vuepress 2从0-1保姆级进阶教程——

PWA缓存策略区别NetworkOnly/CacheFirst/CacheOnly/NetworkFirst/StaleWhileRevalidate

现在来看看 Workbox 提供的缓存策略,主要有这几种: cache-first, cache-only, network-first, network-only, stale-while-revalidate 在前面看到,实例化的时候会给 workbox 挂载一个 Strategies 的实例。提供上面一系列的缓存策略,但在实际调用中,使用的是 _getCachingMecha

vuepress打包项目如何在express框架渲染

如果要在 express 项目上加一个 vuepress 写的文档应如何渲染? Vuepress 是 Vue 驱动的静态网站生成器 1、.vuepress/config.js 修改 base 配置指定静态资源目录,如:test目录 base: "/test/", 2、打包去缓存配置 package.json "scripts": {"build": "vuepress buil

PWA集成和离线使用

最近项目需要,需要将h5代码集成到PWA,以此记录下。 mdn上早已有了介绍,用的时候才发现这门技术 这是google介绍的详细地址传送门 引言 我们知道,在chrome(等一些现代浏览器)中,你可以将访问的网站添加到桌面,这样就会在桌面生成一个类似“快捷方式”的图标,当你点击该图标时,便可以快速访问该网站(Web App)。 对于PWA来说,有一些重要的特性: Web App可

使用vuepress搭建个人的博客(一):基础构建

前言 vuepress是一个构建静态资源网站的库 地址:VuePress 一般来说,这个框架非常适合构建个人技术博客,你只需要把自己写好的markdown文档准备好,完成对应的配置就可以了 搭建 初始化和引入 创建文件夹press-blog npm初始化 npm init 引入包 npm install -D vuepress 目录结构 |-- assets    *静

vuepress-theme-hope 添加谷歌统计代码

最近做了个网站,从 cloudflare 来看访问量,过去 30 天访问量竟然有 1.32k 给我整懵逼了,我寻思不应该呀,毕竟这个网站内容还在慢慢补充中,也没告诉别人,怎么就这么多访问?搜索了下, cloudflare 还会把爬虫的请求也就算进来,所以数据相对来说就不是很准确 想到了把 Google Analysis 统计代码放到上来 官网给出的解决方案在这里: 社区插件 看起来很简单

实战 | 如何使用云开发 Webify 部署 vuepress

webify Web 应用托管:Web 应用托管(CloudBase Webify)为您的 Web 应用提供一站式托管服务,支持包括静态网站、动态 Web 服务各种类型的 Web 应用,提供默认域名、自定义域名、HTTPS 和 CDN 加速等功能,提升 Web 应用的性能和安全性,此外还提供基于 Git 的工作流、DevOps 流程和加速开发部署流程,为您提供极佳的服务体验。 VuePress

vuepress 侧边栏(sidebar) 动态展示配置

vuepress的侧边栏动态配置,研究了好几天终于弄懂了,它使用JSON的数组和对象两种方式配置侧边栏标题,对象针对每个导航变化时,侧边栏随着变动;数组则是针对每个页面内容变化,侧边栏跳转。vuepress官网地址上使用就是。如下图所示: 点击介绍>它是如何工作的 、快速上手等可以看到侧边栏不动,右侧内容页面在变化。参考这种方式,我的vuepress的config.js中侧边栏配置如下: