当前位置:首页 > 技术教程 > 正文内容

【教程】三分钟让你的网站支持PWA

佳鑫2年前 (2022-11-19)技术教程12310


什么是PWA?

PWA是个处于app与网页之间的一种东西,有些类似微信小程序,但是它的出生时间比小程序早而且更加的开放。

这里就不再多赘述,更加详细的信息就引用一下 微软对PWA的概述>>,有兴趣的可以更深入的了解

开始

要想网站支持PWA那么必须得支持https。如果没有https的话下面就不用看了

必备文件

  • manifest.json  //配置文件 

  • sw.js  //service worker javascript

  • 两个图标 //一个192px*192px,一个512px*512px

新建 manifest.json 文件,填入内容可参考下面样式

{
    "name": "葭兴Jaxing.cc",
    "short_name": "葭兴", 
    "description": "葭兴Jaxing.cc",
    "icons": [
        {
            "src": "https://api.jaxing.cc/file/logo192.png",  // 图标资源路径
            "sizes": "any",
            "type": "image/png",
            "purpose": "any"
        },
        {
            "src": "https://api.jaxing.cc/file/logo512.png",  //图标资源路径
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "background_color": "#FFE8E7", 
    "theme_color": "#FFE8E7", 
    "display": "fullscreen", 
    "orientation": "portrait",
    "start_url": "/", 
    "scope": "/" 
}

新建 sw.js 文件,填入内容可参考下面样式

// cache名,
const cacheName = "cache";
// cache文件
const cacheFiles = ["/"];

/**
 * 安装 Service Worker
 * install事件是 Service Worker 执行的第一个事件,同一个 Service Worker 只会调用一次
 * 即使 Service Worker 脚本文件只有一个字节不同,浏览器也将视为一个新的 Service Worker
 */
self.addEventListener("install", e => {
  e.waitUntil(
    caches.open(cacheName)
    .then(cache => {
      return cache.addAll(cacheFiles);
    }),
  );
});

/**
 * 激活 Service Worker
 * Service Worker 安装成功之后,会触发activate事件
 * 在这个阶段我们一般做一些清理旧缓存相关的工作
 */
self.addEventListener("activate", (e) => {
  // e.waitUntil(caches.delete(cacheName));
  e.waitUntil(
    caches
      .keys()
      .then((keys) => {
        return Promise.all(
          keys.map((key) => {
            // 清理缓存
            if (cacheName !== key) {
              return caches.delete(key);
            }
          })
        );
      })
      .then(() => {
        console.log("cache deleted");
      })
  );
});

self.addEventListener("fetch", event => {
  event.respondWith(
    caches
      .open(cacheName)
      .then(cache => cache.match(event.request, { ignoreSearch: true }))
      .then(response => {
        return response || fetch(event.request);
      }),
  );
});

然后把这两个文件放在网站根目录下即可,然后再在<head>标签内添加下面内容以声明配置文件

<link rel="manifest" href="manifest.json" />

然后再添加以下脚本激活sw服务

<script>
    if ("serviceWorker" in navigator) {
      window.addEventListener("load", function () {
        navigator.serviceWorker
          .register("sw.js")
          .then(res => console.log("service worker registered"))
          .catch(err => console.log("service worker not registered", err));
      })
    }
  </script>

再添加下面内容提示用户启用PWA

<script>
  	var deferredPrompt = null;
  
		// 判断用户是否安装此应用:beforeinstallprompt,如果用户已经安装过了,那么该事件不会再次触发
  	// 需要卸载,然后重新打开浏览器才能再次触发
    window.addEventListener("beforeinstallprompt", e => {
      e.preventDefault();
      deferredPrompt = e;
    });
  	// 安装完成后触发,即点击安装弹窗中的“安装”后被触发
    window.addEventListener("appinstalled", () => {
      deferredPrompt = null;
    });
</script>

至此就PWA基本部署完毕,用chrome内核的浏览器即可触发PWA安装提示


ps:本站已支持PWA了哟

扫描二维码推送至手机访问。

版权声明:本文由葭兴网 JaXing.cc发布,如需转载请注明出处。

本文链接:https://www.jaxing.cc/p/7.html

标签: 教程PWA前端
分享给朋友:

“【教程】三分钟让你的网站支持PWA” 的相关文章

MT管理器的【文本加/解密,编/解码】插件使用文档

MT管理器的【文本加/解密,编/解码】插件使用文档

【文本加/解密,编/解码】插件适用于MT管理器,方便开发者对字符串的一些编/解码等调试操作该插件实现的方式均为本地离线操作,无第三方依赖库,安全小巧MT管理器的插件管理->插件中心搜索"加密"即可找到安装使用方法(推荐在文本编辑中使用):加密/编码部分使用介绍现支持md5、...

MT管理器的【Java代码快速插入】插件使用文档

MT管理器的【Java代码快速插入】插件使用文档

【Java代码快速插入】插件适用于MT管理器,方便开发者对常用的Java代码进行快速填入的操作,免去繁琐的编辑步骤该插件实现的方式均为本地离线操作,无第三方依赖库,安全小巧MT管理器的插件管理->插件中心搜索"快速插入"即可找到安装使用方法(推荐在文本编辑中使用):在MT的...

宝塔面板一键安装golang环境脚本

宝塔面板一键安装golang环境脚本

由于宝塔官方迟迟不出golang一键环境且php逐渐满足不了性能,开始尝试go的怀抱开始教程:(本文环境:宝塔面板7.9.0+,OpenCloudOS8.6,x86_64,go1.20.5.linux-amd64.tar.gz)①首先确保宝塔面板已安装完成,且能正常使用,没有宝塔面板的话不保证脚本在...

gin框架的绑定器在无参数时使用默认值

gin框架的绑定器是支持默认值的,但是中文搜索引擎上硬是没搜到……遂写下这篇内容。实现方法很简单;type User struct {     Name string `form:"name&quo...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。