Question

他们说，

“将您的网站变成渐进式Web应用程序”。

他们说：“这很容易。”

我照做了。

我的网站（www.romanorum.com.au）是相当传统的HTML表单，使用剃刀的动态网页等。我跟随弹跳球，将站点设置为HTTPS，下载了服务工作程序脚本，运行了Lighthouse等。当然，我的动态网页使用Cache First不断出错。我将其更改为Server First，一切似乎都很好……但是现在我注意到，任何张贴html表单的页面（例如我的“搜索”屏幕或“签出”页面）在Edge上都会收到“找不到页面”错误。这些页面在Chrome甚至Internet Explorer上都能正常运行，但是Edge自从我将其转换为PWA以来就从未出现过表单数据，而是出现了错误。

表单是使用本地HTML5提交的，我在网站上使用的JavaScript最少。我做错了什么？

编辑：这是我从PWABuilder中添加的服务人员脚本，发布的cshtml文件没有更改，因为在Chrome / IE和Edge中可以正常使用。我以为我的网站实际上不是PWA ...

var CACHE = 'pwabuilder-precache';
var precacheFiles = [
      /* Add an array of files to precache for your app */
    ];

//Install stage sets up the cache-array to configure pre-cache content
self.addEventListener('install', function(evt) {
  console.log('[PWA Builder] The service worker is being installed.');
  evt.waitUntil(precache().then(function() {
    console.log('[PWA Builder] Skip waiting on install');
    return self.skipWaiting();
  }));
});


//allow sw to control of current page
self.addEventListener('activate', function(event) {
  console.log('[PWA Builder] Claiming clients for current page');
  return self.clients.claim();
});

self.addEventListener('fetch', function(evt) {
  console.log('[PWA Builder] The service worker is serving the asset.'+ evt.request.url);
  evt.respondWith(fromServer(evt.request).catch(fromCache(evt.request)));
  evt.waitUntil(update(evt.request));
});


function precache() {
  return caches.open(CACHE).then(function (cache) {
    return cache.addAll(precacheFiles);
  });
}

function fromCache(request) {
  //we pull files from the cache first thing so we can show them fast
  return caches.open(CACHE).then(function (cache) {
    return cache.match(request).then(function (matching) {
      return matching || Promise.reject('no-match');
    });
  });
}

function update(request) {
  //this is where we call the server to get the newest version of the 
  //file to use the next time we show view
  return caches.open(CACHE).then(function (cache) {
    return fetch(request).then(function (response) {
      return cache.put(request, response);
    });
  });
}

function fromServer(request){
  //this is the fallback if it is not in the cache to go to the server and get it
  return fetch(request).then(function(response){ return response});
}

Answer 1

您实现了所有必需的东西吗？

网络清单，其中填写了正确的字段
要从安全（HTTPS）域提供服务的网站
代表设备上的应用程序的图标
已注册服务工作人员，以使应用程序脱机工作（当前只有Android版Chrome才需要这样做）

从此网站：https://developer.mozilla.org/en-US/docs/Web/Apps/Progressive/Installable_PWAs

Answer 2

Edge面临一些问题。然后我才知道Windows构建版本存在依赖性，服务工作者和PWA在Windows 10 RS4 中可以正常运行，所有功能仅在 RS5 中可用，例如< strong>配额API 等

将网站转换为不能在Edge上运行的渐进式Web应用程序（PWA）

2 个答案: