js-pwa添加网页快捷方式

分类于 Javascript

js-pwa添加网页快捷方式

前篇

网站秒变 App —— PWA 即刻上手 - https://www.freecodecamp.org/chinese/news/turn-your-website-to-pwa/
前端 PWA-将网页添加到主屏幕 - https://blog.csdn.net/m0_47195133/article/details/128328289
mozilla 官方文档
- 制作可安装的 PWA - https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable
- Web App Manifest - https://developer.mozilla.org/zh-CN/docs/Web/Manifest
- 安装和卸载 Web 应用 - https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps/Guides/Installing
microsoft 官方文档
- 渐进式 Web 应用入门 - https://learn.microsoft.com/zh-cn/microsoft-edge/progressive-web-apps-chromium/how-to/
- PWA 的最佳做法 - https://learn.microsoft.com/zh-cn/microsoft-edge/progressive-web-apps-chromium/how-to/best-practices
- PWA 构建工具 - https://www.pwabuilder.com/
chrome 官方文档
- 原生应用安装提示 - https://developer.chrome.com/blog/app-install-banners-native?hl=zh-cn

使用

一个渐进式 Web 应用首先要声明一下自己的基本信息：

index.html

1
2
3

<head>
  <link rel="manifest" href="index.webmanifest" />
</head>

index.webmanifest, pwa 已用的元数据

{
    "name": "应用全名（启动页）",
    "short_name": "应用短名（桌面图标）",
    "start_url": "https://aaa.bbb.cn/web-desktop/",
    "description": "应用简介",
    "scope": "/",
    "display": "standalone",
    "orientation": "any",
    "lang": "zh-CN",
    "dir": "ltr",
    "theme_color": "rgba(0,0,0,0.5)",
    "background_color": "transparent",
    "icons": [
        {
            "src": "logo.png",
            "type": "image/png",
            "sizes": "144x144"
        }
    ]
}

start_url: 需要和站点同源

添加后台服务

一个 PWA 能真正安装到用户系统中，还需要一个 ****Service Worker****。但它的工作原理对初学者直接手写有些困难，亲爹 Google 已经做好了开发框架 Workbox，还配了 Workbox CLI，几行命令就能生成一个基本的 ServiceWorker，简直不要太贴心：

安装 workbox-cli 工具
1
$ npm install workbox-cli --global

生成 workbox-config.js 配置文件

cd 到以构建号的站点根目录执行指令 workbox wizard

$ cd you_web_app
$ workbox wizard // 一直回车即可

? Please enter the path to the root of your web app: .
? Which file types would you like to precache? html, webmanifest, png, js
? Where would you like your service worker file to be saved? sw.js
? Where would you like to save these configuration options? workbox-config.js
? Does your web app manifest include search parameter(s) in the 'start_url', other than 'utm_' or 'fbclid' (like '?source=pwa')? No
To build your service worker, run

  workbox generateSW workbox-config.js

as part of a build process. See https://goo.gl/fdTQBf for details.
You can further customize your service worker by making changes to workbox-config.js. See https://goo.gl/gVo87N for details.

根据 workbox-config.js 生成 workbox 的相关 js 文件
1
$ workbox generateSW workbox-config.js
会生成这四个文件

补全 index.html
1
html
done. 效果

如何检测 pwa 是否安装过

只有当 beforeinstallprompt 被拦截时，您才应该显示安装按钮。如果 PWA 已安装在设备上，浏览器不会触发此事件。当提示被触发并且 choiceResult.outcome === 'accepted' 你再次隐藏按钮。

所以检测逻辑应该通过这个事件是否被触发来判断

卸载

和正常卸载应用一样的操作

pc
1. 直接在 pwa 应用上卸载
2. 在 apps 中卸载, chrome 输入地址: chrome://apps/
3. 也可以在系统应用上卸载
Android

浏览器兼容

https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeinstallprompt_event#browser_compatibility

Workbox CLI 工具生成 sw.js 版本

使用 Workbox CLI 生成的 sw.js 文件, 里面记录的版本号是文件的 md5 值

e.precacheAndRoute([
     {url:"index.html",revision:"b143a258b0a0723ffd4c76068e0fa9b9"},
     {url:"index.webmanifest",revision:"294bb0f8b86b453328b0110f88375dc0"},
     {url:"logo.png",revision:"99042ec7124e63b6eb7fb1adc6b90805"},
     {url:"vconsole.min.js",revision:"a8521234f310941536700a523619b8b8"}
]

缓存机制

离线和后台操作 - https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps/Guides/Offline_and_background_operation

Android 模仿谷歌商店安装

Customizing the installation prompt - https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable#customizing_the_installation_prompt
很好的 demo: https://github.com/MicrosoftEdge/Demos/tree/main/pwamp

If you provide values for the description and screenshots manifest members, then, on Android only, these values will be shown in the install prompt, giving the user extra context and motivation to install the PWA.

效果
- pc chrome
- android chrome

Android 与 PC 不同表现的配置

如果要显示屏幕截图, 配置需要不一样

"screenshots": [
    {
        "src": "ss_01.png",
        "sizes": "1280x720",
        
        "type": "image/webp", // 需要配置这两个字段
        "form_factor": "wide",
        
        "label": "my label 01"
    },

Android

"screenshots": [
    {
        "src": "ss_01.png",
        "sizes": "1280x720",
        
        "platform": "wide", // 需要配置这一个字段
        
        "label": "my label 01"
    },

https://learn.microsoft.com/zh-cn/microsoft-edge/progressive-web-apps-chromium/how-to/share

踩坑

start_url 被忽略

错误: property 'start_url' ignored, should be same origin as document.
原因是 start_url 中配置 pwa 地址与站点不同源, 解决办法就是 pwa 已用放在同源下即可

安装速度慢

从表现上看, 开了代理安装会快很多, 猜测可能 chrome 与谷歌有交互, 需要开着代理

蝶泳奈何桥的博客

js-pwa添加网页快捷方式

前篇

使用

如何检测 pwa 是否安装过

卸载

浏览器兼容

Workbox CLI 工具生成 sw.js 版本

缓存机制

Android 模仿谷歌商店安装

Android 与 PC 不同表现的配置

分享

踩坑

start_url 被忽略

安装速度慢