-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
50 lines (47 loc) · 1.64 KB
/
index.html
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
<!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>
<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>
<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>
<script src="scripts/router.js"></script>
<script src="scripts/ps-anchor.js"></script>
<script>
function route(val, options) {
document.querySelector('app-router').go(val, options);
return false;
}
</script>
</body>
</html>