Next.js: 离线优先支持

创建于 2017-01-23 · 47评论 · 资料来源: vercel/next.js

离线支持非常有用，对于创建现代 PWA 至关重要。与 HTML 清单一起，它有助于弥合网站和本机应用程序之间的差距。

此功能有两种不同的风格：

离线支持：如果站点已在线加载，即使离线也能导航站点。这应该是最容易实现的功能。
离线优先支持：即使站点尚未在浏览器中加载，也可以在离线时打开站点。

由于webpack-offline插件，两者都应该可行。无论如何，自从我同时学习 React 和 Next.js 以来，我还没有能够让它工作。

使其工作的步骤：

安装webpack-offline

npm install offline-plugin --save-dev

在你的根文件夹中创建一个自定义的next.config.js

const OfflinePlugin = require('offline-plugin');

module.exports = {
  webpack: (config, { dev }) => {
        config.plugins = [
            new OfflinePlugin()
        ];
    return config
  }
};

初始化 webpack-offline

这是我遇到问题的步骤。我认为您应该在componentDidMount内的顶级组件中执行此操作。

这个问题既是对我继续努力的提醒，也是对知识渊博的人的帮助的请求。

feature request

资料来源

espoal

👍93

最有用的评论

嘿伙计。我在 Google 的团队开发了一些 Service Worker 库（带有 Webpack 插件），例如https://github.com/GoogleChrome/sw-precache和https://github.com/GoogleChrome/sw-toolbox，用于 React/Webpack 重型Lyft、Housing.com、Flipkart 等网站。

如果 Next 决定探索离线支持，我们很乐意分享一些建议。我认为，鉴于代码拆分已经完成，开箱即用地规定像

除了为您提供这些页面的即时重复加载之外，它还会让您尽早选择 V8 的代码缓存，这样您重复访问的解析/编译时间将比现在低。

如果其中任何一个有趣，请随时大喊@rauchg :)

addyosmani 于 2017-02-15

👍74 🎉30 ❤10

所有47条评论

我也非常希望看到这个工作，以及关于它的解释/文档/示例。

请注意，next/prefetch 还没有真正允许离线行为，因为它不预取数据： https :

与 Next.js 没有直接关系，但我也想知道实际上有多少数据可以离线保存（例如，如果一个 web 应用程序有视频等——浏览器中是否有一些硬性限制？移动设备呢？），用户如何具体地要求预先下载一件事以备后用等。我之前也在这里提到过： https :

sedubois 于 2017-01-23

不同平台、浏览器和版本有不同的数据限制。您可以在“浏览器存储滥用者”中测试限制： https :

用于离线存储和缓存的标准化方法是 IndexedDB。现在即使在 iOS Safari (v10) 中也支持它，但它存在性能问题。否则它现在得到了广泛的支持： http ://caniuse.com/#feat =indexeddb

例如，PouchDB 在 Safari 上仍然使用 WebSQL 而不是 IndexedDB。 https://github.com/pouchdb/pouchdb/issues/5572
与 localForage 相同： https :

PouchDB 有一个很好的数据限制摘要： https :
这篇更老的文章还提到了如何处理一些存储空间不足的错误以及有关移动浏览器的其他方面https://www.html5rocks.com/en/tutorials/offline/quota-research/

您还可以在某些浏览器中查询当前配额并请求更多持久存储： https: //jakearchibald.com/2014/offline-cookbook/#cache -persistence

另一种方法是将长缓存过期值和不可变缓存控制与服务工作者一起使用。这很容易允许用户指定缓存，只需为每个选定的资源发出 http 请求。这在旧浏览器中也能很好地工作。但是，只有在支持 Service Worker 的浏览器中才能维护和手动删除各种缓存以避免限制。
https://developer.mozilla.org/en-US/docs/Web/API/Cache
https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers

请记住，当空间用完时，浏览器可以一次逐出整个原点，直到它在限制范围内：
https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria

msand 于 2017-01-23

👍5

Addy Osmani 的另一篇有用的文章： https :

显然还有一个存储 api 正在处理： https :

这允许实际持久存储：
“传统上，当用户用完他们设备上的存储空间时，使用这些 API 存储的数据就会丢失，而用户无法干预。但是，未经用户同意，无法清除持久盒。这为用户带来了数据保证在本机平台上享受到网络。”

msand 于 2017-01-23

