• 浏览器下载快捷方式到桌面(PWA)

    在工作中遇到这样一个需求，要在web上完成将网页制作成快捷方式保存到桌面，可以通过桌面的快捷方式直接打开该网页。问题困扰了我许久(主要是不了解还有这项技术？偶然在网上看见这项技术的名称-PWA(Progressive Web App))。本文详解如何完成这个功能

    什么是PWA？

    PWA浅谈: PWA浅谈
    深入浅出PWA: 深入浅出PWA

    效果展示

    https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw#pic_center
    https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw

    如何实现这个功能？

    目录结构

    目录结构

    1. icon.png ----图标，下载时以及到桌面/chrome:apps中展示的图标
    2. index.html ----html文件
    3. mainfest.json ----json文件，通过这个json向浏览器暴露名称、icon以及URL等，供浏览器使用
    4. service-work.js ----是一个可编程的 Web Worker，它就像一个位于浏览器与网络之间的客户端代理，可以拦截、处理、响应流经的 HTTP 请求
    5. sw.js ----一个js文件，主要吧处理了下载功能，也可将其放入html中
    icon.png
    • 一个图标文件，建议大小128x128及以上
    index.html
    安卓添加桌面快捷方式
    zip 0星 超过10%的资源 1.03MB
    下载
    • 在index.html中引入了mainfest.json文件
    

    • 1
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    
    <link rel="manifest" href="mainfest.json">
head>
<body>
    <script>
        // 检测浏览器是否支持SW
    if (navigator.serviceWorker != null) {
            navigator.serviceWorker.register('sw.js')
            .then(function (registartion) {
                console.log('支持sw:', registartion.scope)
            })
        } else {
            console.log('不支持sw:')
    }

    navigator.serviceWorker.register('sw.js').then(function () {
      console.log('serviceWorker registered')
    }).catch(function (e) {
      console.log("serviceWorker Error",e);
    })
    
    let deferredPrompt;
    window.addEventListener('beforeinstallprompt', (e) => {
      // Prevent Chrome 67 and earlier from automatically showing the prompt
      e.preventDefault();
      // Stash the event so it can be triggered later.
      deferredPrompt = e;
      window.download = function (acceptedCallbackFunction) {
        // Show the prompt
        deferredPrompt.prompt();
        // Wait for the user to respond to the prompt
        deferredPrompt.userChoice.then((choiceResult) => {
          if (choiceResult.outcome === 'accepted') {
            console.log('User accepted the A2HS prompt');
            if (acceptedCallbackFunction) {
              acceptedCallbackFunction();
            }
          } else {
            console.log('User dismissed the A2HS prompt');
          }
          deferredPrompt = null;
        });
      };
    });
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    mainfest.json
    • 包含了背景、图标、描述、url等信息，
    • 各属性详解pwa-mainfest
    {
    "background_color": "purple",
    "display": "fullscreen",
    "icons": [{
        "src": "icon.png",
        "sizes": "256x256",
        "type": "image/png"
    }],
    "name": "Strange elimination: online elimination",
    "short_name": "Strange elimination",
    "start_url": "https://localhost:5555/index.html?campaignid=webapp"
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    service-work.js
    /**
 * Welcome to your Workbox-powered service worker!
 *
 * You'll need to register this file in your web app and you should
 * disable HTTP caching for this file too.
 * See https://goo.gl/nhQhGp
 *
 * The rest of the code is auto-generated. Please don't update this file
 * directly; instead, make changes to your Workbox build configuration
 * and re-run your build process.
 * See https://goo.gl/2aRDsh
 */

 importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");

 self.addEventListener('message', (event) => {
   if (event.data && event.data.type === 'SKIP_WAITING') {
     self.skipWaiting();
   }
 });
 
 workbox.core.clientsClaim();
 
 /**
  * The workboxSW.precacheAndRoute() method efficiently caches and responds to
  * requests for URLs in the manifest.
  * See https://goo.gl/S9QRab
  */
 self.__precacheManifest = [].concat(self.__precacheManifest || []);
 workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
 
 workbox.routing.registerNavigationRoute(workbox.precaching.getCacheKeyForURL("/index.html"), {
   
   blacklist: [/^\/_/,/\/[^\/]+\.[^\/]+$/],
 });
 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    sw.js
    importScripts("service-worker.js");

self.addEventListener('install', (e) => {
    console.log('sw install');
});

self.addEventListener('fetch', (e) => {});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    然后将这个目录部署到你的服务器中(需HTTPS服务)。注意json文件中的url需要和index.html文件所在url一致。打开这个url即可看见搜索框中有这个下载按钮了。成功完成后你就可以在计算机桌面看见生成了一个快捷方式。如果你是用chrome下载的，你也可以在chrome中打开chrome://apps/链接，也可以在其中找到你下载的应用

    chrome://apps

  • 相关阅读:
    Acwing双指针算法
    千访丨瓜分小红书流量池？资深操盘手来了！
    【数据结构】时间复杂度、空间复杂度
    Configmap配置与Secret加密
    HashMap在JDK1.7中多线程并发会出现死循环，超详细图解
    Java - 代码块
    自定义注解
    在云服务器上搭建个人版chatGPT及后端Spring Boot集成chat GPT
    大厂程序员爆料，现在紧缺这号人，简历准备好了么？
    python多线程系列—线程池ThreadPoolExecutor(八)
  • 原文地址：https://blog.csdn.net/qq_45310244/article/details/126068090