progressive-web-apps - PWA 也应该是 SPA 吗？

Question

我想知道这是因为我的应用程序确实有一个与应用程序行为完全不同的初始旅程。

由于数据传输和加载时间，我想将这个初始旅程分成不同的“HTML”。偶不是 使用与应用程序的其余部分相同的框架 (Angular2)。

但是这样应用程序就不再是 SPA。

这是否会危害 "Connectivity independent"或 "App-like" PWA 原则？

观察。我们正在尝试这样做，因为我们的研究表明用户参与度与初始浏览加载时间的速度之间存在直接关系。

Answer 1

遵循 Web 应用程序的单页应用程序模式意味着您可以使用 App Shell approach 在渐进式 Web 应用程序中顺利过渡到处理导航缓存优先。 .

遵循 App Shell 模式并不是构建渐进式 Web 应用程序的唯一方法，但如果您采用不同的方法，则需要更多地考虑如何缓存 HTML，并且使用Service Worker 以缓存优先的方式响应导航。这篇“High-performance service worker loading”文章中概述了其中一些注意事项。

如果您的 Web 应用程序当前是 SPA 和一些静态页面的混合体，那么您可以在回复 navigation requests 时考虑到这一点。通过检查传入的 URL 在您的 Service Worker 中。假设有一个众所周知的前缀或其他方式来识别给定的 URL 对应于您的网络应用程序的 SPA 部分还是基本的 HTML 部分，您可以在您的 fetch 中做出不同的响应。处理程序:

// Not shown: install and activate handlers to keep app-shell.html
// cached and up to date.
self.addEventListener('fetch', event => {
  if (event.request.mode === 'navigate' && event.request.url.includes('/spa'))
    event.respondWith(caches.match('app-shell.html'));
    return;
  }
  // Either do nothing, and your non-/spa URLs will go against the network,
  // or use a runtime caching strategy to handle your non-/spa URLs.
});

更新于 2018-06-21 :更多视角，你可以阅读“ Beyond SPAs: alternative architectures for your PWA”