Next.js: Offline-Erstunterstützung

Erstellt am 23. Jan. 2017  ·  47Kommentare  ·  Quelle: vercel/next.js

Offline-Support ist sehr nützlich und entscheidend für die Erstellung einer modernen PWA. Zusammen mit HTML-Manifesten hilft es, die Lücke zwischen einer Website und einer nativen App zu schließen.

Diese Funktion hat zwei verschiedene Geschmacksrichtungen:

  • Offline-Unterstützung: Dies ist die Möglichkeit, die Site auch offline zu navigieren, wenn die Site online geladen wurde. Dies sollte die am einfachsten zu implementierende Funktion sein.

  • Offline First Support: Dies ist die Möglichkeit, die Site auch offline zu öffnen, auch wenn die Site nicht im Browser geladen wurde.

Beides sollte dank des webpack-offline Plugins machbar sein. Da ich sowohl React als auch Next.js gleichzeitig lerne, konnte ich es jedoch noch nicht zum Laufen bringen.

Schritte, damit es funktioniert:

  • webpack-offline installieren

npm install offline-plugin --save-dev

  • Erstellen Sie ein benutzerdefiniertes next.config.js in Ihrem Stammordner
const OfflinePlugin = require('offline-plugin');

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

  • Webpack-offline initialisieren

Dies ist der Schritt, mit dem ich Probleme habe. Ich denke, Sie sollten dies in einer Komponente tun, innerhalb von componentDidMount , innerhalb der obersten Ebene.

Dieses Problem ist sowohl eine Erinnerung für mich, daran weiter zu arbeiten, als auch eine Bitte um Hilfe von jemandem, der sich auskennt.

feature request

Hilfreichster Kommentar

Hallo Leute. Mein Team bei Google arbeitet an einigen Service Worker-Bibliotheken (mit Webpack-Plugins) wie https://github.com/GoogleChrome/sw-precache und https://github.com/GoogleChrome/sw-toolbox, die auf React/Webpack heavy verwendet werden Seiten wie Lyft, Housing.com, Flipkart etc.

Wenn Next beschließt, den Offline-Support zu erkunden, würden wir uns freuen, Ihnen einige Hinweise zu geben. Ich denke, es gibt großartige Möglichkeiten, Muster wie PRPL out-of-the-box

Es würde Ihnen nicht nur sofortiges wiederholtes Laden dieser Seiten ermöglichen, sondern Sie würden auch frühzeitig in das Code-Caching von V8 einsteigen, sodass Ihre Parse-/Kompilierungszeiten für wiederholte Besuche niedriger wären als heute.

Zögern Sie nicht zu schreien, wenn das interessant ist

Alle 47 Kommentare

Ich würde es sehr gerne sehen, dass dies auch funktioniert, zusammen mit Erklärungen / Dokumentationen / Beispielen dazu.

Beachten Sie, dass next/prefetch noch kein wirkliches Offline-Verhalten zulässt, da keine Daten vorab abgerufen werden: https://github.com/zeit/next.js/issues/740

