Ohne bauen

Fernbeziehungen beinhalten häufig häufige Flüge. Während dieser Flüge wird die Idee, Reddit aufzuholen, ansprechend. Anstatt nach einer Offline -Reddit -App zu suchen, habe ich beschlossen, meinen eigenen zu erstellen und moderne Web -Technologien und einen "baulosen" Entwicklungsansatz zu präsentieren.

Dieser Beitrag feiert innovative Webentwickler und deren Beiträge. Obwohl kein Schritt-für-Schritt-Tutorial, ist der komplette Code auf GitHub verfügbar.

Das Ziel ist ein Reddit -Leser, der Werkzeug und Abhängigkeiten minimiert. Wir werden verwenden:

• Lichelung: Ein leichtes, benutzerfreundliches Komponentenmodell, das Webkomponenten nutzt.
• @Vaadin/Router: Ein kompakter Router mit einer großartigen Entwicklererfahrung.
• @Pika/Web: vereinfacht das Modulmanagement während der Entwicklung.
• Es-dev-Server: Ein einfacher Dev-Server (obwohl jeder HTTP-Server funktioniert).

Wir werden auch Browserstandards nutzen: ES -Module, Webkomponenten, Karten, KV -Speicher und Servicemitarbeiter.

Abhängigkeitsinstallation:

 npm i -s lit -Element @vaadin/Router
npm i -d @pika/web es-dev-server

Fügen Sie package.json ein postinstall -Skript hinzu:

 "Skripte": {{
  "Start": "Es-dev-server",
  "Postinstall": "Pika-Web"
}

PIKA: Straffenden von Abhängigkeiten

Pika (von Fred K. Schott) vereinfacht die Webentwicklung und installiert Abhängigkeiten als einzelne JavaScript -Dateien in einem web_modules/ Verzeichnis. Dies vereinfacht den Prozess und vermeidet komplexe Build -Konfigurationen. Die Ausgabe ähnelt:

 <code>└─ web_modules/ ├─ lit-element.js └─ @vaadin └─ router.js</code>

Karten importieren: Auflösen von nackten Spezifikatoren

Unser index.html enthält eine Importkarte, um Backmodulspezifizierer zu verarbeiten:

<script type="importmap">
  {
    "imports": {
      "@vaadin/router": "/web_modules/@vaadin/router.js",
      "lit-element": "/web_modules/lit-element.js"
    }
  }
</script>
<reddit-pwa-app></reddit-pwa-app>

reddit-pwa-app.js :

 import {litelement, html} aus 'lit-Element';

Klasse RedditpwaApp erweitert Litelement {
  render () {
    kehren Sie html` zurück<h1 id="Hallo-Welt"> Hallo Welt!</h1> `;
  }
}

CustomElements.Define ('Reddit-Pwa-App', RedditpwaApp);

Karten importieren, lösen Sie das Problem mit dem Bare Modul Specifier, sodass die Browserkompatibilität ohne komplexe Build -Prozesse ermöglicht werden kann.

Servicearbeiter: Offline -Funktionalität

Um den Offline -Zugriff zu aktivieren, implementieren wir einen in index.html registrierten Service Worker ( sw.js ):

 if ('Serviceworker' im Navigator) {
  window.addeventListener ('laden', () => {
    navigator.serviceworker.register ('./ sw.js');
  });
}

Der Service Worker hat die Vermögenswerte vor dem Cach vor und gewährleistet die Offline-Funktionalität. Pika vereinfacht dies durch eine klare Liste von Vermögenswerten. (Siehe Github Repo für sw.js -Details).

KV -Speicher: Offline -Daten Persistenz

Um Beiträge offline zu sparen, verwenden wir KV Storage, ein integriertes Modul, das über IndexedDB gelagert ist. Es bietet asynchrone Operationen und eine verbesserte Leistung gegenüber LocalStorage. Eine Polyfill wird verwendet, um eine breitere Browserunterstützung zu gewährleisten. (Siehe Github Repo für Implementierungsdetails).

Polyfilling mit Importkarten

Die KV-Speicherpolyfill ( kv-storage-polyfill ) ist über die Importkarte enthalten und verwaltet, wodurch ein Fallback-Mechanismus bereitgestellt wird, wenn der native KV-Speicher nicht verfügbar ist.

Abschluss

Dieses Projekt zeigt, dass eine funktionale PWA mit minimalen Abhängigkeiten aufgebaut wird und die Vorteile moderner Webstandards und einen baulosen Ansatz hervorhebt. Während alternative Build -Tools vorhanden sind, priorisiert diese Methode Einfachheit und einfache Zugriff. Das GitHub -Repository bietet die vollständige Codebasis für die weitere Erkundung. Feedback und Diskussion sind auf Twitter (@passle_ oder @openwc) und Open-Wc.org willkommen.

Anerkennung:

Besonderer Dank geht an Guy Bedford (ES-Module-Shims), Luke Jackson ("Bauen Sie diese App nicht!"), Benny Powers und Lars den Bakker für ihre Beiträge.

Das obige ist der detaillierte Inhalt vonOhne bauen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!