wc-pwa/index.html at master · sskoopa/wc-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
<!doctype html>
<html>
  <head>
    <title>Web Component PWA App Shell Example</title>
    <link rel="stylesheet" media="all" href="/css/main.css"/>
  </head>
  <body>
    <ul>
      <li>
        <!-- simplest possible <a> tag for the app-router -->
        <a href="/" onclick="return route('/');">Home</a>
      </li>
      <li>
        <a href="/page2" onclick="return route('/page2');">Page 2</a>
      </li>
      <li>
        <a href="/products/foo" onclick="return route('/products/foo');">Products: Foo</a>
      </li>
      <li>
        <!-- web component attempt for link component for app-router, still not working -->
        <pushstate-anchor href="/products/bar">products/bar</pushstate-anchor>
      </li>
      <li>
        <a is="pushstate-anchor" href="/products/baz">baz</a>
        <!-- This only works in Chrome? -->
      </li>
    </ul>
    <app-router mode="pushstate" trailingSlash="ignore">
      <!-- matches an exact path -->
      <app-route path="/" import="/pages/home-page.html" template></app-route>

      <!-- matches an exact path -->
      <app-route path="/page2" import="/pages/page-2.html" template></app-route>

      <!-- matches using a path variable -->
      <app-route path="/products/:productName" import="/pages/product-name.html"></app-route>

      <!-- matches everything else -->
      <app-route path="*" import="/pages/not-found-page.html" template></app-route>
    </app-router>
    <footer>Footer: PWA Appshell demo with native web components</footer>
    <script src="/scripts/shadow-render.js"></script><!-- the shadow dom render shim -->
    <script src="/scripts/router.js"></script><!-- the app-router and app-route component definitions -->
    <script src="/scripts/ps-anchor.js"></script><!-- the ps-anchor web component definition -->
    <script>
      //simple global route() helper function
      function route(val, options) {
        document.querySelector('app-router').go(val, options);
        return false;
      }
      //make sure the pushstate is set up correctly, and the correct page is rendered if this page was served on a different route
      route(window.location.pathname);
    </script>
  </body>
</html>