Nicht direkt mit Next.js verbunden, aber ich frage mich auch, wie viele Daten tatsächlich offline gehalten werden können (z bitten Sie darum, dass eine Sache für später vorab heruntergeladen wird usw. Ich habe hier auch schon Dinge erwähnt: https://github.com/zeit/next.js/issues/24#issuecomment -258804529 (before next/prefetch was a thing .) ).

Es gibt unterschiedliche Datenlimits in verschiedenen Plattformen, Browsern und Versionen. Die Grenzen können Sie im „Browser-Speichermissbraucher“ testen: https://demo.agektmr.com/storage/

Die standardisierte Methode, die für Offline-Speicherung und -Caching gedacht ist, ist IndexedDB. Es wird jetzt sogar in iOS Safari (v10) unterstützt, hat dort jedoch Leistungsprobleme. Ansonsten hat es jetzt breite Unterstützung: http://caniuse.com/#feat =indexeddb

ZB verwendet PouchDB in Safari immer noch WebSQL anstelle von IndexedDB. https://github.com/pouchdb/pouchdb/issues/5572
Gleiches mit localForage: https://github.com/localForage/localForage/issues/604

PouchDB hat eine schöne Zusammenfassung der Datenlimits: https://pouchdb.com/faq.html#data_limits (etwas veraltet)
Und in diesem noch älteren Artikel wird auch erwähnt, wie man mit einigen Speicherfehlern und anderen Aspekten in Bezug auf mobile Browser umgeht https://www.html5rocks.com/en/tutorials/offline/quota-research/

Sie können in einigen Browsern auch Ihr aktuelles Kontingent abfragen und mehr persistenten Speicher anfordern: https://jakearchibald.com/2014/offline-cookbook/#cache -persistence

Eine andere Möglichkeit wäre die Verwendung langer Cache-Ablaufwerte und unveränderlicher Cache-Steuerung zusammen mit Servicemitarbeitern. Dies würde leicht benutzerspezifisches Caching ermöglichen, indem einfach eine http-Anfrage für jede ausgewählte Ressource gestellt wird. Dies würde auch in alten Browsern ganz gut funktionieren. Verschiedene Caches zu pflegen und manuell zu löschen, um Limits zu umgehen, wäre jedoch nur in Browsern möglich, die Service-Mitarbeiter unterstützen.
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

Denken Sie daran, dass der Browser, wenn der Speicherplatz knapp wird, einen gesamten Ursprung auf einmal entfernen kann, bis er in Grenzen ist:
https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria

Ein weiterer nützlicher Artikel von Addy Osmani: https://medium.com/dev-channel/offline-storage-for-progressive-web-apps-70d52695513c#.9vja3t8gp

Anscheinend wird auch an einer Storage-API gearbeitet: https://storage.spec.whatwg.org/

Dies ermöglicht tatsächlich persistente Speicherung:
"Traditionell gehen die mit diesen APIs gespeicherten Daten verloren, ohne dass der Benutzer eingreifen kann, da der Speicherplatz des Benutzers auf seinem Gerät knapp wird. Dauerhafte Boxen können jedoch nicht ohne Zustimmung des Benutzers gelöscht werden. Dies bringt den Benutzern Datengarantien haben auf nativen Plattformen das Web genossen."

IMO erfordert, dass eine Site/App offline funktioniert, viele Entscheidungen, die ein Framework nicht alleine treffen sollte. Ich werde an einem Beispiel auf einer Site arbeiten, die offline mit einem Servicemitarbeiter arbeitet, aber es gibt unterschiedliche Techniken für verschiedene Arten von Apps.

danke @impronunciable . Planen Sie webpack-offline oder etwas anderes zu verwenden?

von was für entscheidungen sprichst du? Ich denke, wir können das Problem in zwei Hauptfragen einteilen:

1) Zwischenspeichern von statischen Assets: Wie js, HTML, Bilder, ... ist dies fast bereits implementiert, zumindest in der Offline-Variante und mit Ausnahme von /static , und da wir reagieren verwenden, sollte es haben eine bevorzugte Implementierung über Webpack-Offline und Servicemitarbeiter.

2) Daten-Caching: Status, Abfragen, flüchtige Daten, .... geben mehr Bedenken, da es zumindest voraussetzt, wie die Benutzer die Daten laden. Vielleicht könnten wir zeigen, wie man den Zustand mit Redux beibehält, und dann werden die Leute Daten nach Belieben in Redux legen. Oder vielleicht könnten wir GraphQL/Apollo verwenden, das einen solchen Fall abdecken sollte, indem Abfragen und Mutationen zwischengespeichert werden.

@servermeta es hängt wirklich von Ihrem Fall ab. Ich beende die Implementierung einer aggressiven Caching-Strategie ohne Plugins zu verwenden, nur einen benutzerdefinierten Server und eine Strategie von https://serviceworke.rs/

Ich habe es hier arbeiten . Ich habe viel mit Offline-Plugin gekämpft, hatte einige Probleme mit dem .next-Verzeichnis, dann wechselte ich zu sw-precache-webpack-plugin, ignorierte das .next-Verzeichnis und lieferte alle Assets an die sw

danke @ooade , gut gemacht, du hast mir viel Zeit gespart.

Wie auch immer, ich sehe, dass dieser Zustand zwischen Aktualisierungen und Neuladevorgängen nicht bestehen bleibt. Ich werde versuchen, darüber nachzudenken, wie man diese Funktion hinzufügt.

danke @ooade . Mit localhost meinen Sie eine lokale Datenbank wie mongodb oder localstorage?

Ich denke, wir sollten das Problem teilen: Das Abrufen von Offline-Daten sollte dem Entwickler überlassen werden, während wir den Redux-Zustand beibehalten könnten. Überprüfen Sie dies:

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

Damit können wir den Zustand in localstorage speichern, sodass er zwischen Aktualisierungen, Neuladevorgängen, Registerkarten und Sitzungen bestehen bleibt.