IMO 使网站/应用程序离线工作涉及框架不应自行做出的许多决定。我将在一个与 service worker 脱机工作的站点上处理一个示例，但对于不同类型的应用程序有不同的技术。

impronunciable 于 2017-01-24

👍11 😕3

谢谢@impronunciable 。你打算使用 webpack-offline 还是别的什么？

你在谈论什么样的决定？我认为我们可以将问题分为两个主要问题：

1) 静态资产缓存：像 js、HTML、图像……这几乎已经实现了，至少在离线风格中并且不包括/static ，并且鉴于我们正在使用 react，它应该具有一种首选实现，通过 webpack-offline 和 service workers。

2) 数据缓存：状态、查询、易失性数据……引起更多关注，因为它至少需要假设用户将如何加载数据。也许我们可以展示如何使用 redux 来保存状态，然后人们会根据自己的喜好将数据放入 redux。或者也许我们可以使用 GraphQL/Apollo，它应该通过缓存查询和突变来覆盖这种情况。

espoal 于 2017-01-24

@servermeta这真的取决于你的情况。我正在完成一个积极的缓存策略而不使用插件，只是一个自定义服务器和一个来自https://serviceworke.rs/的策略

impronunciable 于 2017-01-24

👍2

我有它在这里工作。与 Offline-Plugin 进行了很多斗争，.next 目录有一些问题，然后我切换到 sw-precache-webpack-plugin，忽略了 .next 目录并将所有资产提供给 sw

ooade 于 2017-01-24

👍11

谢谢@ooade ，干得好，你为我节省了很多时间。

无论如何，我看到状态在刷新、重新加载之间不会持续。我会尝试考虑如何添加此功能。

espoal 于 2017-01-24

👍1

谢谢@ooade 。本地主机是指本地数据库，如 mongodb 或 localstorage？

我认为我们应该把问题分开：离线数据检索应该留给开发人员，而我们可以保留 redux 状态。检查这个：

https://github.com/rt2zz/redux-persist

有了这个，我们可以将状态存储在 localstorage 中，因此它可以在刷新、重新加载、选项卡和会话之间保持不变。

espoal 于 2017-01-26

如果 Next 决定探索离线支持，我们很乐意分享一些建议。我认为，鉴于代码拆分已经完成，开箱即用地规定像

除了为您提供这些页面的即时重复加载之外，它还会让您尽早选择 V8 的代码缓存，这样您重复访问的解析/编译时间将比现在低。

如果其中任何一个有趣，请随时大喊@rauchg :)

addyosmani 于 2017-02-15

👍74 🎉30 ❤10

@addyosmani离线支持是我们 2.0 稳定版后的首要任务之一

rauchg 于 2017-02-15

👍49 🎉20 ❤9

@rauchg关于 2.0 稳定发布日期的任何估计？
我们即将开始全面的生产，我们很想使用 Next.js
我会欣赏任何类型的估计，天/周/月......
非常感谢！

YarivGilad 于 2017-02-17

@Ajar-Ajar 2.0.0 今天发布了。

sebastienbarre 于 2017-03-27

@rauchg是要在此处跟踪离线优先支持还是要为其创建另一个问题？

egeozcan 于 2017-03-31

👍3

另请参阅@jevakallio 最新开源的redux-offline 。有下一个 + redux-offline 示例会很棒。

sedubois 于 2017-03-31

👍11

那么我们是否有任何关于如何实现这一点的信息，我一直在尝试在 next.config.js 中执行此操作并安装离线插件，但我无法使其正常工作。 Next 是一个很棒的项目，但如果它具有开箱即用的功能（离线优先），它将是超级完整（并且更酷）！

saulflores95 于 2017-04-21

👍1

@saulflores95使用@ooade的NextSimpleStarter的方式对我

AugustinLF 于 2017-04-21

👍2

@AugustinLF NextSimpleStarter 不提供离线功能。 https://github.com/ooade/NextSimpleStarter/issues/23#issuecomment -294310240

sedubois 于 2017-04-21

👍4

@sedubois对于任何进入并阅读本文的人来说，这有点夸大其词。公平地说，通过使用 sw-precache 和 sw-toolbox，它确实具有一些离线功能。我的应用程序仅使用这两个工具离线工作，但我的应用程序的初始状态不会改变。如果我想具体一点，我可能会说它不提供用于构建超出最初通过线路发送的状态的离线解决方案。

timmywil 于 2017-04-21

👍3

@timmywil ，你有你的 nextjs 离线应用程序的 GitHub 存储库吗？谢谢。

freecates 于 2017-05-06

👍1

我刚刚使用appcache创建了下一个支持离线的（测试版）版本，这是 Safari 所需要的。请看一下http://github.com/ssured/nownextmicro

ssured 于 2017-05-12

👍7 🎉2

大家好，我为我的样板添加了离线支持。
https://github.com/Sly777/ran

它有点马车。所以这就是为什么它被命名为“实验性”😄无论如何，我希望它有所帮助。

Sly777 于 2017-06-26

👍3

@rauchg此功能仍然是优先事项吗？

jabacchetta 于 2017-09-02

👍32 😄3

@rauchg随着 next.js 4.0 测试版的发布，该版本的路线图中是否有可能提供离线优先支持？

prateekrastogi 于 2017-10-22

👍29

我想问一下这个功能的消息^^

HelloEdit 于 2018-01-25

Next.js 5.0 已经发布（恭喜！）但是没有提到离线支持，你有新的路线图想要分享吗？感谢迄今为止所做的出色工作

idhard 于 2018-02-06

@idhard实际上，我们可能不会默认支持离线支持。
（但事情可能会改变）

但我们正在确保 Next.js 不会做任何魔法。因此，您将能够直接使用 webpack 插件和加载器。
接下来的 5 是第一步。

arunoda 于 2018-02-06

👍6

@idhard我认为全面离线支持会违反直觉，某些应用程序绝对不希望启用该功能。

在我的个人网站上，我正在使用这个https://github.com/zeit/next.js/tree/canary/examples/with-sw-precache ，我们也将在Eaze 的生产中使用 ^ 一旦 iOS 11.3 发布。

hanford 于 2018-02-06

@hanford是的，在 CRA 上也进行了类似的讨论，最终默认取消了对 webworkers 的支持（https://github.com/facebook/create-react-app/issues/2554#event-1431558318），但是我仍然认为 webworkers并且 PWA 将成为离线支持的事实上的解决方案，所以很高兴知道 Next 的团队是否有一些增加官方支持的计划，比如预取页面。

idhard 于 2018-02-06

@idhard是的，这对核心团队

我的个人网站正在使用 sw-precache webpack 插件，同时提供静态目录中的manifest.json 。如果你很好奇，代码在这里.. 提交有点草率，但我在上周添加了离线支持和清单 json。

hanford 于 2018-02-06

@hanford在 iOS 11.3 中会发生什么，它会有服务工作者吗？你有更多信息的参考吗？

sedubois 于 2018-02-07

@hanford @idhard我们在 CRA 之前尝试了 service workers，但遇到了很多问题。
这就是为什么我们决定完全使用传统的网络缓存技术来构建一个预取解决方案。
它运作良好。一组新的改进即将推出。

是的，离线当然是我们需要软件的地方。
但是它非常不稳定并且很难使用 API。事情可能会出错并破坏您的网站。

所以，我们可能不想自己做。
但是我们希望允许用户通过 Next.js 插件使用sw-precache东西（或者简单地添加一组 webpack 加载器和插件）

arunoda 于 2018-02-07

👍2

@sedubiois请参阅https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_11_1.html了解 Apple 在 iOS Safari 上的计划。宣布 Service Worker

ssured 于 2018-02-07

🎉4

是的， @ssured @sedubois服务工作者将登陆 iOS 11.3 中的 Mobile Safari，这非常令人兴奋！我使用的是 iOS 11.3 Beta 2 并且存在许多错误，（将网站添加到主屏幕时服务人员无法正确识别，但我相信苹果会在公开发布之前修复这些问题）

我认为@arunoda的建议是Next.js当前的缓存策略（缓存控制标头、etags 等）比 service worker 稳定得多。不过，Service Workers 确实启用了一些非常简洁的新功能，尤其是对网络请求进行更精细的控制（尽早返回缓存的内容）.. 但是 Next.js 可以在任何地方工作并且开销要少得多..（取消注册 Service Workers 是一种完全的痛苦）

hanford 于 2018-02-07

@ssured @sedubois我制作了一个小插件，它的工作方式与 Zeit 前几天推出的插件相同。

如果您有任何反馈，请告诉我！ https://github.com/hanford/next-offline

hanford 于 2018-02-07

👍3

@hanford感谢让我们的生活更轻松
@arunoda虽然 next.js 5 中的插件支持很棒，但如果所有插件都托管在主 next.js 存储库插件文件夹中，就像所有示例一样，而不是辅助插件，这对社区来说不是更有益吗？回购？大多数开发人员访问主存储库，因此，潜在的插件开发人员将有更多的动力来创建拉取请求，从而节省由于重复和不可避免的插件生态系统碎片而导致的社区时间浪费，这是由于单独的存储库造成的。

prateekrastogi 于 2018-02-08

对于仍在决定下一步做什么的其他人，我还相对轻松地使用了 sw-precache webpack 插件（例如，再次）。

jabacchetta 于 2018-02-08

❤2

我使用的是我自己的解决方案，但已切换到 hanford 提供的解决方案。我不得不在 next.config.js 中进行一些修改以停止插件自动注册服务工作者，但它似乎运行良好。

我现在只需要弄清楚如何在我的自定义服务器上使用它。例如，我有一个路由设置为 article/:slug。当我访问这些 url 之一时，Service Worker 正在尝试为该 url 发送文档。有谁知道我怎么能阻止它并让它成为文章？我猜这与 Workbox 中的设置有关。

designspin 于 2018-02-19

🎉1

我们是否仍然应该期待在未来的 NextJS 版本中集成 Service Worker 或离线支持？之前好像有人说这是一个优先功能，但是这个问题已经开放了一年半多了......

caribou-code 于 2018-08-07

@caribou-code 我不能代表 Zeit 团队谈论他们对 Next.js 的计划，但我前段时间写过这个： https :

我已经在几个应用程序中使用过它，而且效果很好。在幕后，它使用了 googles workbox，这是一个非常令人兴奋的项目： https :

我使用next-offline一些示例：

hanford 于 2018-08-07

❤8

@hanford我只是在使用 next-offline，然后在这里发帖，这很好！事实上，这是迄今为止我设法实施的唯一可行的解决方案。干得好！

但是，我确实很想得到一个使用sw-precache-webpack-plugin的解决方案，因为例子，尽管我不知道如何配置它来缓存和提供我所有的 Next 文件服务人员。该插件似乎也很受欢迎。

caribou-code 于 2018-08-07

我在一年前创建了NextSimpleStarter来帮助解决这个问题。但是，我注意到单独的 sw-precache 无法满足大多数离线需求，因此我们最近转向使用 workbox 来解决大多数离线需求。

虽然，我尚未将其更新为当前标准（图标大小等），我将在几天内修复。随意试用一下。如果你觉得它不令人满意，请放弃一个问题。

ooade 于 2018-08-07

@hanford这看起来很棒。它在开发模式下为我运行，但在该模式下没有服务工作者。我无法从您的自述文件中得知如何使其在生产模式下和 service worker 以及没有节点服务器的情况下工作。我还将我的应用程序部署到 Netlify 并且我一直在使用next export 。我的应用程序是完全静态的。如果这是一个问题，我不使用next export没有问题。我会做任何性能最好的事情，而且不花任何费用。这是一个爱好应用程序，所以我很灵活。

@ooade这看起来也很棒，但是我在启动

A bad HTTP response code (404) was received when fetching the script.

dancancro 于 2019-07-03

@dancancro你绝对应该能够使用next-offline同时也使用next-export

介意在next-offline打开一个问题，并附上一些重现步骤，以便我可以更深入地了解一下吗？

hanford 于 2019-07-03

@hanford如果你愿意，我可以做到这一点，但我没有做任何特别的事情，而且我并不是在暗示首发有任何问题。重现问题的步骤只是您的说明。唯一的问题是我不知道如何在生产模式下运行它。从这种情况来看，service worker 不应该在开发模式下注册，所以对我来说发生的事情是预期的行为。我只需要一些说明 - 如何在生产模式下运行它，如果next export是可能的，那么如何使用next export在生产模式下运行静态的、服务器呈现的代码。

dancancro 于 2019-07-03

@dancancro我理解，但不应该在这里进行讨论，这肯定不是 Next.js 本身的问题。

请在此处打开一个问题，我很乐意查看/回答您可能遇到的问题。

如果我们在不相关的问题/回购中进行讨论，社区不会受益

hanford 于 2019-07-03

👍1

我最近为 Next.js 创建了一个易于使用的零配置 PWA 插件： next-pwa

在此处查看示例

shadowwalker 于 2019-07-09

👍11 👀7

此页面是否有帮助？

0 / 5 - 0 等级

Next.js: 离线优先支持

最有用的评论

所有47条评论

相关问题