Meilleures pratiques de mise en cache

0
0
0

Un utilisateur a demandé 👇

Salut,

Il y a quelque chose qui ne va pas dans ma demande avec le arrangement précurseur.

Si je dĂ©finis un itinĂ©raire prĂ©curseur comme suit, sans mise en page, l’application ne fonctionnera pas hors ligne car elle examine le script tĂ©lĂ©chargĂ© lors de son exĂ©cution hors ligne.

wp_register_service_worker_precaching_route('/wp-content/themes/astra-child/style.css',$args);

Ensuite, je dois dĂ©finir un itinĂ©raire prĂ©curseur comme suit pour que l’application fonctionne correctement hors ligne :

wp_register_service_worker_precaching_route('/wp-content/themes/astra-child/style.css?ver=1.0.0',$args);

Je dois donc inclure une version pour chaque fichier de script (.js, .css) de son prĂ©dĂ©cesseur. Cela signifie que je devrai Ă©diter les thèmes enfants. fonctions.php chaque fois que l’un de ces scripts de version est mis Ă  jour.

Veuillez indiquer comment le mettre en œuvre. bonnes pratiques de prévention.

Merci d’avance pour votre aide.


(@westonruter)

il y a 1 an, 2 mois

Oui, c’est banal.

La meilleure chose Ă  faire est de ne pas ajouter manuellement la version Ă  l’URL prĂ©vue et de laisser WordPress la gĂ©nĂ©rer pour vous.

Voici un plugin autonome que vous pouvez utiliser : https://gist.github.com/westonruter/caa6e08b8d1f70cd3ddab1064d7d1bc2

ExĂ©cuter ce code de plugin et supposer qu’il y a un identifiant programmĂ© dans la feuille de style de votre thème astra-child-stylevous pouvez alors le marquer pour la prĂ©dication en procĂ©dant comme suit :

wp_style_add_data( 'astra-child-style', 'precache', true )

Cela devrait être appelé correctement après avoir enregistré la feuille de style.


(@westonruter)

il y a 1 an, 2 mois

si l’intĂ©gration” est incluse avec le plugin, elle le fait Ă©galement, mais elle n’est pas activĂ©e par dĂ©faut : https://github.com/xwp/pwa-wp/blob/0.3.0/integrations/class-wp-service-worker- styles-integration.php

Mais l’intĂ©gration nĂ©cessite plus de travail je pense. Bien sĂ»r, le plugin PWA en gĂ©nĂ©ral est toujours un travail en cours. Un travail est nĂ©cessaire pour comprendre les meilleurs modèles pour les auteurs de thèmes/plugins afin de fournir une bonne expĂ©rience de dĂ©veloppement. Nous ne voulons pas ajouter trop d’abstractions au dĂ©but et nous concentrer sur les composants de base. C’est pourquoi l’intĂ©gration n’est pas activĂ©e par dĂ©faut, et ils sont plus expĂ©rimentaux que le reste du plugin.


(@jimador)

il y a 1 an, 2 mois

Salut Weston,

Merci pour votre réponse rapide et pour avoir pris connaissance de ces deux options pour le correctif précurseur. Je vais tout de suite passer en revue ces deux stratégies et sélectionner celle qui convient le mieux à mon projet.

La documentation du plugin ne dit pas grand-chose sur les arguments requis lors de l’utilisation wp_register_service_worker_precaching_route()il mentionne seulement que l’argument du “rĂ©examen” est sĂ©lectif.

Que se passe-t-il si je veux faire expirer le cache de fichiers pour le chemin parent comme suit ?

$args = array(
			'strategy'   => WP_Service_Worker_Caching_Routes::STRATEGY_CACHE_FIRST,
			'cacheName'  => 'precaching',
			'plugins'    => array(
			'expiration' => array(
					'maxEntries'    => 50,
					'maxAgeSeconds' => 60 * 60 * 24 * 180
					),
				),
			);

Ces arguments sont-ils inutiles ou invalides lors de l’utilisation de la fonction prĂ©curseur ?

Merci d’avance pour votre aide.


(@westonruter)

il y a 1 an, 2 mois

Ces arguments ne se rĂ©fèrent pas Ă  la prĂ©dication. Ils s’appliquent uniquement Ă  la mise en cache au moment de l’exĂ©cution.

Si vous souhaitez remplacer un fichier par dĂ©faut, modifiez simplement la rĂ©vision. Donc ici, je ne ferais qu’augmenter la version de la feuille de style.


(@jimador)

il y a 1 an, 2 mois

Salut Weston,

Merci pour les éclaircissements sur les arguments de la prédication.

Votre plugin est excellent et je veux continuer Ă  l’utiliser autant que possible. Notre application est presque prĂŞte et nous n’avons pas encore installĂ© de plugins supplĂ©mentaires. En fait, notre application va au-delĂ  de la validation Lighthouse PWA.

Pour répondre à votre recommandation, nous avons activé les deux intégrations expérimentales suivantes :

add_theme_support(
	'service_worker',
	array(
		'wp-site-icon'         => false,
		'wp-custom-logo'       => false,
		'wp-custom-header'     => false,
		'wp-custom-background' => false,
		'wp-scripts'           => true,
		'wp-styles'            => true,
		'wp-fonts'             => false,
	)
);

Le problème de mise en cache persiste après l’activation de ces deux intĂ©grations. L’application fonctionne hors ligne au moment de l’installation, mais pas après quelques heures d’installation. 4 des 18 fichiers de script (css/js) ne sont pas servis hors ligne. Ces 4 scripts traitent des ressources du thème principal Astra. Le reste des fichiers de l’application est servi hors ligne (pages/images/css/js).

Je suppose que ces intégrations de plugins sont très utiles pour mon projet, mais je ne sais pas à quoi elles sont destinées.

Nous avons besoin d’une solution au problème des prĂ©curseurs et nous voulons absolument tester ces intĂ©grations sans utiliser d’autres plugins tiers.

Merci d’avance pour vos conseils Ă  ce sujet.

Cette réponse a été modifiée il y a 1 an et 2 mois.


(@westonruter)

il y a 1 an, 2 mois

Oui, je ne recommande pas d’utiliser les intĂ©grateurs expĂ©rimentaux. Au lieu de cela, vous pouvez copier le code que j’ai mentionnĂ© ci-dessus dans l’essentiel que j’ai Ă©crit : https://gist.github.com/westonruter/caa6e08b8d1f70cd3ddab1064d7d1bc2


(@jimador)

il y a 1 an, 2 mois

Salut Weston,

Merci d’avoir Ă©crit le plugin PWA Precache Styles.

J’ai dĂ©sactivĂ© les intĂ©grateurs expĂ©rimentaux et dĂ©jĂ  installĂ© et activĂ© ce nouveau plugin. J’ai implĂ©mentĂ© les changements suivants dans le script functions.php du thème enfant :

function child_enqueue_styles() {

	wp_enqueue_style( 'astra-child-theme-css', get_stylesheet_directory_uri() . '/style.css', array('astra-theme-css'), CHILD_THEME_ASTRA_CHILD_VERSION, 'all' );
	wp_style_add_data( 'astra-theme-css', 'precache', true );
	wp_style_add_data( 'astra-child-theme-css', 'precache', true );

}

J’ai ensuite extrait les deux lignes suivantes du script functions.php :

wp_register_service_worker_precaching_route('/wp-content/themes/astra-child/style.css');
wp_register_service_worker_precaching_route('/wp-content/themes/astra/assets/css/minified/style.min.css');

Ces deux scripts fonctionnent maintenant hors ligne comme prĂ©vu, mais les trois scripts suivants restent non servis lorsque l’application est hors ligne :

/wp-content/themes/astra/assets/css/minified/menu-animation.min.css?ver=2.0.1
/wp-content/themes/astra/assets/js/minified/flexibility.min.js?ver=2.0.1
/wp-content/themes/astra/assets/js/minified/style.min.js?ver=2.0.1

Veuillez noter que le numĂ©ro de version de ces liens de script html se trouve sur les pages de l’application.

Tous les fichiers sans numéro de version sont verrouillés pour empêcher de futures tentatives de maintenance. Ces trois scripts sans service hors ligne sont consignés comme suit, sans version. 

wp_register_service_worker_precaching_route('/wp-content/themes/astra/assets/css/minified/menu-animation.min.css');
wp_register_service_worker_precaching_route('/wp-content/themes/astra/assets/js/minified/flexibility.min.js');
wp_register_service_worker_precaching_route('/wp-content/themes/astra/assets/js/minified/style.min.js');

Je tiens Ă  souligner que ces trois scripts sont servis hors ligne si vous n’incluez pas le numĂ©ro de version dans l’URL, mais les liens du script de page vers les scripts de version.

Merci d’avance pour votre aide.


(@westonruter)

il y a 1 an, 2 mois

Je ne recommande pas d’ignorer la version de l’actif, car cela entraĂ®nera des difficultĂ©s Ă  envoyer des mises Ă  jour aux visiteurs.

Votre site est-il publiquement disponible pour les tests ?


(@jimador)

il y a 1 an, 2 mois

Salut Weston,

Merci pour votre suggestion.

J’ai dĂ©couvert une application au comportement Ă©trange aujourd’hui. Mon application a un Ă©lĂ©ment de lien back-javascript [<] dans le menu de navigation du haut en exĂ©cutant le code suivant : javascript: history.go(-1);. Si vous naviguez dans l’application Ă  l’aide de cet Ă©lĂ©ment de lien, tous les fichiers prĂ©curseurs s’affichent parfaitement hors ligne. Cependant, si vous visitez les mĂŞmes pages d’application en utilisant les Ă©lĂ©ments de menu respectifs, les scripts mentionnĂ©s ci-dessus (css/js) ne sont pas dĂ©connectĂ©s.

Je vais demander Ă  mon client la permission de faire de la publicitĂ© pour l’application.

Merci encore pour votre aimable aide.


(@westonruter)

il y a 1 an, 2 mois

Le stockage de la mĂ©moire se ferait en utilisant le cache mĂ©moire au lieu du cache du service worker, c’est pourquoi je pense que cela semble fonctionner pour le moment.


(@jimador)

il y a 1 an, 2 mois

Salut Weston,

Le rendu hors connexion des Ă©lĂ©ments par dĂ©faut Ă©choue, mĂŞme lorsque l’Ă©lĂ©ment possède le numĂ©ro de version par dĂ©faut :

wp_register_service_worker_precaching_route('/wp-content/themes/astra/assets/css/minified/menu-animation.min.css?ver=2.0.1&__WB_REVISION__=2.0.1');

Merci d’avance pour votre aide.


(@westonruter)

il y a 1 an, 2 mois

@jimador Au lieu de prĂ©dire des actifs spĂ©cifiques, essayez d’utiliser la mise en cache d’exĂ©cution. Utilisez le code de ce plugin, par exemple : https://gist.github.com/westonruter/1a63d052beb579842461f6ad837715fb

La merde rythmique est généralement meilleure que la prédication parce que :

Service Worker n’a pas besoin de rĂ©installer pour obtenir une ressource mise Ă  jour. Vous pouvez utiliser une stratĂ©gie de mise en cache du rĂ©seau d’abord qui facilite la visualisation des modifications (plutĂ´t qu’une prĂ©caution qui est toujours le cache d’abord). Il ne stocke que les fichiers que l’utilisateur tĂ©lĂ©charge.

Veuillez noter que vous devrez naviguer vers au moins une page supplémentaire après être arrivé sur un site pour que les actifs soient ajoutés au cache. Cette exigence sera supprimée par https://github.com/xwp/pwa-wp/issues/180


(@jimador)

il y a 1 an, 2 mois

Salut Weston,

Mon application doit avoir des fonctionnalitĂ©s de base lors de sa première installation, mĂŞme si l’utilisateur ne parcourt pas ses pages après l’installation. Autant que je sache, c’est Ă  cela que sert la prĂ©dication.

Nous savons que les actifs en question sont dans le cache car ils peuvent ĂŞtre rĂ©cupĂ©rĂ©s hors ligne par le navigateur s’ils sont accessibles directement Ă  l’aide de l’URL respective, mais pour une raison quelconque, ils ne seront pas servis par l’opĂ©rateur de service. Nous testerons le plugin par dĂ©faut dans les prochains jours avant d’utiliser le cache d’exĂ©cution.

Je sais que vous ne devriez pas devancer trop d’actifs, mais je veux savoir si votre plugin PWA a des limites par dĂ©faut ?

Encore une fois, merci pour votre aide.

Cette réponse a été modifiée il y a 1 an et 2 mois par.


(@westonruter)

il y a 1 an, 2 mois

Il n’y a pas de limite par dĂ©faut au nombre de fichiers par dĂ©faut imposĂ©s par le plugin (autre que le sac de couture).

Pour que la prédication fonctionne, je peux accéder à un style.css fichier hors ligne en utilisant le plugin mentionné ci-dessus : https://gist.github.com/westonruter/caa6e08b8d1f70cd3ddab1064d7d1bc2

Quand je suis actif avec Twenty Nineteen, j’ajoute juste cette ligne :

wp_style_add_data( 'twentynineteen-style', 'precache', true );

Dans la console (avec WP_DEBUG activé) Je vois :

Mise en cache du fichier Workbox 3. Recherchez les nouvelles URL de prédécesseur.
https://wordpressdev.lndo.site/core-dev/src/wp-content/themes/twentynineteen/style.css?ver=1.4&__WB_REVISION__=1.4
…

Je peux me déconnecter et accéder à : https://wordpressdev.lndo.site/core-dev/src/wp-content/themes/twentynineteen/style.css?ver=1.4

Dans le build service worker, je vois :

// IIFE is used for lexical scoping instead of just a braces block due to bug in Safari.
( () => {
	wp.serviceWorker.precaching.precache( [
    {
        "url": "https://wordpressdev.lndo.site/core-dev/src/wp-content/themes/twentynineteen/style.css?ver=1.4",
        "revision": "1.4"
    }
// ...
] );

Et je fais style.css dossier dans le wp-/-precache-front-v1 cache dans le cache de stockage dans Chrome DevTools. Il semble donc fonctionner parfaitement.


(@jimador)

il y a 1 an, 2 mois

Salut Weston,

j’ai installĂ© ceci Styles de prĂ©cache PWA plugin il y a trois jours. Ce plugin a Ă©tĂ© activĂ© par tous les tests que nous avons effectuĂ©s depuis cette date. Les rĂ©sultats sont exactement ce que vous venez de mentionner. Tout fonctionne parfaitement lors de l’installation de l’application. Nous nous dĂ©connectons immĂ©diatement après l’installation et tout fonctionne parfaitement, tous les fichiers et scripts sont servis hors ligne. Le problème survient un jour ou deux après l’installation des applications, lorsque certains des fichiers par dĂ©faut cessent de fonctionner hors ligne.

Comme je l’ai mentionnĂ© prĂ©cĂ©demment, nous ajoutons les deux lignes de code suivantes :

wp_style_add_data( 'astra-theme-css', 'precache', true );
wp_style_add_data( 'astra-child-theme-css', 'precache', true );

Ce code commence par les deux scripts suivants :

/wp-content/themes/astra/assets/css/minified/style.min.css?ver=2.0.1&__WB_REVISION__=2.0.1
/wp-content/themes/astra-child/style.css?ver=1.0.0&__WB_REVISION__=1.0.0

Mais les scripts suivants ne sont pas automatiquement prédits :

/wp-content/themes/astra/assets/css/minified/menu-animation.min.css?ver=2.0.1
/wp-content/themes/astra/assets/js/minified/flexibility.min.js?ver=2.0.1
/wp-content/themes/astra/assets/js/minified/style.min.js?ver=2.0.1

Nous devons donc les inclure dans la liste de prédication :

wp_register_service_worker_precaching_route('/wp-content/themes/astra/assets/css/minified/menu-animation.min.css?ver=2.0.1');
wp_register_service_worker_precaching_route('/wp-content/themes/astra/assets/js/minified/flexibility.min.js?ver=2.0.1');
wp_register_service_worker_precaching_route('/wp-content/themes/astra/assets/js/minified/style.min.js?ver=2.0.1');

Nous avons essayĂ© des prĂ©curseurs sans aucune version et avons Ă©chouĂ©. Ensuite, nous essayons un prĂ©curseur avec une version comme ?ver=2.0.1&__WB_REVISION__=2.0.1 et ça n’a pas marchĂ© non plus. Maintenant, nous testons la prĂ©dication avec juste ça ?ver=2.0.1 voir si cela fonctionne.

Merci encore pour votre aide professionnelle.

Cela a-t-il résolu votre problème ?

Was this helpful?

0 / 0

Leave a Reply 0

Your email address will not be published. Required fields are marked *