文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

hexo静态网站的PWA支持

因此，如果我们把 PWA 的关键技术之一 Service Worker 的出现作为 PWA 的诞生时间，那就应该是 2015 年。...因此PWA的特性包括其渐进式、可离线，可以作为提高网站体验和提高网站家在速度的一个方法。因此下面将从其主要内容和hexo如何安装两个方面以“吃白饭的休伯利安号”为例来简单演示一遍安装过程。...: maximumFileSizeToCacheInBytes: 5242880 staticFileGlobs: - public/index.html - public/img/favcion.png...stripPrefix 网站文件的根路径绝对位置 runtimeCaching 缓存选项 urlPattern 文件的正则匹配 handler 缓存模式 origin 网站访问域名(代理域名) 如此支持离线的...使用新版的chrome访问网站，打开控制台的Audits点击生成报告，就能看到网站是否支持PWA啦，如下图所示： 发布之后可以先访问一下网站的一些页面，然后就可以拿把大剪子网线访问你的网站啦~ 关于消息推送

1.8K00

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

概述 本文是一篇水文，感兴趣的读者可以看看。分享一下怎么讲自己的网站改造成可安装的PWA。...它像网站一样，PWA可以通过一个代码库在多个平台和设备上运行。它也像一个特定平台的应用程序一样，可以安装在设备上，可以离线和在后台运行，并且可以与设备和其他已安装的应用程序集成。...支持的浏览器会提示用户将 PWA 安装到设备上。 PWA 可以像特定平台的应用一样安装，并可以自定义安装过程。 一旦安装，PWA 就会在设备上获得一个应用图标，与特定平台的应用程序一起。...一旦安装，PWA 可以作为一个独立的应用程序启动，而不是在浏览器中的一个网站。 实现 在浏览器主页面中添加如下代码： html> manifest.json的内容可如下： { "name": "我的加油站", "short_name": "我的加油站

34610
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    html的base标签为什么不起作用

    我今天尝试编译一个Angular4的应用，并部署到服务器的一个路径上去，由于不是根路径因此我使用了下面的语句： ng build -prod -bh /rel 自然的Angular应用index.html...里的语句就变成了： 但，当我用http://localhost:8080/rel打开网页时却提示Loading......上网自学一番收获如下： https://stackoverflow.com/questions/11521011/why-base-tag-does-not-work-for-relative-paths 总结得票最高的：...base配合相对路径使用，不要在路径前使用/，这不是相对路径，这是相对于Root的绝对路径； href后面跟反斜杠/，表明这是一个目录 我上面的问题即在/rel后面加反斜杠完成。...原文地址：http://blog.techcave.cn/2017/08/30/html%E7%9A%84base%E6%A0%87%E7%AD%BE%E4%B8%BA%E4%BB%80%E4%B9%88%

    2.9K20

    pwa+webpack，初探与踩坑0.前言1.webpack2.pwa3.基于webpack的pwa

    0.前言 我们都知道pwa是一个新技术.，依靠缓存，离线了还能正常跑，而且秒开。我把以前原生写的小游戏迁移到react，再迁移到webpack+react，最后再升级到pwa。...+webpack的效果，那我们eslint、test就不写了 2.pwa 我们就拿百度到的那些例子说吧，一个正常的pwa，由index.html、一个css、一个manifest.json、一个sw.js...我们要启动一个pwa，这是必备的。 其实，是不是看起来有点像谷歌浏览器的扩展？有没有试过自己写谷歌浏览器插件，比如屏蔽广告的、个人工具的、某些网站收藏夹等等插件。毕竟一家人，所以看起来也有点像。...html: PWA 基于webpack的pwa 文档见官网 我们不用配置就可以跑起来，但是配置里面有些地方需要注意的而且不能乱改，自行看文档。

    86420

    基于html、css的个人网站（网页制作期末作业）

    一、‍网站题目 个人网页设计、‍♂️个人简历制作、‍简单静态HTML个人网页作品、‍个人介绍网站模板 、等网站的设计与制作。... 三、网站介绍 网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。...网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。...网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。...--- 四、网站演示 图片 图片 图片 图片 图片 图片 图片 五、 网站代码 HTML结构代码 <!

    2.8K40

    基于HTML的环境网站设计 HTML+CSS环保网站项目实现 带设计说明psd

    然而，对于技术的探索和追求从未停歇。 坚持原创，热衷分享，初心未改，继往开来！ 一、‍网站题目 环境保护、 保护地球、 校园环保、垃圾分类、绿色家园、等网站的设计与制作。... 三、网站介绍 网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。...网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。...网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件； 网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver...--- 四、网站效果 图片 图片 图片 图片 五、 网站代码 HTML结构代码 <!

    1.8K20

    基于html的美食网站 奶茶网页设计与实现(HTML+CSS+JavaScript)

    然而，对于技术的探索和追求从未停歇。 坚持原创，热衷分享，初心未改，继往开来！ 一、‍网站题目 美食网页介绍、甜品蛋糕、地方美食小吃文化、餐饮文化、等网站的设计与制作。...静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计‍,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate... 三、网站介绍 网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。...网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。...网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件； 网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver

    2.4K30

    PWA 入门: 写个非常简单的 PWA 页面

    这篇文章里我们来完成一个非常简单的 PWA 页面。 一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用....随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能。...下面的教程基于 Migrate your site to a Progressive Web App 和 Google 给出的 sample 示例。...准备一个 HTML 文件, 以及相应的 CSS 等: 添加 manifest.json 文件 为了让 PWA 应用被添加到主屏幕, 使用 manifest.json 定义应用的名称, 图标等等信息。...比如在 HTML 当中更新版本到 2: 同时 sw.js 文件当中也要进行一次修改, 保证文件发生改变, 同时缓存的名称也变改变了: 然后重新打开一次页面, 这个时候渲染的页面依然是旧的, 不过可以从

    3.1K50

    《PWA实战：如何为你的网站增加离线功能和推送通知》

    摘要 猫头虎博主 为您解读：PWA（Progressive Web Apps）的强大功能如何为您的网站带来革命性的用户体验。我们将探讨离线功能和推送通知的实现，以及如何利用这些特性提高用户留存。...PWA入门、离线功能实现、推送通知技巧、提高用户留存。 引言 随着web技术的发展，PWA为网站提供了近乎原生应用的体验。...推送通知：让用户时刻保持互动 推送通知可以在用户未打开网站时发送通知，提高用户的参与度和留存率。...PWA的优点和局限性 PWA为网站提供了强大的功能，但同时也有其局限性，例如不支持所有的浏览器和平台。...优点： 增加用户的互动性和留存率 减少应用的安装和更新成本 局限性： 浏览器和平台的支持性问题 功能上与原生应用仍有差距 总结 PWA为网站带来了革命性的变革，通过离线功能和推送通知为用户提供了近乎原生的体验

    1.1K10

    Butterfly主题的PWA实现方案

    装配了PWA以后，用户可以将网站作为WEB APP安装到自己的设备上，以原生应用般的方式浏览博客，同时借助PWA的缓存机制，能够更快速的浏览。本文讨论的是使用两种方案实现PWA。...图标设计 在使用PWA之前，我们最好先行设计一个符合网站主题的图标。 本站使用的是brandmark图标设计网站，访问 brandmark进行图标设计。下载需要收费，不过可以截图。...获取图标文件和 manifest 配置PWA 实现PWA的方式有许多种，本帖基于Butterfly主题文档进行详细拓展，所以只讨论两种方案。...使用hexo-offline-popup以后，如果还开启了pjax，可能遇到页面URL带着长长的后缀。形似index.html?...这会导致PWA无法加载索引文件，也就是说无法从PWA加载index.html，最终影响离线观看博客的体验。 安装必要插件 既然要使用gulp配合workbox实现PWA，自然少不了安装这两个插件。

    1.9K20

    基于HTML旅游网站项目的设计与实现——联途旅游网服务平台网站HTML模板HTML+CSS+JavaScript

    使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计...最重要的是做出旅游网站独特的风格，更能吸引浏览者的眼球。 三、网站介绍 网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。...网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。...网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件； 网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver...--- 四、网站效果 网站设计制作的重点是对网页整体设计的布局和对网页整体内容的选题。 网站设计方面：计划实现简洁大气的网页设计效果。

    3.7K30

    【网页设计】基于HTML+CSS+JavaScript制作美食网站舌尖上的美食

    二、✍️网站描述 美食主题网站 主要对各种美食进行展示，让浏览者清晰地了解到各种美食的详细信息，便于浏览者进行选择。...静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计‍,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate...三、网站介绍 网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。 网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。...并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。 网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。...网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件； 网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver

    1.9K11

    基于HTML环境保护网站项目的设计与实现【 html+css+javascript+jquery+bootstarp响应式的绿化种植类公司网站模板】企业网站制作

    然而，对于技术的探索和追求从未停歇。 坚持原创，热衷分享，初心未改，继往开来！ 一、‍网站题目 环境保护、 保护地球、 校园环保、垃圾分类、绿色家园、等网站的设计与制作。... 三、网站介绍 网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。...网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。...网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。...--- 四、网站效果 图片 图片 图片 图片 图片 图片 图片 五、 网站代码 HTML结构代码 <!

    2.9K30

    基于 Django 的个人网站（1）

    考虑到本人前段时间主要是因为毕业论文（设计）的答辩等各种各样的事情忙的没有时间写原创，所以前段时间我一直转载别人的文章，我没有想到公众号居然改版的这么快，居然都有专栏了~！...因为我之前注册过一个域名，也已经备案了，准备搭建个人网站；但是因为没什么时间，一直没有搭建，今天我就教大家使用 Django 搭建一个个人网站。 ?...创建项目 通过看图，应该可以看出我安装的是 Django3.0.6 的版本，接下来就是新建一个 Django 项目，我直接使用 PyCharm 专业版的可视化操作而不是命令来创建项目，打开 PyCharm...设计与实现 接下来我们就需要考虑网站搭建所需要的功能，我在这里尽可能弄的简单一点，这里的参与者只有两个：作者和读者，其中作者具有对文章的类别和文章本身进行增删改查的操作，读者具有阅读文章和搜索文章两个操作...因为这个网站比较简单，我们只要创建一个 app 就够了，打开 PyCharm，点击 Terminal，如图所示。 ?

    1.8K20
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券