javascript - iOS 上的 PWA 在单击共享按钮时导航到空白屏幕
问题描述
我正在研究基于 Angular 的 PWA。该应用程序具有使用 ngx-share/core 模块生成的社交媒体共享按钮。除了在 iOS 上运行的网站的 PWA 版本外,这些按钮都可以正常工作。当用户点击分享按钮时,操作系统会自动打开相关已安装的应用程序(即 twitter)以允许分享,所有元数据都会通过,但是当您返回 PWA 时,它现在显示一个空白屏幕,甚至如果您关闭并重新打开 PWA。我相信正在发生的事情,通过一些调试,我在单击共享按钮时发现 iOS 似乎会自动将 PWA 导航到新的 about:blank 页面,然后硬缓存此 url,从而导致空白屏幕。
我尝试了多个修复程序,但似乎没有任何效果。我尝试将 event.preventDefault() 添加到 click 事件,甚至是 history.go(-1),但这似乎没有任何效果,因为它会自动导航离开此页面,因此实际上没有执行任何代码. 我尝试编辑 manifest.json ,包括范围和 start_url。我尝试在 ngsw-config.json 中编辑缓存值。由于模块似乎处理社交媒体的链接,我无法添加 target="_blank",并且不确定这是否能解决问题,因为它似乎是 iOS 特定的问题。
article.component.html
<div class="share-container">
<share-buttons
[theme]="'modern-dark'"
[include]="['facebook', 'twitter', 'linkedin']"
[show]="3"
[showText]="true"
[showCount]="true"
[autoSetMeta]="true"
[title]="postTitle"
[description]="postDescription"
[image]="postImage"
(click)="incrementCounter($event)"
[url]="shareUrl"
></share-buttons>
</div>
文章.component.ts
incrementCounter(event) {
event.preventDefault();
let social = event.target.innerHTML.toLowerCase().trim();
var url = this.config.url + '/wp-endpoint/' + social;
const httpFormOptions = {
headers: new HttpHeaders({}),
};
const httpFormData = new FormData();
httpFormData.append('post_id', this.post_id);
this.httpClient.post<any>(url, httpFormData, httpFormOptions).subscribe(data => {
switch (data.platform) {
case 'facebook_share_count':
$('#Facebook').html(data.count);
break;
case 'twitter_share_count':
$('#Twitter').html(data.count);
break;
case 'linkedin_share_count':
$('#LinkedIn').html(data.count);
break;
}
});
}
清单.json
"theme_color": "#93d50a",
"background_color": "#fafafa",
"display": "standalone",
"scope": "/content-hub/",
"start_url": "/content-hub/",
"icons": []
ngsw-config.json
"dataGroups" : [
{
"name" : "api-fresh",
"urls" : [
"/category/*"
],
"cacheConfig" : {
"maxSize": 100,
"maxAge": "1h",
"timeout": "10s",
"strategy": "freshness"
}
}, {
"name": "api-performance",
"urls": [
"/"
],
"cacheConfig": {
"maxSize": 100,
"maxAge": "1d",
"strategy": "performance"
}
}
]
解决方案
我建议对 PWA 使用 Webshare API。它在 Chrome 61 和 iOS 12.2 及更高版本上运行良好。
navigator.share({
title: document.title,
text: 'Hello World',
url: 'https://developer.mozilla.org',
}); // share the URL of MDN
共享 API 不适用于常规的非 PWA/浏览器,因此我们应该首先测试兼容性:
{window.navigator.share?shareButton:fallBackShareButton}
共享 API文档
推荐阅读
- python - 如何在 str() 中禁用计算
- android - 在没有 GSM 的新华为设备中禁用 Google Play 服务警告
- python - 将任意数量的 numpy 数组行拆分为 Pandas 数据框中的列
- spring - 创建 ServletContext 资源 [/WEB-INF/applicationContext-dao.xml] 中定义的名称为“sessionFactory”的 bean 时出错:
- powershell - 如何在单个表格窗口中管理多个 powershell 终端
- javascript - 重新加载页面时,滚动上的透明到彩色导航栏不会切换为彩色
- python - 从具有继承的 Python 类创建 JSON
- c# - 在 Unity 的网格上动态生成 3D 对象的最佳方法是什么?
- django - 如何使用 django_table2 呈现行查询
- ruby - 如何使用 Capybara 和 Selenium 安装 firefox 插件?