时间戳

首页 > 解决方案 > 添加到主屏幕到图像

javascript - 添加到主屏幕到图像

问题描述

我的 PHP 页面中有一个下载按钮。单击该按钮后，将下载图像。但我的老板需要下载图像，如应用程序图标。如果有人下载图像，则应保存一个图标，如果单击该图标，则应显示下载的图像。

我通过“添加到主屏幕”进行了尝试。它正在重新加载页面。

index.html 是：

<!DOCTYPE html>
<html>
<head>
    <title>Template One</title>
<link rel="icon" href="icon512.png" type="image/png" sizes="16x16">
    <link rel="manifest" href="manifest.json">
</head>
<body>
    <div class="mainContainer template1">
        hello
    </div>
 </body>
  <!-- Latest compiled and minified JavaScript -->
   <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="crossorigin="anonymous"></script>
 
<script>
 if ('serviceWorker' in navigator) {
console.log("Will the service worker register?");
navigator.serviceWorker.register('service-worker.js')
  .then(function(reg){
    console.log("Yes, it did.");
 }).catch(function(err) {
    console.log("No it didn't. This happened:", err)
});
}
 </script>
</html>

service-worker.js 是：

self.addEventListener('fetch', function(event) {});

manifest.json 是：

{
"short_name": "Test App",
"name": "Web Test App",
"icons": [
{
  "src": "icon192.png",
  "type": "image/png",
  "sizes": "192x192"
},
{
  "src": "icon512.png",
  "type": "image/png",
  "sizes": "512x512"
}
],
"start_url": "http://localhost/add_to_home_screen3/",
"background_color": "#3367D6",
"display": "standalone",
"theme_color": "#3367D6"
}

它没有显示任何添加到主屏幕按钮。

在控制台中：

Will the service worker register?
(index):24 Yes, it did.

我在桌面 chrome localhost 中测试了我的代码。

我有一些疑问：

1-为什么它不起作用。我这边的代码有什么问题，还是只能在移动浏览器上运行？

2- 我可以在 manifest.json 的 start_url 中给出我的图像名称 url 。

3-上述方法是否正确获得我的输出或者我可以通过其他方式获得我的输出？

标签： javascriptprogressive-web-appshomescreen

解决方案

推荐阅读