PWA (Progressive Web App) init, un exemple fonctionnel

Si vous voulez démarrer avec un site web qui peut s'installer comme application sur un smartphone (c'est une option du navigateur qui s'affiche et qui proposera l'installation), voici un petit dossier d'exemple, un petit "Hello World", pour démarrer votre projet


<!-- le code du fichier index.html -->
<!DOCTYPE html>
<html lang="fr" dir="ltr">

    <head>

    <meta name="theme-color" content="#ffffff">

    <script src="/js/https.js" type="text/javascript" async></script>

    <meta charset="utf-8">
    <link rel="manifest" crossorigin="use-credentials" href="/manifest.json">

    <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
    <meta name="viewport" content="initial-scale=1.0">

    <title>Your site title</title>

    <meta content="follow,index" name="robots">
    <meta name="description" content="Your site description">
    <meta name="keywords" content="some, thing">

    <meta name="author" content="First Name Last Name">
    <meta name="copyright" content="All rights reserved">

    <link rel="icon" type="image/png" href="/favicon.png" />
    <link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico">
    <!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" /><![endif]-->

    <meta property="og:type" content="website">
    <meta property="og:locale" content="en">
    <meta property="og:site_name" content="Site Name">
    <meta property="og:title" content="Page Title">
    <meta property="og:description" content="Page description">

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="apple-touch-icon" title="Site title" sizes="57x57" href="/touch-icon.webp">
    <link rel="apple-touch-icon" title="Site title" sizes="114x114" href="/touch-icon.webp">
    <link rel="apple-touch-icon" title="Site title" sizes="72x72" href="/touch-retina.webp">
    <link rel="apple-touch-icon" title="Site title" sizes="144x144" href="/touch-retina.webp">

    <link rel="apple-touch-icon" title="Site title" sizes="57x57" href="/touch-icon.webp">
    <link rel="apple-touch-icon" title="Site title" sizes="60x60" href="/touch-icon.webp">
    <link rel="apple-touch-icon" title="Site title" sizes="72x72" href="/touch-retina.webp">
    <link rel="apple-touch-icon" title="Site title" sizes="76x76" href="/touch-retina.webp">
    <link rel="apple-touch-icon" title="Site title" sizes="114x114" href="/touch-icon.webp">
    <link rel="apple-touch-icon" title="Site title" sizes="120x120" href="/touch-icon.webp">
    <link rel="apple-touch-icon" title="Site title" sizes="144x144" href="/touch-retina.webp">
    <link rel="apple-touch-icon" title="Site title" sizes="152x152" href="/touch-retina.webp">
    <link rel="apple-touch-icon" title="Site title" sizes="180x180" href="/touch-retina.webp">
    <link rel="icon" type="image/png" title="Site title" href="/favicon.webp" sizes="32x32">
    <link rel="icon" type="image/png" title="Site title" href="/touch-retina.webp" sizes="192x192">
    <link rel="icon" type="image/png" title="Site title" href="/touch-retina.webp" sizes="96x96">
    <link rel="icon" type="image/png" title="Site title" href="/favicon.webp" sizes="16x16">
    <link rel="icon" type="image/png" title="Site title" href="/favicon.webp" />

    <meta name="msapplication-TileColor" content="transparent">
    <meta name="msapplication-TileImage" content="/touch-retina.webp">

    <!--[if lt IE 9]><script src="/js/html5shiv.js" type="text/javascript"></script><script src="/js/respond.js" type="text/javascript"></script><![endif]-->

    </head>

     <body>

        <h1>Hello World !</h1>

    </body>

</html>


<link rel="stylesheet" type="text/css" href="/css/main.css" media="all">

<script type="text/javascript" async>
window.onload = () => {
	'use strict';
  
	if ('serviceWorker' in navigator) {
	  navigator.serviceWorker
			   .register('./sw.js');
	}
}
</script>

https://github.com/MonkeyTime/PWA-init

Laurent

Web développeur freelance et surtout autodidacte, je navigue sur le web à la recherche de technologies plutôt bien fichue et performante pour mes développement web, app (mobile et desktop) et IOT (micropython, python). Après 9 ans de développement web, j'ai enfin créé un blog 😃. Je ne poste pas beaucoup mais j'espère que çà vous sera utile.

https://monkeytime.be/fr

Écrire un commentaire

L'email renseigné ne sera pas publié sur le site.

Quelle est le troisième caractère du mot u81nd94e ? :