PWA (Progressive Web App) init, un exemple fonctionnel

   ·    ·   Aucun commentaire

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

Les éditeurs ou IDE indispensables

   ·    ·   Aucun commentaire

1 Atom https://atom.io + package Pymakr

est exempt de bug pour le développement micropython ou sous Pycom

 

2 Thonny https://thonny.org

idéal si vous débutez le développement ESP32 ou ESP8266

 

3 Studio Code https://code.visualstudio.com

pour tous autres langages de programmation (pour ma part surtout javascript) ou

pour tous frameworks type electronjs, Cordova, nodejs, Meteorjs (mais l'extension Pymakr pour Visual Studio Code a un bug)

 

4 Eclipse PHP IDE https://www.eclipse.org/pdt

j'aime bien pour gérer et développer mes projets PHP "from scratch" et sans auto-complétion.

TTGO oled ESP32 et SSD1306

   ·    ·   Aucun commentaire

Une librairie SSD1306 pour TTGO oled ESP32 qui fonctionne. 


from machine import SoftI2C, Pin
import ssd1306

# ESP32 Pin assignment
i2c = SoftI2C(scl=Pin(22), sda=Pin(21))

# ESP8266 Pin assignment
#i2c = I2C(-1, scl=Pin(5), sda=Pin(4))

oled_width = 128
oled_height = 64
oled = ssd1306.SSD1306_I2C(oled_width, oled_height, i2c)
oled.fill(0)
oled.text('Hello, World 1!', 0, 0)
oled.text('Hello, World 2!', 0, 10)
oled.text('Hello, World 3!', 0, 20)
oled.show()

# # If you need to disable oled in production environment
# from machine import SoftI2C, Pin
# import ssd1306
# 
# # ESP32 Pin assignment
# i2c = SoftI2C(scl=Pin(22), sda=Pin(21))
# 
# # ESP8266 Pin assignment
# #i2c = I2C(-1, scl=Pin(5), sda=Pin(4))
# 
# oled_width = 128
# oled_height = 64
# oled = ssd1306.SSD1306_I2C(oled_width, oled_height, i2c)
# oled.fill(0)
# oled.poweroff()

https://github.com/MonkeyTime/TTGO-Oled-ESP32-SSD1306-library