Преобразованный веб-сайт в Progressive Web App (PWA), не работающий на Edge - PullRequest
0 голосов
/ 31 января 2019

«Превратите ваш сайт в прогрессивное веб-приложение», - сказали они.

«Это будет легко», - сказали они.

Так я и сделал.

Мой сайт (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});
}

Ответы [ 2 ]

0 голосов
/ 31 января 2019

Есть некоторые проблемы, с которыми я столкнулся в Edge.Затем я узнал, что есть зависимость от версии сборки Windows, сервисный работник и PWA будут работать просто в Windows 10 RS4 , все функции будут доступны в RS5 только такие функции, как API квоты и т. Д.

0 голосов
/ 31 января 2019

реализовали ли вы все необходимые вещи:

  • Веб-манифест с правильными полями, заполненными
  • Веб-сайт, который будет обслуживаться из защищенного (HTTPS) домена
  • Значок, представляющий приложение на устройстве
  • Сервисный работник зарегистрирован, чтобы приложение работало в автономном режиме (в настоящее время это требуется только в Chrome для Android)

С этого сайта: https://developer.mozilla.org/en-US/docs/Web/Apps/Progressive/Installable_PWAs

...