vps交流

(教程)给你的网站添加渐进式网络应用,让用户可以直...


本帖最后由 樱花云主机 于 2024-10-4 19:14 编辑

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

1.效果演示
移动端
<p>(部分国产浏览器可能不支持)edge,chrome 均支持</p>
(教程)给你的网站添加渐进式网络应用,让用户可以直...
(教程)给你的网站添加渐进式网络应用,让用户可以直...

PC端
<p>(部分国产浏览器可能不支持)edge,chrome 均支持</p>
(教程)给你的网站添加渐进式网络应用,让用户可以直...
(教程)给你的网站添加渐进式网络应用,让用户可以直...

2.开始添加
所需要的文件

  1. https://www.123684.com/s/E4XTjv-8ywZ3

复制代码

<p>下载到网站根目录然后解压,有的程序可能要放在主题文件的根目录。</p>
<p>开始之前你是按照你的需求进行修改manifest.json</p>
(教程)给你的网站添加渐进式网络应用,让用户可以直...
<p>修改之后需要删除注释</p>
(教程)给你的网站添加渐进式网络应用,让用户可以直...
<p>保存</p>

3.解压完成之后编辑首页文件[/h2]
<p>在head标签中添加(文件路径需要替换为你实际的文件路径):</p>

  1. <link rel="manifest" href="文件路径/manifest.json">

复制代码

(教程)给你的网站添加渐进式网络应用,让用户可以直...

<p>滑到文件末尾添加以下代码(你的文件路径需要替换为你实际的文件路径):</p>

  1. <删script删>
  2.   if (‘serviceWorker’ in navigator) {
  3.     window.addEventListener(‘load’, function() {
  4.       navigator.serviceWorker.register(‘你的文件路径/service-worker.js’).then(function(registration) {
  5.         console.log(‘ServiceWorker registration successful with scope: ‘, registration.scope);
  6.       }, function(error) {
  7.         console.log(‘ServiceWorker registration failed: ‘, error);
  8.       });
  9.     });
  10.   }
  11. <删/script删>

复制代码

(教程)给你的网站添加渐进式网络应用,让用户可以直...

<h2>最后</h2>
<p>我们刷新一下页面,就可以看到浏览器旁边多了一个按钮</p>
(教程)给你的网站添加渐进式网络应用,让用户可以直...
原文地址 https://www.sakuraidc.cc/forum-post/1396.html

谢谢,涨知识了,后面玩玩看