pwa-builder / pwabuilder Goto Github PK

The simplest way to create progressive web apps across platforms and devices. Start here. This repo is home to several projects in the PWABuilder family of tools.

Home Page: https://docs.pwabuilder.com

License: Other

CSS 0.55% JavaScript 1.85% HTML 20.45% TypeScript 75.71% Dockerfile 0.01% Nunjucks 1.44%

pwabuilder pwa web-application pwastudio pwa-vscode android app-store manifest meta-quest microsoft-store

pwabuilder's Introduction

PWABuilder

The simplest way to create progressive web apps across platforms and devices.

This repo is home to several projects in the PWABuilder family of tools.

Tools

Tools	Overview	Source	Docs	Contribute
PWABuilder.com	The best way to package PWAs for various stores.	/apps/pwabuilder	PWABuilder docs	Wiki
PWA Studio	PWA Studio makes VSCode the BEST developer environment for building Progressive Web Apps.	/apps/pwabuilder-vscode	PWA Studio docs	Wiki
PWA Starter	Our opinionated and production tested progressive web app (PWA) template for creating new projects.	Repo	PWA Starter docs	Wiki

Docs

Docs	Source	Contribute
docs.pwabuilder.com	/docs	Wiki
blog.pwabuilder.com	/apps/blog	/apps/blog

Components

Components	Overview	Source	Docs	Contribute
`<pwa-install>`	Web component for great PWA install experience	pwa-install	pwa-install	Wiki

Recommended Development setup

You will need the following things properly installed on your computer.

Node.js
NPM

You should also be familiar with TypeScript which we use for this project. This helps give you more guidance as you code from intellisense when using VSCode.

We recommend the following tools for your dev setup:

Editor: VSCode
Terminal: Windows Terminal or hyper

Additionally, when you open the project in VS Code, you'll be prompted to install recommended extensions.

Development

Navigate to the folder of the project you plan to work on (example /apps/pwabuilder), and follow the README for how to get started.

Running npm install in the project folder will automatically install and build all dependencies.

About this monorepo

This monorepo does not use a root package.json like other monorepos you might be used to. Instead, projects live in their separate folders and are mostly independent of each other.

However, when there are dependencies between projects, our tooling should automatically handle linking and dependency building when you run npm install in the project root.

