(教程)给你的网站添加渐进式网络应用,让用户可以直接安装网站到桌面

查看 3|回复 0
作者:sakuraidc   
(教程)给你的网站添加渐进式网络应用,以便于用户直接将网站安装到桌面1.效果演示移动端(部分国产浏览器可能不支持)edge,chrome 均支持


20241002151212583-IMG_20241002_151115-483x1024.png (244.62 KB, 下载次数: 0)
下载附件
保存到相册
3分钟前 上传



20241002151223483-IMG_20241002_151135.jpg (36.48 KB, 下载次数: 0)
下载附件
保存到相册
3分钟前 上传

PC端(部分国产浏览器可能不支持)edge,chrome 均支持


20241002152025247-IMG_20241002_151736-1024x550.jpg (42.29 KB, 下载次数: 0)
下载附件
保存到相册
3分钟前 上传



20241002152035554-IMG_20241002_151958.jpg (2.09 KB, 下载次数: 0)
下载附件
保存到相册
3分钟前 上传

2.开始添加所需要的文件
https://www.123684.com/s/E4XTjv-8ywZ3
下载到网站根目录然后解压,有的程序可能要放在主题文件的根目录。开始之前你是按照你的需求进行修改manifest.json


20241002153929628-IMG_20241002_153858-1024x856.jpg (80.44 KB, 下载次数: 0)
下载附件
保存到相册
3分钟前 上传

修改之后需要删除注释


20241002154122472-IMG_20241002_154105-1024x939.jpg (86.62 KB, 下载次数: 0)
下载附件
保存到相册
3分钟前 上传

保存3.解压完成之后编辑首页文件在head标签添加(文件路径需要替换为你实际的文件路径)
link rel="manifest" href="文件路径/manifest.json">


20241002152750232-IMG_20241002_152705.jpg (49.48 KB, 下载次数: 0)
下载附件
保存到相册
3分钟前 上传

添加完之后滑到文件末尾添加(你的文件路径需要替换为你实际的文件路径)
script>
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
      navigator.serviceWorker.register('你的文件路径/service-worker.js').then(function(registration) {
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
      }, function(error) {
        console.log('ServiceWorker registration failed: ', error);
      });
    });
  }
/script>


20241002153259243-IMG_20241002_153244-1024x485.jpg (97.93 KB, 下载次数: 0)
下载附件
保存到相册
3分钟前 上传

好,现在添加完之后我们保存最后我们刷新一下页面,就可以看到浏览器旁边多了一个按钮


20241002154409430-IMG_20241002_154333-483x1024.png (234.35 KB, 下载次数: 0)
下载附件
保存到相册
3分钟前 上传

原文地址https://www.sakuraidc.cc/forum-post/1396.html

下载次数, 下载附件

您需要登录后才可以回帖 登录 | 立即注册

返回顶部