乘风破浪，遇见最美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所需图标和清单文件
- Favicon Generator. For real
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的方式直接引入它。
或者
注册PWA的ServiceWorker
那么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
填写应用商店资料
按
参考
- Introducing the brand new PWA builder
- 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
- Web App Manifest
- Best apps and games of 2021
- Finding your Windows Publisher info