For example /apps/pwabuilder has a dependency on library/site-analytics. This dependency is defined in the pwabuilder package.json like so:

  //package.json
  "dependencies": {
    "@pwabuilder/site-analytics": "file:../../libraries/site-analytics",
    ...

Running npm install in the pwabuilder folder will also run npm install and npm run build for the site-analytics project. In most cases, and unless working on a dependency, a developer will not have to worry about how these projects are linked.

For automatic linking of projects to work, ensure each project has a preinstall script like so:

  // package.json
  "scripts": {
    "preinstall": "node ../../scripts/setupDeps.js",
    ...

License

All files on the PWABuilder repository are subject to the MIT license. Please read the License file at the root of the project.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

pwabuilder's People

Contributors

Stargazers

Watchers

Forkers

bright-spark zackhall jasonshortphd kode-kitchen neojato singhsugga yuriploc mobiletainment southworks zubair-io cuulee markchipman nbellocam baicalin resilientred foobargirl kbrons peterblazejewicz kietluu marianstdt mamunhpath karayakar stammen themorgantown mvermadev chandusekhar sts0mrg0 jeisc iraminius-open-source micropatel xunzhaotech zahedbri howardwolosky ezfrica pyephyo chiukovo jmichler quangtynu druhin13 muhammadandikcahyono christianliebel 5l1v3r1 hello-pixely i-developers gierschv msgpo joel-44 paelmand paulojmorais ystallonne wesias7 boy12371 cristiandagnino ychen9fw maxzee blacklistcrew stackradiusforks relojerias-labqurzor anwaralrabee ashish168527 whoami15 deepkandoi vibethemes nhpiyash earthair beaufortfrancois fwei-io effendys ipwebgroup zhaotonggang ginger-coder emiliofernande diagramatics group-bank devbox10 lcsouzamenezes kevintcoughlin sil3ntwxlf renuacpro tun-0-9-tap-0-9 fluorescenthallucinogen open-ecosystem-development mrmyhuang diyfr capps096github odongohcoder principlewindows bolandnick18 anitcloud1 transource lyhiving c-eo dstansice vestigegroup djghostmachine benevides c4pt000 brianpap softwarehistorysociety techwithanirudh

pwabuilder's Issues

Generator: Manifest should track with the user down the page - position:fixed

We might have to hardcode the height and add a scroll bar to the manfiest box. The content can get very long.

Generator: Images are saving but not updating model on staging

Wireframes - Usage Page

Generator: Update manifest model when checkbox is checked

Generator: Next Step buttons should expand the next step and close the current

Homepage: fix spelling of manifoldjs in shell

Generator: Update manifest model when dropdown is checked

Home: Hook up Generate Now button home page

Generator: Remove cnn.com as default URL

Generator: font size

Bump body copy size from 16px to 14px. Looks quite cluttered at 16px currently.

Generator: Confirm all checkboxes are properly hooked up to model

Generator: Allow custom fields to accept values accepted by JSON

Can send sanitized data to JSON.parse and render the contents of that.

Member Name - The name of the custom extension to be added to the manifest. It is recommended that custom member names use a vendor prefix.

Member Value - The value of the custom extension. You can enter numeric values, string values enclosed in quotes, or a JSON formatted string for complex values. If you specify a JSON string, remember to enclose the value in braces.

Homepage: logo sizes at breakpoints

"Logo size consistency -- we need to define a natural size to the logo so that it appears consistent across breakpoints on devices"

Generator: Confirm all text fields have an action for focus-out

Generator: Delete empty properties from serialized manifest

If a manifest property is set to null, should the API remove it from the manifest or should the client not send it to the API. We should probably be consistent about where we handle these rules.

Generator: Change "Next Step" copy on first button

Generator: Make warnings heading red

Generator: Add supported platform icons back to App Store Details section

See the http://hostedappbuilder.azurewebsites.net/

Wireframe - Documentation Page

API: Custom values are not saved when uploading a manifest

Generator: Stop Prism from blocking an update to the manifest preview

Generator: Ensure save happens before updating model from server or allowing build download link click

We should probably have a "Saving..." indicator while the save is happening.

The model is currently be reset with what is returned from the server, but it should match what's in the model so I'm not sure it really needs done.

The build download link should be disabled during the save. This will prevent the user from clicking download before it saves.

Wireframe - About Page

First pass at the About page

Feature: Add drag and drop uploads to Generator

Wireframe - Landing Page

Here's the first pass at the landing page.

Generator: Add global styling for file input

This is a potential approach to handling the styling. The small JavaScript portion could be added to file-input component.

http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/

Homepage/Nav: Open Github in new window

API: Cannot delete custom values

Generator: Set dropdown defaults and remote option for empty values

Defaults should be:

"display": "fullscreen"
"orientation": "any"

Generator: Add client-side validation to fields

Generator: Add tool tips to explain the available capabilities and custom values

Generator: Add link to Download your package step to take user to /usage

Something like "Learn how to distribute this package across different platforms"

Generator: Add cursor: not-allowed to disabled step titles

Default anchor cursor is overriding.

Wireframe - Contribute Page

Super super basic first pass at contribute. Based heavily off of bower and grunt's:

Site: Add general styling for HTML table

Table will currently be used to list the custom values and the list of icons.

Generator: Clear out upload icon text field

Can also change this field to type=url.

Site: Set the page background color to black so that there isn't a white bar under the footer on short pages

Generator: Allow dropdown values to be set to empty so fields can be cleared

Generator: Suggestions and warnings notification

Talked with @ryanbillingsley and thinking we might put a suggestions and warning header right under the w3c manifest header to let you know that you have suggestions and warnings. Just something like "Suggestions (2), Warnings (3)" with Suggestions and Warning having the appropriate colors.