Hallo Leute. Mein Team bei Google arbeitet an einigen Service Worker-Bibliotheken (mit Webpack-Plugins) wie https://github.com/GoogleChrome/sw-precache und https://github.com/GoogleChrome/sw-toolbox, die auf React/Webpack heavy verwendet werden Seiten wie Lyft, Housing.com, Flipkart etc.

Wenn Next beschließt, den Offline-Support zu erkunden, würden wir uns freuen, Ihnen einige Hinweise zu geben. Ich denke, es gibt großartige Möglichkeiten, Muster wie PRPL out-of-the-box

Es würde Ihnen nicht nur sofortiges wiederholtes Laden dieser Seiten ermöglichen, sondern Sie würden auch frühzeitig in das Code-Caching von V8 einsteigen, sodass Ihre Parse-/Kompilierungszeiten für wiederholte Besuche niedriger wären als heute.

Zögern Sie nicht zu schreien, wenn das interessant ist

@addyosmani Offline-Support ist eine unserer obersten Prioritäten nach 2.0 stable

@rauchg eine Einschätzung bezüglich des stabilen Release-Datums von 2.0?
Wir stehen kurz vor dem Beginn einer vollständigen Produktion und würden gerne Next.js verwenden
Ich freue mich über jede Art von Schätzung, Tage / Wochen / Monate ...
Ich danke dir sehr!

@Ajar-Ajar 2.0.0 wurde heute veröffentlicht.

@rauchg wird der Offline-First-Support hier getrackt oder erstellest du einen weiteren Issue dafür?

Bitte beachten Sie auch die neu Open Source Redux-Offline von @jevakallio. Wäre toll, ein next + redux-offline-Beispiel zu haben.

Haben wir also irgendwelche Informationen, wie man dies erreicht, habe ich versucht, dies in der next.config.js zu tun und das Offline-Plugin zu installieren, aber ich konnte es nicht zum Laufen bringen. Das nächste ist ein großartiges Projekt, aber es wäre super vollständig (und cooler), wenn es diese Funktion (Offline-zuerst) aus der Box hätte!

@saulflores95 Die Verwendung von @ooades NextSimpleStarter -Weg hat für mich funktioniert :)

@AugustinLF NextSimpleStarter bietet keine Offline-Funktionen. https://github.com/ooade/NextSimpleStarter/issues/23#issuecomment -294310240

@sedubois Für jeden, der

@timmywil , hast du ein GitHub-Repository deiner offline-fähigen nextjs-App? Vielen Dank.

Ich habe gerade eine (Beta-)Version von next support offline mit appcache , die für Safari benötigt wird. Bitte werfen Sie einen Blick auf http://github.com/ssured/nownextmicro

Hallo zusammen, ich habe meinem Boilerplate Offline-Unterstützung hinzugefügt.
https://github.com/Sly777/ran

Es ist ein bisschen buggy. Deshalb heißt es "experimentell" 😄 Wie auch immer, ich hoffe es hilft.

@rauchg Hat diese Funktion noch Priorität?

@rauchg Besteht nach der Veröffentlichung der Betaversion von next.js 4.0 die Möglichkeit, dass der Offline-Erstsupport für diese Version in der Roadmap enthalten ist?

Ich würde nach Neuigkeiten zu dem Feature fragen ^^

Next.js 5.0 wurde veröffentlicht (Glückwunsch!), aber es wird kein Offline-Support erwähnt. Gibt es eine neue Roadmap, die Sie teilen möchten? danke für die bisher geleistete tolle arbeit

@idhard Tatsächlich werden wir den Offline-Support möglicherweise nicht standardmäßig unterstützen.
(Aber die Dinge könnten sich ändern)

Aber wir sind dabei, sicherzustellen, dass Next.js keine Magie bewirkt. Sie können also direkte Webpack-Plugins und -Loader unverändert verwenden.
Nächste 5 ist der erste Schritt.

@idhard Ich denke, es wäre kontraintuitiv für einen umfassenden Offline-Support, einige Apps möchten definitiv nicht, dass diese Funktion aktiviert wird.

Auf meiner persönlichen Website verwende ich diesen https://github.com/zeit/next.js/tree/canary/examples/with-sw-precache und wir werden auch ^ in der Produktion bei Eaze einmal iOS verwenden 11.3 ist freigegeben.

