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