Merge pull request #12 from pwa-builder/variousImprovements

various improvements
pwa-builder · Nov 9, 2020 · dc4d2ad · dc4d2ad
2 parents eabcfe8 + 98c8ec1
commit dc4d2ad
Show file tree

Hide file tree

Showing 11 changed files with 2,852 additions and 844 deletions.
diff --git a/README.md b/README.md
@@ -1,12 +1,15 @@
 # pwa-starter
 
+<img loading="lazy" alt="an image of what the starter looks like" src="https://github.com/pwa-builder/pwa-starter/raw/master/assets/readme/intro.png"/>
+
 Welcome to the [PWABuilder](https://www.pwabuilder.com/) pwa-starter! Looking to build a new [Progressive Web App](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps) and not sure where to get started? This is what you are looking for! The pwa-starter includes everything you need to start building a production ready PWA and follows all best practices. You get:
 
 - lazy-loaded routes using [@vaadin/router](https://vaadin.com/router).
 - A 100 on [Lighthouse](https://developers.google.com/web/tools/lighthouse/), giving you a great starting point for performance and accessibility.
 - Use [lit-element](https://lit-element.polymer-project.org/) to build your PWA. lit-element gives you all of the developer experience of React with all   the benefits of Web Components such as smaller bundles for faster load times.
 - Includes the [PWABuilder pwa-install component](https://github.com/pwa-builder/pwa-install#pwa-install) for an app store like PWA install experience.
 - [Workbox](https://developers.google.com/web/tools/workbox/) for service workers along with the [PWABuilder pwa-update component](https://github.com/pwa-builder/pwa-update#pwa-update) to give your PWA a great offline experience.
+- [FAST Components](https://www.fast.design/docs/components/getting-started/) for awesome, pre-built components using the Fluent Design Language.
 
 **[Live Demo](https://pwa-starter-demo.glitch.me/)**
 

diff --git a/assets/readme/intro.png b/assets/readme/intro.png
diff --git a/index.html b/index.html
@@ -11,7 +11,7 @@
   <meta name="viewport"
     content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
   <meta name="description" content="This is a PWA Starter app">
-  <meta name="theme-color" content="#686bd2">
+  <meta name="theme-color" content="#E1477E">
 
   <!-- These meta tags are Apple-specific, and set the web application to run in full-screen mode with a black status bar. Learn more at https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html-->
   <meta name="apple-mobile-web-app-capable" content="yes">
@@ -24,6 +24,9 @@
   <!-- Imports the manifest to represent the web application. A web app must have a manifest to be a PWA. -->
   <link rel="manifest" href="manifest.json">
 
+  <!-- Microsoft Fast Components https://www.fast.design/docs/components/getting-started-->
+  <script type="module" src="https://unpkg.com/@microsoft/fast-components"></script>
+
   <!-- A stylesheet to design the pages. -->
   <link href="styles/global.css" rel="stylesheet">
 
@@ -33,11 +36,13 @@
 
 <body>
   <!-- Our app-index web component. This component is defined in src/pages/app-index.ts-->
-  <app-index></app-index>
+  <fast-design-system-provider use-defaults>
+    <app-index></app-index>
+  </fast-design-system-provider>
 
-   <!-- For more info on the pwa-update component click here https://github.com/pwa-builder/pwa-update -->
-   <script type="module" src="https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate"></script>
-   <pwa-update offlineToastDuration="0" swpath="pwabuilder-sw.js"></pwa-update>
+  <!-- For more info on the pwa-update component click here https://github.com/pwa-builder/pwa-update -->
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate"></script>
+  <pwa-update offlineToastDuration="0" swpath="pwabuilder-sw.js"></pwa-update>
 </body>
 
 </html>
diff --git a/manifest.json b/manifest.json
@@ -3,10 +3,10 @@
   "display": "standalone",
   "start_url": "/",
   "short_name": "starter",
-  "theme_color": "#686bd2",
+  "theme_color": "#E1477E",
   "description": "This is a PWA Starter app",
   "orientation": "any",
-  "background_color": "#686bd2",
+  "background_color": "#E1477E",
   "related_applications": [],
   "prefer_related_applications": false,
   "icons": [
@@ -42,5 +42,8 @@
     "Cross Platform",
     "fast",
     "simple"
+  ],
+  "categories": [
+    "utility"
   ]
 }