Web Share Target API允许安装的PWA出现在操作系统的分享菜单中，用户从其他应用分享文本、链接或文件时，系统会启动PWA并携带相应数据。要在项目中用jQuery封装这套能力，需要从清单配置、Service Worker拦截、页面参数解析三个层面配合。jQuery在这里主要承担DOM操作和请求封装，让接收逻辑更简洁。
配置manifest与share_target字段
要让PWA成为分享目标，第一步是在Web App Manifest中声明share_target字段。这个字段告诉浏览器该应用能接收哪些类型的分享数据，以及分享动作触发时应该打开哪个页面、使用什么HTTP方法提交。如果没有正确填写，系统在分享面板中根本不会显示你的应用。
在share_target中，action一般指向一个独立页面如/share.html，method常用GET或POST。使用GET时，分享参数会以查询字符串形式附加到action URL后；使用POST且enctype为multipart/form-data时，可以接收文件。下面是一段典型的manifest配置，注意params中的title、text、url分别对应分享的标题、文本和链接。
{
"name": "My Share PWA",
"short_name": "SharePWA",
"start_url": "/index.html",
"display": "standalone",
"share_target": {
"action": "/share.html",
"method": "GET",
"params": {
"title": "title",
"text": "text",
"url": "url"
}
}
}
当系统发起分享时，若用户选择了你的PWA，浏览器会打开/share.html?title=xxx&text=yyy&url=zzz。这一步不需要写任何JavaScript，完全由浏览器和manifest驱动。但要注意，manifest文件必须被正确链接到HTML中，且PWA已通过Service Worker注册并满足可安装条件。
用Service Worker拦截分享请求
虽然GET方式下分享数据直接出现在URL里，但使用POST或需要离线接收时，必须在Service Worker中监听fetch事件并特殊处理share_target的action路径。Service Worker相当于PWA的代理层，能在无网络时也能将分享引导到正确页面。
在Service Worker的install阶段应缓存/share.html及其依赖资源。在fetch事件中，判断请求URL是否匹配action路径，若是则直接返回缓存的页面，保证分享启动飞快。下面代码展示了基础拦截逻辑，其中event.request.url包含分享参数，我们将其原样转发给缓存页面。
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open('pwa-share-v1').then(function(cache) {
return cache.addAll(['/share.html', '/jquery.min.js', '/app.js']);
})
);
});
self.addEventListener('fetch', function(event) {
var url = new URL(event.request.url);
if (url.pathname === '/share.html') {
event.respondWith(
caches.match('/share.html').then(function(resp) {
return resp || fetch(event.request);
})
);
}
});
如果采用POST方式接收文件，Service Worker还需要解析FormData并把文件暂存到Cache或IndexedDB，待页面激活后再由jQuery读取。这种方案复杂度更高，但能支持图片等多媒体分享。对于绝大多数文字链接分享场景，GET加重定向已足够稳定。
jQuery封装接收与界面回填
在/share.html页面中，我们用jQuery统一解析URL参数并填充表单，同时给出用户提示。原生JS获取参数需写循环遍历URLSearchParams，而jQuery虽不直接提供参数解析，但可配合$.param反操作或简单正则封装一个工具函数，使旧项目也能低改造成本接入。
下面代码定义了一个$.receiveShare方法，挂载到jQuery命名空间下。它读取当前location.search，将title、text、url映射到页面输入框，并触发一个自定义事件方便业务层监听。这种封装让多个页面复用分享逻辑成为可能，不必每次重写解析代码。
(function($) {
$.receiveShare = function(options) {
var defaults = {
titleInput: '#share-title',
textInput: '#share-text',
urlInput: '#share-url',
onReceive: function(data) {}
};
var opt = $.extend({}, defaults, options);
var params = new URLSearchParams(window.location.search);
var data = {
title: params.get('title') || '',
text: params.get('text') || '',
url: params.get('url') || ''
};
$(opt.titleInput).val(data.title);
$(opt.textInput).val(data.text);
$(opt.urlInput).val(data.url);
opt.onReceive(data);
return data;
};
})(jQuery);
$(function() {
$.receiveShare({
onReceive: function(d) {
if (d.text) {
$('body').prepend('<p class="tip">已收到分享内容</p>');
}
}
});
});
封装之后，若业务需要将分享内容提交到服务器，可用$.ajax统一发送。比如把接收到的链接存为用户书签，只需在onReceive里调用$.post('/api/save', d)。这样jQuery不仅处理了DOM回填，还顺带完成了网络层对接。相比散落在各处的原生代码，这种集中封装更易维护和测试，也降低了PWA分享接入门槛。
jQueryWeb_Share_Target_APIPWA修改时间：2026-08-18 14:14:18