Question

我使用A Simple Progressiv Web App Tutorial与PWA联系。

现在我面临的问题是，我已将h1的内容从 Hello World!至Hello World, Minamo!。如果我在iPhone的Safari浏览器中打开该页面，则显示效果非常好。

当我通过Share > Add To Homescreen将PWA存储在iPhone上并在主屏幕上打开PWA时，它显示了旧内容：Hello World!。

我如何获取正确的内容的最新版本-Safari浏览器中显示的内容-存储在iPhone上的PWA？

注意：在将新的PWA添加到主屏幕之前，我删除了旧版本的PWA。

这是我的文件：

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hello World</title>
  <link rel="manifest" href="/manifest.json">
  <link rel="stylesheet" href="css/style.css">
  <link rel="icon" href="favicon.ico" type="image/x-icon" />
  <link rel="apple-touch-icon" href="images/hello-icon-152.png">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="theme-color" content="white"/>
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Hello World">
  <meta name="msapplication-TileImage" content="images/hello-icon-144.png">
  <meta name="msapplication-TileColor" content="#FFFFFF">
</head>
<body class="fullscreen">
  <div class="container">
    <h1 class="title">Hello World, Minamo!</h1>
  </div>
  <script src="js/main.js"></script>
</body>
</html>

js / main.js

window.onload = () => {
  'use strict';

  if ('serviceWorker' in navigator) {
    navigator.serviceWorker
             .register('./sw.js');
  }
}

sw.js

var cacheName = 'hello-pwa';
var filesToCache = [
  '/',
  '/index.html',
  '/css/style.css',
  '/js/main.js'
];

/* Start the service worker and cache all of the app's content */
self.addEventListener('install', function(e) {
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      return cache.addAll(filesToCache);
    })
  );
});

/* Serve cached content when offline */
self.addEventListener('fetch', function(e) {
  e.respondWith(
    caches.match(e.request).then(function(response) {
      return response || fetch(e.request);
    })
  );
});

Answer 1

现在可能正在您的应用程序上呈现的“ index.html”是在您首次启动该应用程序时缓存的，因此您将清除该应用程序的缓存。

在我的iPhone6s上，

设置
Safari
高级
网站数据
编辑（右上）
然后通过单击红色图标清除我的应用程序的数据。

启动您的应用程序，您应该会看到新数据

当然，您不希望用户在更新Web应用程序的内容时总是这样做，并且要避免使用Update Service worker method来更新服务人员。

全新安装的pwa不显示内容

index.html

js / main.js

sw.js

1 个答案: