Aller à la création

Les relations à longue distance impliquent souvent des vols fréquents. Pendant ces vols, l'idée de rattraper son retard sur Reddit devient attrayante. Au lieu de rechercher une application Reddit hors ligne, j'ai décidé de créer la mienne, présentant des technologies Web modernes et une approche de développement "Bustulsless".

Cet article célèbre les développeurs Web innovants et leurs contributions. Bien qu'il ne s'agisse pas d'un tutoriel étape par étape, le code complet est disponible sur GitHub.

L'objectif est un lecteur Reddit, minimisant les outils et les dépendances. Nous utiliserons:

• Lietelement: un modèle de composant léger et facile à utiliser tirant parti des composants Web.
• @ Vaadin / routeur: un routeur compact avec une grande expérience de développeur.
• @ PIKA / Web: simplifie la gestion des modules pendant le développement.
• ES-Dev-Server: un serveur de développement simple (bien que tout serveur HTTP fonctionne).

Nous tirons également parti des normes de navigateur: modules ES, composants Web, cartes d'importation, stockage KV et travailleurs de services.

Installation de dépendance:

 npm i -s lit-element @ vaadin / routeur
npm i -d @ pika / web es-dev-server

Ajoutez un script postinstall à package.json :

 "scripts": {
  "démarrer": "es-dev-server",
  "Postinstall": "Pika-Web"
}

Pika: rationalisation des dépendances

PIKA (par Fred K. Schott) simplifie le développement Web, installant les dépendances en tant que fichiers JavaScript individuels dans un web_modules/ répertoire. Cela simplifie le processus et évite les configurations de construction complexes. La sortie ressemble:

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

Cartes d'importation: résoudre les spécificateurs nus

Notre index.html comprend une carte d'importation pour gérer les spécificateurs du module nu:

<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} à partir de «lit-element»;

classe redditpwaApp étend LitElement {
  rendre() {
    retourner html`<h1 id="Bonjour-le-monde"> Bonjour le monde!</h1> `;
  }
}

CustomElements.define («reddit-pwa-app», redditpwaapp);

Les cartes d'importation résolvent le problème du spécificateur du module nu, permettant la compatibilité du navigateur sans processus de construction complexes.

Travailleurs de services: fonctionnalité hors ligne

Pour permettre un accès hors ligne, nous mettons en œuvre un travailleur de service ( sw.js ) enregistré dans index.html :

 if ('ServiceWorker' dans Navigator) {
  window.addeventListener ('Load', () => {
    Navigator.ServiceWorker.Register ('./ Sw.js');
  });
}

Le travailleur des services pré-cache des actifs, assurant des fonctionnalités hors ligne. Pika simplifie cela en fournissant une liste claire des actifs. (Voir GitHub Repo pour les détails sw.js ).

Stockage KV: persistance des données hors ligne

Pour enregistrer les publications hors ligne, nous utilisons KV Storage, un module intégré superposé en haut de IndededDB. Il offre des opérations asynchrones et des performances améliorées sur LocalStorage. Un polyfill est utilisé pour assurer un support de navigateur plus large. (Voir GitHub Repo pour les détails de l'implémentation).

Polyfilant avec cartes d'importation

Le KV Storage Polyfill ( kv-storage-polyfill ) est inclus et géré via la carte d'importation, fournissant un mécanisme de secours si le stockage KV natif n'est pas disponible.

Conclusion

Ce projet démontre la création d'un PWA fonctionnel avec des dépendances minimales, mettant en évidence les avantages des normes Web modernes et une approche inutile. Bien qu'il existe des outils de construction alternatifs, cette méthode privilégie la simplicité et la facilité d'accès. Le référentiel GitHub fournit la base de code complète pour une exploration plus approfondie. Les commentaires et la discussion sont les bienvenus sur Twitter (@passle_ ou @openwc) et open-wc.org.

Remerciements:

Un merci spécial à Guy Bedford (ES-module-shims), Luke Jackson ("Ne construisez pas cette application!"), Benny Powers et Lars den Bakker pour leurs contributions.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!