@hanford ja eine ähnliche Diskussion wurde über CRA geführt und endet damit, dass die Unterstützung von Webworkern standardmäßig entfernt wird (https://github.com/facebook/create-react-app/issues/2554#event-1431558318), aber ich denke immer noch, dass Webworker und PWA werden die defacto-Lösung für Offline-Support sein, daher wäre es gut zu wissen, ob das Team von Next einen Plan hat, einen offiziellen Support hinzuzufügen, wie zum Beispiel vorab abgerufene Seiten.

@idhard ja, irgendwie ein interessantes Dilemma für das Kernteam. Ich bin mit dem oben erwähnten sw-precache-Plugin sehr zufrieden.

meine persönliche Website verwendet das sw-precache Webpack-Plugin, zusammen mit einem manifest.json aus dem statischen Verzeichnis. Wenn Sie neugierig sind, der Code ist hier .. die Commits sind ein wenig schlampig, aber ich habe in der letzten Woche Offline-Unterstützung und das Manifest Json hinzugefügt.

@hanford was passiert in iOS 11.3, wird es Servicemitarbeiter geben? Hätten Sie eine Referenz mit weiteren Informationen?

@hanford @idhard Wir haben Servicemitarbeiter lange vor CRA ausprobiert und hatten viele Probleme.
Aus diesem Grund haben wir uns entschieden, eine Prefetching-Lösung ausschließlich mit traditioneller Web-Caching-Technologie zu entwickeln.
Es funktioniert erstaunlich gut. Eine neue Reihe von Verbesserungen kommt bald.

Ja, natürlich ist offline ein Ort, an dem wir SW brauchen.
Aber es ist sehr instabil und schwer zu verwenden API. Dinge könnten schief gehen und Ihre Website beschädigen.

Also wollen wir es vielleicht nicht selbst machen.
Aber wir möchten Benutzern ermöglichen, Dinge wie sw-precache über das Next.js-Plugin zu verwenden (oder einfach eine Reihe von Webpack-Loadern und -Plugins hinzuzufügen).

@sedubiois siehe https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_11_1.html für Apples Pläne für iOS Safari. Servicemitarbeiter sind angekündigt

Yep @ssured @sedubois Servicemitarbeiter landen in Mobile Safari in iOS 11.3, was ziemlich aufregend ist! Ich verwende iOS 11.3 Beta 2 und es gibt zahlreiche Fehler (Servicemitarbeiter werden nicht richtig erkannt, wenn die Website zum Homescreen hinzugefügt wird, aber ich bin zuversichtlich, dass Apple diese vor der öffentlichen Veröffentlichung beheben wird)

Ich denke, was @arunoda vorschlägt, ist, dass die aktuelle Caching-Strategie von Next.js (Cache-Control-Header, Etags usw.) viel stabiler ist als Servicearbeiter. Service Worker ermöglichen jedoch einige wirklich nette neue Funktionalitäten, insbesondere eine feinere Kontrolle über Netzwerkanforderungen (vorzeitige Rückgabe von zwischengespeicherten Inhalten). Aber was Next.js überall funktioniert und deutlich weniger Overhead hat.

@ssured @sedubois Ich habe ein kleines Plugin erstellt, das genauso funktioniert wie die Plugins, die Zeit neulich gestartet hat

Lassen Sie es mich wissen, wenn Sie Feedback haben! https://github.com/hanford/next-offline

@hanford danke, dass hast
@arunoda Während die Plugin-Unterstützung in next.js 5 großartig ist, wäre es nicht viel vorteilhafter für die Community, wenn alle Plugins in den Hauptordnern der next.js-Repo-Plugins gehostet würden, genau wie alle Beispiele, anstatt in einem Hilfsprogramm? Repo? Die meisten Entwickler besuchen das Haupt-Repository, und daher hätten potenzielle Plugin-Entwickler einen viel größeren Anreiz, Pull-Requests zu erstellen, wodurch die Zeitverschwendung der Community durch Wiederholungen und die unvermeidliche Fragmentierung des Plugin-Ökosystems aufgrund separater Repositorys gespart wird.

Für alle anderen, die noch entscheiden, was in Zukunft zu tun ist, habe ich auch relativ einfach das sw-precache-Webpack-Plugin verwendet (wieder zum Beispiel ).

Ich habe meine eigene Lösung verwendet, bin aber auf die von hanford bereitgestellte Lösung umgestiegen. Ich musste ein paar Änderungen in next.config.js vornehmen, um zu verhindern, dass das Plugin den Service Worker automatisch registriert, aber es scheint gut zu funktionieren.

Jetzt muss ich nur noch herausfinden, wie ich das mit meinem benutzerdefinierten Server zum Laufen bekomme. Zum Beispiel habe ich eine Route als article/:slug eingerichtet. Wenn ich eine dieser URLs besuche, versucht der Servicemitarbeiter, ein Dokument für diese URL zu versenden. Weiß jemand, wie ich das stoppen und stattdessen Artikel liefern kann? Dies hängt mit den Einstellungen in Workbox zusammen, denke ich.

Sollten wir in zukünftigen NextJS-Releases noch mit der Integration von Servicemitarbeitern oder Offline-Support rechnen? Es sieht so aus, als hätten einige Leute zuvor gesagt, dass es ein vorrangiges Feature sei, aber dieses Problem ist seit über anderthalb Jahren offen...

@caribou-code Ich kann nicht für das Zeit-Team über seine Pläne für Next.js sprechen, aber ich habe dies vor einiger Zeit geschrieben: https://github.com/hanford/next-offline , mit dem Sie automatisch einen Servicemitarbeiter generieren können das wird offline funktionieren.

Ich habe es in mehreren Anwendungen verwendet und es hat ziemlich gut funktioniert. Unter der Haube wird Googles Workbox verwendet, ein sehr spannendes Projekt: https://developers.google.com/web/tools/workbox/

Einige Beispiele, in denen ich next-offline :

@hanford Ich habe gerade next-offline benutzt, bevor ich hier

Ich wollte jedoch wirklich eine Lösung haben, die mit sw-precache-webpack-plugin funktioniert, da es ein Beispiel dafür im NextJS-Repository gibt, obwohl ich nicht herausfinden kann, wie ich es so konfigurieren kann, dass alle meine Next-Dateien zwischengespeichert und bereitgestellt werden der Servicemitarbeiter. Dieses Plugin scheint auch sehr beliebt zu sein.

Ich habe NextSimpleStarter vor einem Jahr erstellt, um dieses Problem zu beheben. Mir ist jedoch aufgefallen, dass sw-precache allein die meisten Offline-Anforderungen nicht erfüllen kann, daher sind wir kürzlich auf die Verwendung von Workbox umgestiegen, die die meisten davon löst.

Allerdings muss ich es noch auf die aktuellen Standards (Symbolgrößen usw.) aktualisieren, die ich in wenigen Tagen beheben werde. Fühlen Sie sich frei, es zu testen. Lassen Sie ein Problem fallen, wenn Sie es nicht zufriedenstellend finden.

@hanford Das sieht toll aus. Es läuft für mich im Entwicklungsmodus, aber es gibt keinen Service-Worker in diesem Modus. Ich kann Ihrer Readme-Datei nicht sagen, wie Sie es im Produktionsmodus und mit einem Servicemitarbeiter und ohne Knotenserver zum Laufen bringen. Ich stelle meine App auch auf Netlify bereit und verwende next export . Meine App ist total statisch. Ich habe kein Problem damit, next export wenn das ein Problem ist . Ich mache das, was am leistungsfähigsten ist und nichts kostet. Es ist eine Hobby-App, also bin ich flexibel.

@ooade Das sieht auch gut aus, aber ich habe beim Starten

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

@dancancro Sie sollten auf jeden Fall in der Lage sein, next-offline während Sie auch next-export

Könnten Sie ein Problem in next-offline mit einigen Schritten zum Reproduzieren öffnen, damit ich es mir genauer ansehen kann?

@hanford Ich kann das tun, wenn Sie möchten, aber ich habe nichts Besonderes getan und Ihre Anweisungen . Das einzige Problem ist, dass ich nicht weiß, wie ich es im Produktionsmodus ausführen soll. Ausgehend von dieser Bedingung sollte ein Service-Worker nicht im Entwicklungsmodus registriert sein, daher ist bei mir das erwartete Verhalten aufgetreten. Ich brauche nur ein paar Anweisungen - wie man es im Produktionsmodus ausführt, und wenn next export möglich ist, dann wie man statischen, vom Server gerenderten Code im Produktionsmodus mit next export .

@dancancro Ich verstehe, aber diese Diskussion sollte hier nicht stattfinden, dies ist sicherlich kein Problem mit Next.js selbst.

Bitte eröffnen Sie hier ein Problem und ich würde mich freuen, einen Blick darauf zu werfen / Fragen zu beantworten, die Sie haben könnten.

Die Community profitiert nicht, wenn wir eine Diskussion in einem nicht verwandten Thema/Repo führen

Ich habe kürzlich ein benutzerfreundliches Zero-Config-PWA-Plugin für Next.js erstellt: next-pwa

Schauen Sie sich das Beispiel hier an

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen