乘风破浪,遇见最美Windows 11之新微软商店(Microsoft Store)生态 - 通过渐进式Web应用(PWA)技术上架商店应用锦囊
什么是渐进式Web应用
渐进式Web应用(Progressive Web Apps
, PWA
)是指运用现代的Web API以及传统的渐进式增强策略来创建跨平台Web应用程序。这些应用无处不在、功能丰富,使其具有与原生应用相同的用户体验优势。
https://docs.microsoft.com/zh-cn/windows/uwp/publish/pwa/turn-your-website-pwa
基于现有Web网站对PWA特性支持的成果,可实现快速打包并完成Microsoft Store商店上架,这成为由Web驱动的应用上架商店的首选方式。
给现有Web网站添加PWA支持
给现有Web网站添加PWA支持主要是完成四大技术改造:
- 添加PWA图标。
- 准备并引入PWA清单文件。
- 注册并激活ServiceWorkerJs。
- 提供HTTPS安全环境。
生成PWA所需图标和清单文件
最佳途径:https://www.pwabuilder.com/imageGenerator
备用途径:
Web App清单文件示例
{
"description": "someting description",
"display": "standalone",
"name": "product name",
"short_name": "product name",
"start_url": "/",
"theme_color": "#ffffff",
"icons": [
{
"src": "/images/logo-512.png",
"type": "image/png",
"sizes": "512x512",
"purpose": "any"
}
]
}
其中较为关键的几个元素包括:
- 应用名称(name),这个用于确定应用的名称。
- 应用短名称(short_name),这个用于当没有足够空间展示应用名称时备用。
- 启动入口(start_url),这个用于用户启动应用的第一个页面位置。
- 显示模式(display),这个用于定制应用的窗口显示模式,比如standalone就是独立窗口模式。
- 主题颜色(theme_color),这个用于定制应用的在系统运行的主题色,比如Windows中窗体标题栏的颜色。
- 图标素材组(icons),这个用于描述应用的素材,这个决定了应用安装和运行的图标,其中512x512是必须的。
更多细节定制可以参考文档:https://developer.mozilla.org/zh-CN/docs/Web/Manifest
更多图标素材组定制可以参考文档:https://github.com/pwa-builder/pwabuilder-windows-chromium-docs/blob/master/image-recommendations.md
引入PWA清单文件
在Web网站的Header中,可以以Link的方式直接引入它。
<!DOCTYPE html>
<html>
<head>
<link rel="manifest" href="./manifest.webmanifest" />
</head>
</html>
或者
<!DOCTYPE html>
<html>
<head>
<link rel="manifest" href="./manifest.json" />
</head>
</html>
注册PWA的ServiceWorker
<script type="text/javascript" async>
if ("serviceWorker" in navigator) {
window.addEventListener("load", function () {
navigator.serviceWorker
.register("/serviceWorker.js")
.then(res => console.log("service worker registered"))
.catch(err => console.log("service worker not registered", err));
})
}
</script>
那么serviceWorker.js
内容是什么呢?
/* eslint-disable consistent-return */
// cache名, 在控制台Application的CaChe下可以看到
const cacheName = 'xxxxxxxxxxxxx';
// cache文件
const cacheFiles = ["/", "/index.html"];
/**
* 安装 Service Worker
* install事件是 Service Worker 执行的第一个事件,同一个 Service Worker 只会调用一次,
* 即使 Service Worker 脚本文件只有一个字节不同,浏览器也将视为一个新的 Service Worker。
*/
// eslint-disable-next-line no-restricted-globals
self.addEventListener('install', (e) => {
console.log('install');
// eslint-disable-next-line no-restricted-globals
self.skipWaiting();
e.waitUntil(
caches.open(cacheName).then((cache) => cache.addAll(cacheFiles)),
);
});
/**
* 激活 Service Worker
* Service Worker 安装成功之后,会触发activate事件
* 在这个阶段我们一般做一些清理旧缓存相关的工作
*/
// eslint-disable-next-line no-restricted-globals
self.addEventListener('activate', (e) => {
console.log('activate');
// e.waitUntil(caches.delete(cacheName));
e.waitUntil(
caches
.keys()
.then((keys) => Promise.all(
// eslint-disable-next-line array-callback-return
keys.map((key) => {
// 清理缓存
if (cacheName !== key) {
return caches.delete(key);
}
}),
))
.then(() => {
console.log('cache deleted');
}),
);
});
// service worker发生更新后,刷新页面
// eslint-disable-next-line no-restricted-globals
self.addEventListener('controllerchange', () => {
console.log('controllerchange');
window.location.reload();
});
// eslint-disable-next-line no-restricted-globals
self.addEventListener('fetch', (e) => {
});
生成并测试商店包
生成本地测试包
打开微软官方的制作网站PWABuilder,把确定好并支持PWA的网站入口填写到输入框中,点击Start开始按钮。
等待分析结果。
这里每一项的检查结果都是以10分满分制,如果拿到10分说明没有问题,如果丢分了,就是可以优化的选项。
点击Next下一步按钮,就会进入最终的发布选择界面,排在前面的就是Microsoft Store的选项,这里我们可以点击Test Package
按钮就可以获取到本地测试的商店包
点击Store Package
按钮,它会要求我们填写我们在商店的一些应用信息,我们根据已知信息完成填写即可,填写完成后点击Generate
按钮即可生成最终上架的商店包。
本地测试商店包
解压从PWABuilder获取的商店测试包,发现里面包含了几个文件,默认情况下,其中install.ps1
是安装脚本,其中xxxxx.classic.appxbundle
是Win10版本的传统商店包,其中xxxxxx.msixbundle
是新式打包格式MSIX的商店包,其中xxxxx.sideload.msix
是用于旁加载的安装包。
在install.ps1
安装脚本文件上右键,选择"使用PowerShell运行"
但是,这时候会遇到权限错误,这是因为根据系统本地的Powershell默认安全策略,是不允许直接运行这种不安全的脚本的。
这时候我们需要修改下Powershell默认安全策略,在开始菜单上右键,找到并进入"Windows终端(管理员)"选项,执行如下命令以便解除安全限制:
Set-ExecutionPolicy bypass -Scope CurrentUser
即可,可以通过如下命令确认权限是否完成修改:
Get-ExecutionPolicy -List
完成之后,我们再次重复在install.ps1
安装脚本文件上右键,选择"使用PowerShell运行"
会看到,它正在使用xxxxx.sideload.msix
包完成安装,完成成功之后,在开始菜单就可以看到应用图标了。
上架到Microsoft Store
创建MSIX or PWA类型应用
进入应用概况页面,前往左侧的产品管理-产品标识页面,这个页面里面包标识名称对应的就是Package Id,包标识发行商对应的是Publish ID,包发布者显示名称对应的是Publisher Display Name
填写应用商店资料
受限功能
在完成提交之前,您必须执行的一个重要步骤是解释Windows应用程序所需的本机功能,称为"runFullTrust"。它由转换器工具自动添加并标记为"受限功能"。要通过审核,您必须导航到您的提交,然后打开"提交选项"并向审核团队提供注释。只需评论一下,此功能是由该工具自动添加的,一切都应该没问题 - 不再需要额外的工作。
runFullTrust权限要求是由PWABuilder转换工具自动添加的。
识别来自Microsoft Store的流量
https://stackify.dev/485391-detect-if-web-app-is-running-as-pwa-through-the-microsoft-store
方案1
正确的官方方法是检查.NET应用程序。当作为一个商店应用程序运行时,整个WinRT API表面被注入。因此,你可以(而且应该)做以下事情,而不是嗅探用户代理:window.Windows
if (window.Windows) {
// running as a Windows app
}
else {
// running in browser
}
方案2
我意识到,用户代理毕竟不是那么含糊的。
Microsoft Edge确实通过在其用户代理中添加MSAppHost/<WebView Rev>
来表明它何时作为应用程序主机运行。
例如
在我的机器上,我托管的PWA的用户代理列出了 "MSAppHost/3.0"。
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; MSAppHost/3.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36 Edge/15.15063
方案
对字符串MSAppHost/
的测试揭示了网络应用程序是否以托管应用.navigator.userAgent
的方式运行。
我现在在我的服务器端和客户端渲染中使用这个检查,以剥离任何链接到外部商店的内容。
方案3
你可以检查. 如果它等于app-info://platform/microsoft-store
,你的网络应用就是从微软商店安装的。这个功能在Edge 91 document.referrer
版本中首次引入。
<script>
if(document.referrer === 'app-info://platform/microsoft-store')
{
// 代表当前运行来自微软商店,仅在Edge v91及其以上版本生效
}
</script>
上面的实现会存在刷新后丢失判断的情况,因为页面刷新之后,document.referrer
会发生变化,建议采用下面的实现方式:
<script>
// Compatible with ms store
const fromMsStore = document.referrer === 'app-info://platform/microsoft-store' || localStorage.getItem('referrer-ms-store')
localStorage.setItem('referrer-ms-store', fromMsStore)
if (fromMsStore)
{
// 代表当前运行来自微软商店,仅在Edge v91及其以上版本生效
}
</script>
参考
- Introducing the brand new PWA builder
- 试着给VuePress添加渐进式Web应用(PWA)支持,基于vuepress/plugin-pwa,点亮离线访问
- pwa开发_在Windows中开发PWA变得容易一些
- ManUp.js
- Web Application Manifest
- 渐进式Web应用(PWA)概述
- 渐进式Web应用介绍
- 渐进式Web应用(PWA)
- PWABuilder-CLI
- Next steps for getting your PWA into the Microsoft Store
- Powershell ExecutionPolicy 执行策略
- Web App Manifest
- Best apps and games of 2021
- Finding your Windows Publisher info
- PWA in Microsoft App Store
- 应用功能声明-runFullTrust-完全信任权限级别
- Detect if web app is running as PWA through the Microsoft Store
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了