Nachos Pillage Milwaukee

    d2-wc-poc
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.159 • Public • Published

    UL Web Components POC [alpha]

    The PWA Toolkit is a starting point for building Progressive Web Apps using Ionic and Stencil. This combination of tools gives you the ability to build a fast, efficient PWA out of the box.

    Note: This project is Alpha and uses a beta release of @ionic/core.

    For more info check out our homepage!

    Features

    • @ionic/core for the UI.
    • Stencil for the application logic and routing
    • Push Notifications setup
    • Unit Tests
    • Pre-rendering
    • Lazy-loading and code splitting
    • Intelligent Polyfills
    • Modern mode: ES6/ESM for new browser, ES5 for older
    • Service Worker, App manifest, iOS meta tags
    • Theming using CSS variables

    Getting Started

    To start building, clone this repo to a new directory, install and run:

    git clone https://bitbucket.org/d2_website_repositories/d2_webcomponents_poc.git d2-wc-poc
    cd d2-wc-poc
    npm i
    npm start

    To start storybook in another terminal:

    npm run storybook

    Git Conventions

    1. Use Git Flow.
    2. Always prefix commits with one of: Feature | Fix | Chore.
    3. Always use the word "should" in a Fix commit message.

    Examples:

    git commit -m"Feature: Added tests for Hero component"
    git commit -m"Fix: Hero component should support img alt attribute"
    git commit -m"Chore: Improved comments in Hero component

    Production

    To build for production, run:

    npm run build

    A production build includes:

    • Minified code bundles
    • Generated Service workers
    • App manifest

    Ignore everything below...


    Hosting

    Apps should be hosted on through HTTPS, and if possible, through a provider that supports HTTP2. One provider that does support this is Firebase Hosting.

    H2 Push

    We recommend setting up HTTP2 Push on Firebase. H2 Push may sound complicated, but it's actually a simple concept. To learn about it, take a look at this article.

    To set this up for my-app:

    • Do a production build of the app: npm run build
    • Serve your WWW folder locally using a local http server and open in your browser.
    • Open the DevTools and look at the network tab.
      • Reload the page and you should see all of your files show up in the network tab. Excluding the sw.js file, these are the files you want to H2 push.
    • List these files in the link headers of your firebase.json file. For a syntax reference, review this article

    Service Workers

    Service workers are generated via the Stencil build tool. For more information on how they can be configured, see the Service Worker docs.

    Developing with a Service Worker

    For most cases, you'll want to develop your app without generating a Service Worker. But if you'd like to test out Web Push Notifications or Background Sync, you'll need to have one generated. To generate a Service Worker during dev builds, we've added the npm script:

    npm run start.sw
    

    This will start a dev build and generate a Service Worker as well.

    Unit Tests

    To run the unit tests once, run:

    npm test

    To run the unit tests and watch for file changes during development, run:

    npm run test.watch

    Testing your PWA's performance

    We recommend using https://www.webpagetest.org/easy with the Run Lighthouse Audit option turned on. This will give you an in depth look into your app's load performance on the average device connected to the average network. For more info on how to use webpagetest check out this article

    Writing mediaqueries using bootstrap's sass mixins

    Refer: https://getbootstrap.com/docs/4.3/layout/overview/#responsive-breakpoints

    Example:

    @import '../../global/common/sass/config';
    
    
    aup-card {
    
        .hello {
            font-size: 50px;
            color: red;
        }
    
        @include media-breakpoint-up(lg) {
            .hello {
                font-size: 130px;
                color: pink;
            }
        }
    }
    

    Keywords

    none

    Install

    npm i d2-wc-poc

    DownloadsWeekly Downloads

    4

    Version

    0.0.159

    License

    LicenseRef-LICENSE

    Unpacked Size

    3.51 MB

    Total Files

    564

    Last publish

    Collaborators

    • georgeadamson
    • isabellewis