基于pwa应用实现更加友好的放到桌面功能

2024-2-27 08:43:43

#前端 #pwa

前言

有客户反馈，目前系统中的放到桌面功能是点击后下载一个url文件到下载目录里去的，这对于一些电脑小白客户来讲比较麻烦
那么有什么办法优化一下这个放到桌面功能呢？使其成为一个真正的放到桌面功能
答案是有的，那就是pwa应用

什么是pwa应用

PWA（Progressive Web App）即渐进式 Web 应用，是一个使用 web 平台技术构建的应用程序，但它提供的用户体验就像一个特定平台的应用程序。
详情见MDN
当然我们只是为了实现一个放到桌面的功能，所以并不需要那么复杂，我们只需要关注Web app manifests, Add to Home Screen , Service Worker这几个技术栈即可

集成pwa应用

编写mainfest文件

如果是普通的html文件，我们只需要在head标签里添加一个link标签即可
<link rel="manifest" href="/manifest.json" />
manifest.json如下定义

{
  "background_color": "blue",
  "display": "fullscreen",
  "icons": [
    {
      "src": "icon/favicon.png",
      "sizes": "64x64",
      "type": "image/png"
    },
    {
      "src": "icon/favicon192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon/favicon512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "name": "name",
  "short_name": "short_name",
  "start_url": "/"
}

对于nextjs来说，它暴露了一个文件用来定义相关的mainfest，详情见官方文档
需要注意的是，pwa应用需要我们提供icons，我们只需准备几个不同大小的icon图片即可，然后根据mainfest.json文件中配置的路径放置即可

编写sw.js文件

self.addEventListener('install', function(e) {
  // console.log('install success')
});

self.addEventListener('fetch', function(e) {
  // console.log(e.request.url);
});

这个文件没有实际的作用，只是为了被浏览器承认为pwa应用
接着我们在页面中加入如下代码，注册sw.js文件

  window.installPromptEvent = null
  window.addEventListener('beforeinstallprompt', (event) => {
   event.preventDefault();  // Chrome <= 67 可以阻止显示
   window.installPromptEvent = event; // 拿到事件的引用
  });
  // 规定必须注册 serviceWorker 才能使用 Add to Home Screen，
  // 且需要监听 install 和 fetch 事件，可以不处理
  if ('serviceWorker' in navigator) {
   navigator.serviceWorker
   .register('/sw.js')
   .then(function () { console.log('Service Worker Registered'); });
  }

如上，我们也通过了window.addEventListener('beforeinstallprompt')来监听浏览器是否显示安装提示，如果显示，则将事件存储在window.installPromptEvent中，以供我们后续调用相关的安装事件
后续我们在想要触发调用的地方调用window.installPromptEvent即可

参考文章

Github登录