html - 第二次尝试在主屏幕中添加 Web 应用时提示无法正常工作

Question

尝试在 chrome 最新浏览器的主屏幕中添加网络应用程序，它在第一次访问时正常工作但第二次无法正常工作，这意味着不提示消息：

下面是我的代码：

1. 创建了有效的清单 json

2. 在 index.html 中包含清单文件

3. 并创建了 service-worker.js

   self.addEventListener('fetch', function(event) {
         event.respondWith(
           caches.match(event.request).then(function(response) {
             if (response) {
               return response;
             }          
             return fetch(event.request).then(function(response) {
               return response;
             }).catch(function(error) {
               throw error;
             });
           })
         );
       });
   

4. 在 html 页面中注册 service worker

   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)
         });
     }
   

设想：

1. 我第一次点击网页，它显示添加屏幕提示

2. 在主屏幕中添加

3. 卸载主屏幕页面

4. 我尝试再次点击网页，它没有显示添加屏幕提示

Answer 1

主屏幕上的图标只是 chrome 浏览器的快捷方式，具有更多风格（全屏、启动屏幕、方向等）。所以从技术上讲，你只是删除了快捷方式而不是应用程序。

如果您点击烤肉串图标 > 信息图标 > 站点设置，您将能够看到 chrome 仍将其保存在设备中。真正卸载/删除它的唯一方法是单击“清除和重置”按钮，这会使 chrome 认为该站点是第一次被访问的。

我认为“问题”将是 chrome 团队在浏览器中实现的一个不错的功能。通过“卸载”PWA 也会清除并重置它。