jsenv-template-pwa/src/main.html at main · jsenv/jsenv-template-pwa · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!doctype html>
<html lang="en">
  <head>
    <title>PWA Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="Progressive Web Application template using jsenv"
    />
    <meta name="theme-color" content="#d3d3d3" />
    <link rel="icon" href="./icons/favicon.png" />
    <link rel="manifest" href="./pwa.webmanifest" />
    <link rel="apple-touch-icon" href="./logo.png" />
    <!--
      Tell browser to start fetching theses ressources right now:
      - The font
      - CSS and JS used to load the app (main.css + main.js)
      - CSS and JS of the app (app.css + app.js)
    -->
    <link
      rel="preload"
      href="./roboto_v27_latin_regular.woff2"
      as="font"
      type="font/woff2"
      crossorigin
    />
    <!-- <link rel="preload" href="./main.css" as="script" crossorigin /> -->
    <link rel="preload" href="./logo.png" as="image" />
    <link rel="modulepreload" href="./main.js" />
    <link rel="preload" href="./app/app.css" as="style" />
    <link rel="modulepreload" href="./app/app.js" />

    <style>
      html,
      body {
        height: 100%;
      }

      body {
        margin: 0;
        padding: 0;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      [data-hidden] {
        display: none !important;
      }
    </style>
  </head>

  <body>
    <!-- JavaScript disabled -->
    <style>
      noscript {
        display: block;
        text-align: center;
        width: 80%;
        max-width: 640px;
        margin: auto;
      }
    </style>
    <noscript>
      <h1>JavaScript is required</h1>
      <p>This page needs JavaScript to run but JavaScript is not available</p>
    </noscript>

    <style>
      #app {
        overflow: hidden;
        font-family: Retina, sans-serif;
        font-weight: 300;
        text-align: center;
      }
      #app p {
        padding: 16px 48px;
      }
    </style>
    <div id="app" data-hidden></div>
    <script>
      window.appDisplayedPromise = new Promise((resolve, reject) => {
        window.resolveAppDisplayedPromise = resolve
        window.rejectAppDisplayedPromise = reject
      })
    </script>
    <script type="module">
      try {
        await import("./main.js")
        window.resolveAppDisplayedPromise()
      } catch (e) {
        window.rejectAppDisplayedPromise(e)
        throw e
      }
    </script>

    <!--
      Installing an early "beforeinstallprompt" event listener
      - We must listen to "beforeinstallprompt" as soon as possible or it could be missed.
      - The event is stored in window.beforeinstallpromptEvent to be used later
      See https://github.com/jsenv/pwa#add-to-home-screen
    -->
    <script>
      window.addEventListener(
        "beforeinstallprompt",
        (beforeinstallpromptEvent) => {
          beforeinstallpromptEvent.preventDefault()
          window.beforeinstallpromptEvent = beforeinstallpromptEvent
        },
      )
    </script>
  </body>
</html>