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>
