html - 将网站转换为不能在 Edge 上运行的 Progressive Web App (PWA)

问题描述

“把你的网站变成一个渐进式网络应用程序”，他们说。

“这很容易”，他们说。

所以我做了。

我的网站 (www.romanorum.com.au) 是相当传统的 HTML 表单、动态网页等，使用 razor。我跟随弹跳球，使我的网站成为 HTTPS，下载服务工作者脚本，运行 Lighthouse 等。当然，我的动态网页使用 Cache First 不断遇到错误。我将其更改为服务器优先，一切似乎都很好......但现在我注意到任何发布 html 表单的页面（例如我的搜索屏幕或结帐页面）都会在 Edge 上收到“找不到您的页面”错误。这些页面在 Chrome 甚至 Internet Explorer 中仍然可以正常工作，但自从我将其转换为 PWA 以来，Edge 始终没有带入表单数据，而是出现错误。

表单是使用原生 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});
}

标签： htmlformsmicrosoft-edgeprogressive-web-apps

html - 将网站转换为不能在 Edge 上运行的 Progressive Web App (PWA)

问题描述

解决方案

推荐阅读