├── .eleventy.js ├── .github └── workflows │ └── azure-static-web-apps-jolly-tree-0f6b03710.yml ├── .gitignore ├── .prettierrc ├── .vscode └── settings.json ├── README.md ├── filters └── date-display.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── StoreLogo.png ├── WindowsStoreLogo.png ├── blog-card.webp ├── demo-card.webp ├── docs-card.webp ├── drawing.png ├── favicon.ico ├── favicon.png ├── logo.svg ├── microsoft-google.png ├── placeholder.png ├── pwa-linking.png ├── sub-header-background.png └── web-components.png ├── rollup.config.js ├── src ├── 404.njk ├── assets │ ├── css │ │ ├── base.css │ │ ├── card.css │ │ ├── copy.css │ │ └── tailwind.css │ └── fonts │ │ ├── Hind-Bold.ttf │ │ └── Hind-Regular.ttf ├── demos │ └── index.njk ├── docs │ ├── android │ │ ├── android-playstore-documentation │ │ │ ├── StoreLogo.png │ │ │ └── android-playstore-documentation.md │ │ ├── generating-your-android-package │ │ │ ├── analyzing.png │ │ │ ├── android-card.png │ │ │ ├── download.png │ │ │ ├── enter-url.png │ │ │ ├── generating-your-android-package.md │ │ │ ├── options.png │ │ │ └── report_card.png │ │ ├── next-steps-documentation │ │ │ └── next-steps-documentation.md │ │ ├── removing-the-browser-address-bar │ │ │ ├── asset-links-details.png │ │ │ ├── asset-links-package-id.png │ │ │ ├── google-play-signing.png │ │ │ └── removing-the-browser-address-bar.md │ │ └── updating-your-existing-app │ │ │ ├── signing-options.png │ │ │ ├── update.md │ │ │ └── version-code.png │ ├── base_package │ │ ├── download.png │ │ ├── enter-url.png │ │ ├── generate.png │ │ ├── mani-editor.png │ │ ├── mani-options.png │ │ ├── pwa-logo.png │ │ ├── report-card.png │ │ ├── sw-picker.png │ │ ├── sw-review.png │ │ ├── upload-icons.png │ │ └── webapp-to-pwa.md │ ├── index.njk │ ├── ios │ │ ├── build-your-ios-app │ │ │ └── build-your-ios-app.md │ │ ├── ios-faq │ │ │ └── ios-faq.md │ │ ├── ios-platform │ │ │ ├── ios-platform.md │ │ │ └── ios-store-logo.png │ │ └── publish-your-pwa-to-ios-app-store │ │ │ └── publish-your-pwa-to-ios-app-store.md │ └── windows │ │ ├── finding-publisher-info │ │ ├── finding-your-windows-publisher-info.md │ │ ├── required-data-from-partner-center.png │ │ └── required-data-in-pwabuilder.png │ │ ├── fixing-common-errors │ │ ├── app-name-pwabuilder.png │ │ ├── app-name.png │ │ ├── fixing-common-errors.md │ │ ├── invalid-package-id.png │ │ ├── invalid-publisher-id.png │ │ ├── not-reserved.png │ │ └── updated-package-id.png │ │ ├── image-recommendations │ │ ├── image-recommendations-for-windows.md │ │ ├── windows-image-app-icon.png │ │ ├── windows-image-display-scales.png │ │ ├── windows-image-large-tile.png │ │ ├── windows-image-medium-tile.png │ │ ├── windows-image-small-tile.png │ │ ├── windows-image-splash.png │ │ ├── windows-image-store-logo.png │ │ ├── windows-image-target-size.png │ │ ├── windows-image-wide-tile.png │ │ ├── windows-os-dark-mode.png │ │ └── windows-os-light-mode.png │ │ ├── next-steps │ │ └── next-steps.md │ │ ├── publish-new-windows-app │ │ ├── add-program.png │ │ ├── both-packages.png │ │ ├── create-app.png │ │ ├── enroll-apps.png │ │ ├── full-trust-package-man.png │ │ ├── full-trust-restricted.png │ │ ├── not-started-status.png │ │ ├── packages-new.png │ │ ├── publish-new-windows-app.md │ │ ├── start-submission.png │ │ └── win10-desktop-only.png │ │ ├── pwa-simulator │ │ ├── descriptions.png │ │ ├── manifest-template.png │ │ ├── mode2-code.png │ │ ├── pwa-simulator.md │ │ ├── store-preview.png │ │ └── url-form.png │ │ ├── update-existing-app │ │ ├── add-submission.png │ │ ├── both-packages.png │ │ ├── browse-for-package.png │ │ ├── existing-apps.png │ │ ├── full-trust-restricted.png │ │ ├── full-trust.png │ │ ├── packages.png │ │ ├── remaining-options.png │ │ ├── update-an-existing-app.md │ │ └── win10-desktop-only.png │ │ ├── what-is-classic-package │ │ └── what-is-a-classic-package.md │ │ └── windows-store-documentation │ │ ├── StoreLogo.png │ │ └── windows-store-documentation.md ├── globals │ ├── build.js │ ├── helpers.js │ ├── navigation.json │ └── site.json ├── includes │ ├── categories.njk │ ├── demos.njk │ ├── docs.njk │ ├── footer.njk │ ├── header.njk │ ├── layouts │ │ ├── basedoc.njk │ │ ├── basepost.njk │ │ ├── doc.njk │ │ ├── doccard.njk │ │ ├── home.njk │ │ ├── post.njk │ │ └── postcard.njk │ ├── posts.njk │ ├── recommended.njk │ ├── recommendeddocs.njk │ ├── sub-header.njk │ ├── taglist.njk │ └── temp │ │ ├── docs.11tydata.js │ │ └── docs.json ├── index.njk ├── posts │ ├── announcing-ios │ │ ├── announcing-ios.md │ │ ├── ios-announcement.png │ │ ├── ios-options.png │ │ ├── ios-permitted-urls.png │ │ ├── ios-publish-section.png │ │ └── ios-splash.png │ ├── announcing-vscode │ │ ├── announcing-vscode.md │ │ └── vscode-release-graphic.png │ ├── bringing-chromium-edge-pwas-to-the-microsoft-store │ │ ├── BringingChromiumEdgePWAsMicrosoftStore.jpg │ │ ├── analyzing.png │ │ ├── app_android.png │ │ ├── app_windows.png │ │ ├── bringing-chromium-edge-pwas.md │ │ ├── chromium.png │ │ ├── devtools.png │ │ ├── download.png │ │ ├── enter_url.png │ │ ├── inspect.png │ │ ├── options.png │ │ ├── publish_page.png │ │ └── report_card.png │ ├── building-a-drawing-pwa.md │ ├── building-pwas-with-web-components.md │ ├── introducing-the-brand-new-pwa-builder │ │ ├── LaunchBlogImage.jpg │ │ ├── MicrosoftStorePWAs.jpg │ │ ├── ScreenshotNewPWABuilder001.jpg │ │ ├── ScreenshotNewPWABuilder002.jpg │ │ └── introducing-the-brand-new-pwa-builder.md │ ├── manifest-previewer │ │ ├── categories.png │ │ ├── install-collage.png │ │ ├── manifest-previewer.md │ │ ├── name-collage.png │ │ ├── name-windows.png │ │ ├── share-target.png │ │ └── splashscreen.png │ ├── microsoft-and-google-team-up.md │ ├── posts.11tydata.js │ ├── posts.json │ ├── pwa-inking.md │ └── pwabuiderv3-announcement.md ├── rss.njk ├── scripts │ ├── copy.js │ └── main.js └── tags.njk ├── tailwind.config.js └── yarn.lock /.eleventy.js: -------------------------------------------------------------------------------- 1 | const siteSettings = require("./src/globals/site.json") 2 | 3 | module.exports = (config) => { 4 | const markdownIt = require("markdown-it") 5 | config.setLibrary( 6 | "md", 7 | markdownIt({ 8 | html: true, 9 | breaks: true, 10 | linkify: true, 11 | typographer: true, 12 | }) 13 | ) 14 | config.addPlugin(require("@11ty/eleventy-plugin-syntaxhighlight")) 15 | config.addPlugin(require("@11ty/eleventy-plugin-rss")) 16 | 17 | config.addFilter("dateDisplay", require("./filters/date-display.js")) 18 | config.addFilter("filterTagList", (tags) => { 19 | // should match the list in tags.njk 20 | return (tags || []).filter( 21 | (tag) => ["all", "nav", "post", "posts", "docs", "doc"].indexOf(tag) === -1 22 | ) 23 | }) 24 | config.addCollection("tagList", function (collection) { 25 | let tagSet = new Set() 26 | collection.getAll().forEach((item) => { 27 | ;(item.data.tags || []).forEach((tag) => tagSet.add(tag)) 28 | }) 29 | 30 | return [...tagSet] 31 | }) 32 | config.addPassthroughCopy({ public: "./" }) 33 | config.addPassthroughCopy("src/**/*.jpg") 34 | config.addPassthroughCopy("src/**/*.png") 35 | 36 | config.setBrowserSyncConfig({ 37 | files: ["dist/**/*"], 38 | open: true, 39 | }) 40 | 41 | config.setDataDeepMerge(true) 42 | 43 | config.addCollection("postsWithoutDrafts", (collection) => 44 | [...collection.getFilteredByGlob("src/posts/*.md")].filter( 45 | (post) => !post.data.draft 46 | ) 47 | ) 48 | 49 | config.addCollection("docsWithoutDrafts", (collection) => 50 | [...collection.getFilteredByGlob("src/docs/*.md")].filter( 51 | (docs) => !docs.data.draft 52 | ) 53 | ) 54 | 55 | config.addCollection("demosWithoutDrafts", (collection) => 56 | [...collection.getFilteredByGlob("src/demos/*.md")].filter( 57 | (demos) => !demos.data.draft 58 | ) 59 | ) 60 | 61 | return { 62 | pathPrefix: siteSettings.baseUrl, 63 | dir: { 64 | input: "src", 65 | output: "dist", 66 | includes: "includes", 67 | layouts: "includes/layouts", 68 | data: "globals", 69 | assets: "assets", 70 | }, 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /.github/workflows/azure-static-web-apps-jolly-tree-0f6b03710.yml: -------------------------------------------------------------------------------- 1 | name: Azure Static Web Apps CI/CD 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | pull_request: 8 | types: [opened, synchronize, reopened, closed] 9 | branches: 10 | - main 11 | 12 | jobs: 13 | build_and_deploy_job: 14 | if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed') 15 | runs-on: ubuntu-latest 16 | name: Build and Deploy Job 17 | steps: 18 | - uses: actions/checkout@v2 19 | with: 20 | submodules: true 21 | - name: Build And Deploy 22 | id: builddeploy 23 | uses: Azure/static-web-apps-deploy@v0.0.1-preview 24 | with: 25 | azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_JOLLY_TREE_0F6B03710 }} 26 | repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments) 27 | action: "upload" 28 | ###### Repository/Build Configurations - These values can be configured to match your app requirements. ###### 29 | # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig 30 | app_location: "/" # App source code path 31 | api_location: "api" # Api source code path - optional 32 | output_location: "dist" # Built app content directory - optional 33 | ###### End of Repository/Build Configurations ###### 34 | 35 | close_pull_request_job: 36 | if: github.event_name == 'pull_request' && github.event.action == 'closed' 37 | runs-on: ubuntu-latest 38 | name: Close Pull Request Job 39 | steps: 40 | - name: Close Pull Request 41 | id: closepullrequest 42 | uses: Azure/static-web-apps-deploy@v0.0.1-preview 43 | with: 44 | azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_JOLLY_TREE_0F6B03710 }} 45 | action: "close" 46 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Adapted from https://github.com/github/gitignore/blob/master/Node.gitignore 2 | 3 | # Logs 4 | logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | lerna-debug.log* 10 | 11 | # Diagnostic reports (https://nodejs.org/api/report.html) 12 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 13 | 14 | # Runtime data 15 | pids 16 | *.pid 17 | *.seed 18 | *.pid.lock 19 | 20 | # Directory for instrumented libs generated by jscoverage/JSCover 21 | lib-cov 22 | 23 | # Coverage directory used by tools like istanbul 24 | coverage 25 | *.lcov 26 | 27 | # nyc test coverage 28 | .nyc_output 29 | 30 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 31 | .grunt 32 | 33 | # Bower dependency directory (https://bower.io/) 34 | bower_components 35 | 36 | # node-waf configuration 37 | .lock-wscript 38 | 39 | # Compiled binary addons (https://nodejs.org/api/addons.html) 40 | build/Release 41 | 42 | # Dependency directories 43 | node_modules/ 44 | jspm_packages/ 45 | 46 | # Snowpack dependency directory (https://snowpack.dev/) 47 | web_modules/ 48 | 49 | # TypeScript cache 50 | *.tsbuildinfo 51 | 52 | # Optional npm cache directory 53 | .npm 54 | 55 | # Optional eslint cache 56 | .eslintcache 57 | 58 | # Microbundle cache 59 | .rpt2_cache/ 60 | .rts2_cache_cjs/ 61 | .rts2_cache_es/ 62 | .rts2_cache_umd/ 63 | 64 | # Optional REPL history 65 | .node_repl_history 66 | 67 | # Output of 'npm pack' 68 | *.tgz 69 | 70 | # Yarn Integrity file 71 | .yarn-integrity 72 | 73 | # dotenv environment variables file 74 | .env 75 | .env.test 76 | 77 | # parcel-bundler cache (https://parceljs.org/) 78 | .cache 79 | .parcel-cache 80 | 81 | # Next.js build output 82 | .next 83 | out 84 | 85 | # Nuxt.js build / generate output 86 | .nuxt 87 | dist 88 | 89 | # Gatsby files 90 | .cache/ 91 | # Comment in the public line in if your project uses Gatsby and not Next.js 92 | # https://nextjs.org/blog/next-9-1#public-directory-support 93 | # public 94 | 95 | # vuepress build output 96 | .vuepress/dist 97 | 98 | # Serverless directories 99 | .serverless/ 100 | 101 | # FuseBox cache 102 | .fusebox/ 103 | 104 | # DynamoDB Local files 105 | .dynamodb/ 106 | 107 | # TernJS port file 108 | .tern-port 109 | 110 | # Stores VSCode versions used for testing VSCode extensions 111 | .vscode-test 112 | 113 | # yarn v2 114 | .yarn/cache 115 | .yarn/unplugged 116 | .yarn/build-state.yml 117 | .yarn/install-state.gz 118 | .pnp.* 119 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "tabWidth": 2, 4 | "semi": false, 5 | "singleQuote": false 6 | } 7 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "markdownlint.config": { 3 | "MD028": false, 4 | "MD025": { 5 | "front_matter_title": "" 6 | } 7 | } 8 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # PWA Builder Blog 2 | 3 | [![Discord Shield](https://discordapp.com/api/guilds/732665868521177117/widget.png?style=shield)](https://discord.gg/CZ85mguYjK) 4 | 5 | America's favorite [Eleventy](https://www.11ty.dev) blog template. Built by [Reese Schultz](https://github.com/reeseschultz). 6 | 7 | View the [demo](https://reeseschultz.github.io/11r/). 8 | 9 | ## Features 10 | 11 | - [Eleventy](https://www.11ty.dev) for static site generation. See `.eleventy.js`. 12 | - [Nunjucks](https://mozilla.github.io/nunjucks/) for templating. 13 | - [TailwindCSS](https://tailwindcss.com/) for utility-first styling. See `tailwind.config.js` and `src/styles/tailwind.css`. 14 | - [Prism](https://prismjs.com/) syntax highlighting for code with copy button scripting included via [clipboard.js](https://clipboardjs.com/). See `src/styles/base.css` for the theme; and `src/scripts/copy.js`, which is used by `main.js`. 15 | - [Rollup](https://rollupjs.org) for bundling and compiling. See `rollup.config.js`.which is used by `main.js`. 16 | - [Pagination](https://www.11ty.dev/docs/pagination/). 17 | - Exemplary [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) usage. 18 | - SEO mostly done for you. Ensure you replace the data referenced in `src/globals/site.json`, including the images in `public/`. 19 | 20 | ## Setup 21 | 22 | 1. `git clone git@github.com:pwa-builder/pwabuilder-blog.git` 23 | 1. `cd pwabuilder-blog && yarn install` 24 | 1. `yarn dev` to serve the site. 25 | 1. `yarn build` to build the site. 26 | 27 | ## Tag Styling 28 | 29 | Tags are styled in `src/styles/tags.css`. Coloring custom tags works as such: 30 | 31 | ```css 32 | ... 33 | 34 | .tag.beer { 35 | @apply bg-blue-700; 36 | } 37 | 38 | .tag.spirituality { 39 | @apply bg-indigo-700; 40 | } 41 | 42 | .tag.orcas { 43 | @apply bg-purple-700; 44 | } 45 | 46 | ... 47 | ``` 48 | 49 | ## Credits 50 | 51 | - This project was forked from [11ty Starter](https://github.com/mattwaler/eleventy-starter) by [Matt Waler](https://mattwaler.com/). 52 | - The code copying script was adapted from [https://codepen.io/wilbo/pen/xRVLOj](https://codepen.io/wilbo/pen/xRVLOj) by [Wilbert Schepenaar](https://wilbert.dev/). 53 | - SEO handling was inspired from [Skeleventy](https://github.com/josephdyer/skeleventy) by [Joseph Dyer](https://github.com/josephdyer). 54 | 55 | ## Contributing 56 | 57 | Find a problem, or have an improvement in mind? Great. Go ahead and submit a pull request. Note that the maintainer offers no assurance he will respond to you, fix bugs or add features on your behalf in a timely fashion, if ever. All that said, [GitHub Issues](https://github.com/reeseschultz/11r/issues/new/choose) is fine for constructive discussion. 58 | 59 | By submitting a pull request, you agree to license your work under [this project's MIT license](https://github.com/reeseschultz/11r/blob/main/LICENSE). 60 | 61 | ## Blog Template 62 | 63 | ```md 64 | --- 65 | layout: post 66 | title: Title 67 | excerpt: Short description 68 | description: Long description 69 | date: 2021-01-01 70 | updatedDate: 2021-01-01 71 | trending: true 72 | featured: true 73 | image: placeholder.png 74 | author: 75 | name: John Doe 76 | tags: 77 | - post 78 | - template 79 | --- 80 | 81 | ### Sub title 82 | 83 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Congue quisque egestas diam in arcu cursus euismod quis. Ac auctor augue mauris augue. Convallis tellus id interdum velit laoreet id donec ultrices. Aliquam eleifend mi in nulla posuere. Pretium quam vulputate dignissim suspendisse in est. Orci sagittis eu volutpat odio facilisis mauris sit. 84 | ![test](/placeholder.png) 85 | ``` 86 | -------------------------------------------------------------------------------- /filters/date-display.js: -------------------------------------------------------------------------------- 1 | module.exports = (date) => 2 | new Date(date).toLocaleDateString('en-US', { 3 | year: 'numeric', 4 | month: 'long', 5 | day: 'numeric', 6 | timeZone: 'UTC' 7 | }); 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pwa-builder-blog", 3 | "version": "1.0.0", 4 | "description": "PWA Builder Blogging site", 5 | "license": "MIT", 6 | "scripts": { 7 | "build": "cross-env NODE_ENV=production npm-run-all clean -p build:*", 8 | "build:blog": "eleventy", 9 | "build:rollup": "rollup -c", 10 | "clean": "rimraf dist", 11 | "dev": "npm-run-all clean build:* -p dev:*", 12 | "dev:11ty": "eleventy --serve --quiet", 13 | "dev:rollup": "rollup -c -w" 14 | }, 15 | "devDependencies": { 16 | "@11ty/eleventy": "^0.12.1", 17 | "@11ty/eleventy-plugin-rss": "^1.1.2", 18 | "@11ty/eleventy-plugin-syntaxhighlight": "^3.1.0", 19 | "@rollup/plugin-replace": "^2.4.2", 20 | "@tailwindcss/forms": "^0.3.2", 21 | "autoprefixer": "^10.2.5", 22 | "cross-env": "^7.0.3", 23 | "dotenv": "^8.2.0", 24 | "markdown-it": "^12.0.6", 25 | "npm-run-all": "^4.1.5", 26 | "postcss": "^8.2.10", 27 | "postcss-import": "^14.0.1", 28 | "postcss-nested": "^5.0.5", 29 | "prettier": "^2.2.1", 30 | "rimraf": "^3.0.2", 31 | "rollup": "^2.45.2", 32 | "rollup-plugin-postcss": "^4.0.0", 33 | "rollup-plugin-svg": "^2.0.0", 34 | "rollup-plugin-terser": "^7.0.2", 35 | "tailwindcss": "^2.2.17" 36 | }, 37 | "dependencies": { 38 | "clipboard": "^2.0.8" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('postcss-import'), 4 | require('tailwindcss')('./tailwind.config.js'), 5 | require('postcss-nested'), 6 | require('autoprefixer'), 7 | ], 8 | }; 9 | -------------------------------------------------------------------------------- /public/StoreLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/public/StoreLogo.png -------------------------------------------------------------------------------- /public/WindowsStoreLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/public/WindowsStoreLogo.png -------------------------------------------------------------------------------- /public/blog-card.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/public/blog-card.webp -------------------------------------------------------------------------------- /public/demo-card.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/public/demo-card.webp -------------------------------------------------------------------------------- /public/docs-card.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/public/docs-card.webp -------------------------------------------------------------------------------- /public/drawing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/public/drawing.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/public/favicon.ico -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/public/favicon.png -------------------------------------------------------------------------------- /public/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /public/microsoft-google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/public/microsoft-google.png -------------------------------------------------------------------------------- /public/placeholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/public/placeholder.png -------------------------------------------------------------------------------- /public/pwa-linking.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/public/pwa-linking.png -------------------------------------------------------------------------------- /public/sub-header-background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/public/sub-header-background.png -------------------------------------------------------------------------------- /public/web-components.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/public/web-components.png -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import replace from "@rollup/plugin-replace" 2 | import path from "path" 3 | import postcss from "rollup-plugin-postcss" 4 | import svg from "rollup-plugin-svg" 5 | import { terser } from "rollup-plugin-terser" 6 | 7 | const dev = process.env.NODE_ENV !== "production" 8 | 9 | export default { 10 | input: "src/scripts/main.js", 11 | output: { 12 | sourcemap: false, 13 | format: "iife", 14 | name: "main", 15 | file: "dist/assets/main.bundle.js", 16 | }, 17 | plugins: [ 18 | replace({ 19 | DEV_MODE: dev, 20 | preventAssignment: true, 21 | }), 22 | svg(), 23 | postcss({ 24 | extract: path.resolve("dist/assets/main.bundle.css"), 25 | minimize: !dev, 26 | }), 27 | !dev && terser(), 28 | ], 29 | watch: { 30 | clearScreen: false, 31 | }, 32 | } 33 | -------------------------------------------------------------------------------- /src/404.njk: -------------------------------------------------------------------------------- 1 | --- 2 | title: "404 – Page Not Found" 3 | permalink: /404.html 4 | --- 5 | 6 | {% extends 'layouts/basepost.njk' %} 7 | {% block body %} 8 |

{{ title }}

9 |

The page you've requested can't be found.

10 | Go back to the homepage. 11 | {% endblock %} -------------------------------------------------------------------------------- /src/assets/css/base.css: -------------------------------------------------------------------------------- 1 | /* Prism Code Highlighting Theme (see https://prismjs.com) */ 2 | @import url("https://cdn.jsdelivr.net/npm/prism-themes@1.5.0/themes/prism-dracula.css"); 3 | /* Using google fonts for now hosted fonts not working will look into it later */ 4 | @import url("https://fonts.googleapis.com/css2?family=Hind:wght@300;400;700&display=swap"); 5 | 6 | :root { 7 | --font-family: "Hind", sans-serif; 8 | --font-bold: 700; 9 | --font-medium: 400; 10 | 11 | --font-size: 14px; 12 | --small-font-size: 12px; 13 | --small-medium-font-size: 22px; 14 | --medium-font-size: 28px; 15 | --large-font-size: 32px; 16 | --xlarge-font-size: 44px; 17 | 18 | --primary-font-color: #292c3a; 19 | --secondary-font-color: #eeeeee; 20 | 21 | --primary-background-color: #ffffff; 22 | --secondary-background-color: #292c3a; 23 | 24 | --button-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25); 25 | --button-radius: 44px; 26 | --mobile-button-radius: 61px; 27 | --mobile-button-height: 64px; 28 | --mobile-button-font-size: 22px; 29 | --desktop-button-height: 40px; 30 | 31 | --input-radius: 8px; 32 | 33 | --link-color: #5d5db9; 34 | --mobile-link-color: #0683f9; 35 | 36 | --list-border: 0.67681px solid #e5e5e5; 37 | --success-color: #a2f4cc; 38 | --light-primary-color: rgba(255, 255, 255, 0.6); 39 | } 40 | 41 | * { 42 | box-sizing: border-box; 43 | } 44 | 45 | :not(pre) > code[class*="language-"] { 46 | /* Fixes issue where theme removes indentation. */ 47 | white-space: pre; 48 | } 49 | 50 | html, 51 | body { 52 | font-size: min(max(var(--font-size), 4vw), 22px); 53 | font-family: var(--font-family), sans-serif; 54 | line-height: 1.5; 55 | color: var(--primary-font-color); 56 | background: var(--primary-background-color); 57 | padding: 0; 58 | margin: 0; 59 | scroll-behavior: smooth; 60 | @apply antialiased; 61 | } 62 | 63 | h1, h2, h3, h4, h5, h6 { 64 | margin: 0; 65 | } 66 | 67 | p, blockquote { 68 | margin: revert; 69 | } 70 | 71 | blockquote { 72 | box-shadow: inset 3px 0 0 0 rgb(41 41 41); 73 | padding-left: 1rem; 74 | } 75 | 76 | .figcaption_hack { 77 | color: rgba(117, 117, 117, 1); 78 | font-size: 0.6rem; 79 | font-weight: var(--font-bold); 80 | text-align: center; 81 | margin-right: auto; 82 | margin-left: auto; 83 | max-width: 70%; 84 | display: block; 85 | } 86 | 87 | video { 88 | margin: auto; 89 | } 90 | 91 | li { 92 | font-size: 1rem; 93 | } 94 | 95 | li > a { 96 | font-size: 1rem; 97 | } 98 | 99 | a { 100 | color:#342a6a; 101 | text-decoration: underline; 102 | } 103 | 104 | ol, ul { 105 | margin-top: 1rem; 106 | padding-left: 2rem; 107 | } 108 | 109 | ol { 110 | list-style: decimal; 111 | } 112 | 113 | ul { 114 | list-style: square; 115 | } 116 | 117 | h1, 118 | h2, 119 | h3, 120 | h4, 121 | h5 { 122 | @apply font-bold leading-tight mt-3 break-words; 123 | transition: all 200ms ease-in; 124 | } 125 | 126 | h1 { 127 | @apply text-4xl; 128 | } 129 | 130 | h2 { 131 | @apply text-2xl; 132 | } 133 | 134 | h3 { 135 | @apply text-xl; 136 | } 137 | 138 | h4 { 139 | @apply text-lg; 140 | } 141 | 142 | a { 143 | @apply text-base font-bold; 144 | } 145 | 146 | a:hover { 147 | @apply underline; 148 | } 149 | 150 | p { 151 | @apply text-base; 152 | } 153 | 154 | pre { 155 | @apply my-2 text-sm tracking-wider break-words; 156 | border-radius: 25px; 157 | } 158 | 159 | pre[class*=language-] { 160 | overflow: scroll !important; 161 | } 162 | 163 | hr { 164 | @apply mt-4 mb-2 border-b border-gray-600; 165 | } 166 | 167 | small { 168 | font-size: 0.8rem; 169 | } 170 | 171 | code { 172 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 173 | monospace; 174 | } 175 | 176 | .my-8 { 177 | max-width: 100%; 178 | } 179 | 180 | @media (max-width: 800px) { 181 | nav[aria-label="sub-navigation"] { 182 | display: flex; 183 | align-items: flex-start; 184 | } 185 | } 186 | 187 | /** 188 | * Disable animations if the user has turned on the a11y option for reduced motion due to 189 | * vestibular disorders etc. 190 | * 191 | * @link https://css-tricks.com/introduction-reduced-motion-media-query/#article-header-id-3 192 | */ 193 | @media (prefers-reduced-motion: reduce) { 194 | * { 195 | animation-duration: 0.01s !important; 196 | transition-duration: 0.01s !important; 197 | } 198 | } 199 | 200 | .js-focus-visible :focus:not([data-focus-visible-added]) { 201 | @apply outline-none; 202 | } 203 | 204 | /* 205 | Leave it for testing margins, paddings, spacing 206 | 207 | * { 208 | outline: 1px solid rgba(255, 0, 0, 0.2); 209 | :hover { 210 | outline: 1px solid rgba(255, 0, 0, 0.6); 211 | } 212 | } 213 | * * { 214 | outline: 1px solid rgba(0, 255, 0, 0.2); 215 | :hover { 216 | outline: 1px solid rgba(0, 255, 0, 0.6); 217 | } 218 | } 219 | * * * { 220 | outline: 1px solid rgba(0, 0, 255, 0.2); 221 | :hover { 222 | outline: 1px solid rgba(0, 0, 255, 0.6); 223 | } 224 | } 225 | * * * * { 226 | outline: 1px solid rgba(255, 0, 255, 0.2); 227 | :hover { 228 | outline: 1px solid rgba(255, 0, 0, 0.6); 229 | } 230 | } 231 | * * * * * { 232 | outline: 1px solid rgba(0, 255, 255, 0.2); 233 | :hover { 234 | outline: 1px solid rgba(0, 255, 0, 0.6); 235 | } 236 | } 237 | * * * * * * { 238 | outline: 1px solid rgba(255, 255, 0, 0.2); 239 | } 240 | :hover { 241 | outline: 1px solid rgba(0, 0, 255, 0.6); 242 | } 243 | * * * * * * * { 244 | outline: 1px solid rgba(255, 0, 0, 0.2); 245 | } 246 | :hover { 247 | outline: 1px solid rgba(255, 0, 0, 0.6); 248 | } 249 | * * * * * * * * { 250 | outline: 1px solid rgba(0, 255, 0, 0.2); 251 | :hover { 252 | outline: 1px solid rgba(0, 255, 0, 0.6); 253 | } 254 | } 255 | * * * * * * * * * { 256 | outline: 1px solid rgba(0, 0, 255, 0.2); 257 | :hover { 258 | outline: 1px solid rgba(0, 0, 255, 0.6); 259 | } 260 | } 261 | 262 | */ 263 | -------------------------------------------------------------------------------- /src/assets/css/card.css: -------------------------------------------------------------------------------- 1 | .featured-posts .featured-post:first-child { 2 | grid-column: span 2 / span 2; 3 | } 4 | 5 | .doc-link { 6 | color: var(--primary-font-color); 7 | text-decoration: none; 8 | } 9 | 10 | .doc-link p { 11 | font-weight: normal; 12 | } -------------------------------------------------------------------------------- /src/assets/css/copy.css: -------------------------------------------------------------------------------- 1 | pre[class*="language-"] { 2 | @apply relative overflow-visible rounded; 3 | } 4 | pre[class*="language-"] .copy { 5 | transform: translate(-10px, -90%); 6 | cursor: pointer; 7 | transition: all 200ms ease; 8 | @apply flex justify-center items-center absolute top-0 right-0 rounded-t px-2 py-1 text-secondary-font bg-secondary; 9 | } 10 | pre[class*="language-"]:hover .copy:hover { 11 | transform: translate(-10px, -100%); 12 | @apply opacity-75; 13 | } 14 | 15 | code { 16 | overflow: scroll; 17 | } 18 | -------------------------------------------------------------------------------- /src/assets/css/tailwind.css: -------------------------------------------------------------------------------- 1 | /* purgecss start ignore */ 2 | @import "tailwindcss/base"; 3 | @import "./base.css"; 4 | @import "./copy.css"; 5 | @import "./card.css"; 6 | /* purgecss end ignore */ 7 | 8 | @import "tailwindcss/components"; 9 | 10 | @import "tailwindcss/utilities"; 11 | -------------------------------------------------------------------------------- /src/assets/fonts/Hind-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/assets/fonts/Hind-Bold.ttf -------------------------------------------------------------------------------- /src/assets/fonts/Hind-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/assets/fonts/Hind-Regular.ttf -------------------------------------------------------------------------------- /src/demos/index.njk: -------------------------------------------------------------------------------- 1 | --- 2 | pagination: 3 | data: collections.docs 4 | size: 12 5 | alias: demos 6 | reverse: true 7 | permalink: "/demos/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber + 1 }}/{% endif %}" 8 | image: demo-card.webp 9 | title: PWABuilder Demos 10 | --- 11 | 12 | {% extends 'layouts/home.njk' %} 13 | {% block body %} 14 | {% include "demos.njk" %} 15 | {% endblock %} -------------------------------------------------------------------------------- /src/docs/android/android-playstore-documentation/StoreLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/android/android-playstore-documentation/StoreLogo.png -------------------------------------------------------------------------------- /src/docs/android/android-playstore-documentation/android-playstore-documentation.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: doc 3 | title: Android Platform 4 | excerpt: Publish your PWA to Google Play 5 | description: Publish your PWA to Google Play 6 | date: 2021-06-23 7 | updatedDate: 2021-10-27 8 | trending: false 9 | featured: true 10 | recommended: true 11 | isDocumentation: true 12 | backUrl: '/docs' 13 | image: docs/android/android-playstore-documentation/StoreLogo.png 14 | author: 15 | name: PWA Builder documentation 16 | tags: 17 | - docs 18 | - Documentation 19 | - Android 20 | --- 21 | 22 | Android Playstore Logo 23 | 24 | PWABuilder's Android platform utilizes the [open source Bubblerwrap tool](https://github.com/GoogleChromeLabs/bubblewrap) to generate a [Trusted Web Activity](https://developers.google.com/web/android/trusted-web-activity/) (TWA) that can be installed on the Google Play Store. This TWA behaves like any other Android application and is a great way to ship your PWA to the Google Play Store. 25 | 26 | 1. [Generating your Android app with PWABuilder](/docs/generating-your-android-package) 27 | 2. [Testing and publishing your your app to the Google Play Store](/docs/testing-and-publishing-your-android-pwa-to-the-google-play-store) 28 | 3. [Updating your existing app](/docs/updating-your-existing-app) 29 | 4. [Removing the Browser Address Bar: Asset Links](/docs/removing-the-browser-address-bar) 30 | -------------------------------------------------------------------------------- /src/docs/android/generating-your-android-package/analyzing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/android/generating-your-android-package/analyzing.png -------------------------------------------------------------------------------- /src/docs/android/generating-your-android-package/android-card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/android/generating-your-android-package/android-card.png -------------------------------------------------------------------------------- /src/docs/android/generating-your-android-package/download.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/android/generating-your-android-package/download.png -------------------------------------------------------------------------------- /src/docs/android/generating-your-android-package/enter-url.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/android/generating-your-android-package/enter-url.png -------------------------------------------------------------------------------- /src/docs/android/generating-your-android-package/generating-your-android-package.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: doc 3 | title: Generating your Android package 4 | excerpt: Everything you need to know about testing and generating your Android app with PWABuilder 5 | description: Everything you need to know about testing and generating your Android app with PWABuilderPlay Store 6 | date: 2021-09-17 7 | updatedDate: 2021-09-17 8 | trending: false 9 | featured: false 10 | isDocumentation: true 11 | backUrl: '/docs/android-platform-documentation/' 12 | image: docs/android/next-steps-documentation/StoreLogo.png 13 | author: 14 | name: PWA Builder documentation 15 | tags: 16 | - docs 17 | - Documentation 18 | - Android 19 | --- 20 | 21 | To learn more about how PWABuilder generates a Trusted Web Activity from your PWA, check out [our post](/posts/microsoft-and-google-team-up) on this collaborative effort. 22 | 23 | ## Generating your Android application with PWABuilder 24 | 25 | First, go to pwabuilder.com and put in the URL to your PWA, such as [https://sadchonks.com](https://sadchonks.com): 26 | 27 | ![A screenshot of PWABuilder that shows where to enter your URL](/docs/android/generating-your-android-package/enter-url.png) 28 | 29 | and then tap start to analyze your PWA. 30 | 31 | ![A screenshot of the analyzing page in PWABuilder analyzing a PWA.](/docs/android/generating-your-android-package/analyzing.png) 32 | 33 | You are now at the report card page! If your app is already a PWA your scores will all be green, if not, thats ok! You can [use PWABuilder to help convert your web app to a PWA](/docs/converting-your-web-app-to-a-progressive-web-app-with-pwabuilder/). You can now tap the next button to continue to the packaging page! 34 | 35 | ![A screenshot of the report card page in PWABuilder. This PWA has great scores across the Manifest, Service Worker and Security](/docs/android/generating-your-android-package/report_card.png) 36 | 37 | You can now tap the Store Package button on the Android platform to generate your Android app. 38 | 39 | ![A screenshot of the Android platform card on PWABuilder that shows the Store Package button](/docs/android/generating-your-android-package/android-card.png) 40 | 41 | Next you will see a list of the different options for the Android platform that are covered in more detail below. 42 | 43 | ![A screenshot of the Android platform options UI in PWABuilder. This UI enables you to edit many details of your Android application](/docs/android/generating-your-android-package/options.png) 44 | 45 | When you are ready, tap the Generate button to generate your Android app, and then the Download button when it pops up to download the generated App and associated files. 46 | 47 | ![A screenshot of the Download button on PWABuilder. You can tap this button to download your generated app](/docs/android/generating-your-android-package/download.png) 48 | 49 | After generating your Android app, see our [Android Next Steps documentation](/docs/android/next-steps-documentation/) for more information on how to test your application and then publish to the Google Play Store! 50 | 51 | ## Android Features & Customization 52 | 53 | When we rolled out our initial collaborative work with Google’s Bubblewrap this spring, PWABuilder didn’t have a way to customize the Android package it generated. While this was fine for some basic scenarios, like publishing to the Google Play Store for the first time, it fell short in other ways. 54 | 55 | To address this, we’ve updated PWABuilder to allow for full customization of your Android app package 56 | 57 | With this new functionality, you can customize your PWA for Android: 58 | 59 | - **Package ID:** The Android identifier unique to your app 60 | - **App name:** The full name of your app. We prepopulate this with the [app name](https://w3c.github.io/manifest/#name-member) from your PWA’s app manifest. 61 | - **Launcher name**: The name of your app in the Android launcher. This is typically the same as app name, or a shortened version of it. We prepopulate this with [short_name](https://w3c.github.io/manifest/#short_name-member) from your PWA’s app manifest. 62 | - **App version**: This is the version string displayed to end users, e.g. “1.0.0.0” 63 | - **App version code**: This is an integer used as a private, internal version of your app. 64 | - **Host, Start URL, Manifest URL**: The URLs used to launch your PWA in the Android app. We prepopulate these for you from your app manifest. 65 | - **Status bar color, Nav bar color**: The color of the Android status bar and navigation bar in your PWA. You can also hide these bars by setting Display to 66 | Fullscreen. We prepopulate this using colors from your app manifest. 67 | - **Nav bar color:** Same as above, but for the Android navigation bar. Also can be hidden by setting Display to Fullscreen. 68 | - **Splash screen color:** The background color of the splash screen that will be used when creating your Android app. We prepopulate this with the theme color 69 | specified in your app manifest. 70 | - **Splash screen fade out time:** How long to fade out the splash screen in milliseconds. We default to 300ms. 71 | - **Icon URL**: URLs for the icon to use for your app. We recommend a 512x512 icon. 72 | - **Maskable icon URL**: Optional. The icon to use on Android devices that show rounded corner icons. Typically, this icon should have some padding around the 73 | icon’s content, enabling the icon to be safely rounded without losing fidelity. We populate this with a [purpose: maskable](https://w3c.github.io/manifest/#purpose-member icon from your app manifest. If one can’t be found, we use the icon. For more information about 74 | maskable icons on Android, see [https://web.dev/maskable-icon](https://web.dev/maskable-icon/). 75 | - **Monochrome icon URL**: Optional. The monochrome icon to use for your app. Android can use this to fill your icon with a certain color based on user preferences, theme or color mode, or high contrast configurations. We populate this with a [purpose: monochrome](https://w3c.github.io/manifest/#purpose-member) icon from your app manifest. 76 | - **Fallback behavior:** When the full TWA experience isn’t available, how should your app proceed, whether with a web view or [Chrome’s Custom Tabs feature](https://developer.chrome.com/multidevice/android/customtabs). We default to the latter. 77 | - **Display mode:**
**— Standalone** means your PWA takes up all the area except Android status bar and Navigation bar.
**— Fullscreen** hide both 78 | bars. This is intended for immersive experiences likes games and media playback. 79 | - **Notifications**: If enabled, your PWA will use [Android Notification Delegation](https://github.com/GoogleChromeLabs/svgomg-twa/issues/60) for push 80 | notifications, meaning your installed PWA can send push notifications without browser permission prompts. You should enable this if your PWA sends push 81 | notifications. 82 | - **Signing key:** How the APK app package will be digitally signed:
**— None:** your app package won’t be signed. Unsigned packages will be signed by 83 | the Google Play Store. This is Google’s recommendation, and our default.
**— New:** PWABuilder will create a new signing key for you. The signing key will 84 | be included in your zip download. Choosing this will let you fill in details like password, alias, and more.
**— Mine:** Upload an existing .keystore 85 | file to use for signing the app package. This should be used if you are updating an existing app in the Store. You’ll be prompted to specify your existing key 86 | passwords and alias. 87 | 88 | Whew! As you can see, you can customize nearly every aspect of your PWA Android app package. -------------------------------------------------------------------------------- /src/docs/android/generating-your-android-package/options.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/android/generating-your-android-package/options.png -------------------------------------------------------------------------------- /src/docs/android/generating-your-android-package/report_card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/android/generating-your-android-package/report_card.png -------------------------------------------------------------------------------- /src/docs/android/next-steps-documentation/next-steps-documentation.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: doc 3 | title: Testing and publishing your Android PWA to the Google Play Store 4 | excerpt: Everything you need to know about testing and publishing your Android PWA to the Google Play Store 5 | description: Everything you need to know about testing and publishing your Android PWA to the Google Play Store 6 | date: 2021-09-17 7 | updatedDate: 2021-09-17 8 | trending: false 9 | featured: false 10 | isDocumentation: true 11 | backUrl: '/docs/android-platform-documentation/' 12 | author: 13 | name: PWA Builder documentation 14 | tags: 15 | - docs 16 | - Documentation 17 | - Android 18 | - PlayStore 19 | --- 20 | 21 | # Testing and publishing your Android PWA to the Google Play Store 22 | 23 | First, to generate your Android package with [PWABuilder](https://www.pwabuilder.com) 24 | 25 | Your next steps: 26 | 1. **Deploy `assetlinks.json` to your server** to prove domain ownership. 27 | 2. **Test your app**: open the `.apk` file on an Android device or Android emulator. 28 | 3. **Submit your app to Google Play**: upload the `.aab` file to the Google Play Store. 29 | 4. **Update `assetlinks.json` for production**: after Google Play signs your app, you'll need to update your asset links to remove the address bar from your app. 30 | 31 | Each step is explained below. 32 | 33 | ## 1. Deploy `assetlinks.json` 34 | 35 | Your zip file contains `assetlinks.json`. This is a [digital asset links file](https://developers.google.com/web/updates/2019/08/twas-quickstart#creating-your-asset-link-file) that proves ownership of your PWA. Upload this file to your server at `https://example.com/.well-known/assetlinks.json`. (Replace example.com with your PWA's URL.) 36 | 37 | > 💁‍♂️ *Heads up*: 38 | > 39 | > **Digital asset links are required for your PWA on Android**. If you're seeing a browser address bar in your app on Android, or if your app is crashing on launch, it means your `assetlinks.json` file is missing, inaccessible, or incorrect. See our [asset links helper](/Asset-links.md) to fix this. 40 | 41 | ## 2. Test your app on an Android device or Android emulator 42 | Your zip file contains an `.apk` (Android Package) file, which can be loaded on your personal Android device or Android emulator. 43 | 44 | **To test your app, install open the `.apk` file on your Android device or emulator.** 45 | 46 | If you don't have a physical Android device, you can use an Android emulator such as the free [Android Emulator included in Android Studio](https://developer.android.com/studio/run/emulator). Run the emulator and open the `.apk` file to install your app. You can also drag and drop the `.apk` file onto the Android emulator to install it. 47 | 48 | ## 3. Upload your app to the Google Play Store 49 | 50 | Your zip file contains an `.aab` (Android App Bundle) file which can be submitted directly to the Play Store through the [Google Play Console](https://developer.android.com/distribute/console). 51 | 52 | Once you submit your app, it will be reviewed. Once approved, your PWA will be available in the Google Play Store. 😎 53 | 54 | ## 4. Update your asset links file for production 55 | 56 | > 💁🏽‍♀️ *Heads up*: 57 | > 58 | > This step is required for running the production version of your app. If you skip this step, your app will crash or will a browser address bar will appear inside your app. See our [asset links helper](/Asset-links.md#validate-your-assetlinksjson-file) for more info. 59 | 60 | Once you've uploaded your `.aab` file, Google Play re-signs your app. Because of this, you'll need to update your asset links file. 61 | 62 | To update your asset links and remove the address bar from your app, login to the [Google Play Console](https://developer.android.com/distribute/console), select your app, then choose `Setup` -> `App integrity`, then copy your `SHA-256 fingerprint`: 63 | 64 | 65 | 66 | Then, paste the fingerprint into your `assetlinks.json` file: 67 | 68 | ```json 69 | [ 70 | { 71 | "relation": ..., 72 | "target": { 73 | "namespace": ..., 74 | "package_name": ..., 75 | "sha256_cert_fingerprints": [ 76 | "...", 77 | "PASTE YOUR NEW SHA-256 FINGERPRINT HERE" 78 | ] 79 | } 80 | } 81 | ] 82 | ``` 83 | 84 | Once your updated `assetlinks.json` file is deployed to your server, the address bar will disappear from your app. 85 | 86 | ## Save your signing key 87 | 88 | Your zip file contains `signing.keystore` and `signing-key-info.txt`: 89 | 90 | - `signing.keystore` is the Android key store file containing the signing key. 91 | - `signing-key-info.txt` is a text file containing your signing key information, such as the key password, store password, and key alias. 92 | 93 | Keep both of these files in a safe place. **You'll need them to deploy future versions of your app.** See [Uploading a new version](#uploading-a-new-version) for more info. 94 | 95 | ## Updating an existing app in the Play Store 96 | 97 | Have an existing app in the Play Store and want to update it to a new version? No problem! See [updating an existing app](/docs/android/updating-your-existing-app). 98 | 99 | ## Note about Quality Criteria on Android 100 | 101 | As of Chrome 86, PWAs downloaded from the Google Play Store will now crash if your app: 102 | - Does not have a valid TLS certificate 103 | - Does not link to your digital assetlinks file correctly 104 | 105 | Because of this you should ensure that your PWA runs on an HTTPS domain and has your assetlinks file properly linked. 106 | 107 | For more info about Chrome's quality criteria policy, check out [this article](https://blog.chromium.org/2020/06/changes-to-quality-criteria-for-pwas.html) from our friends over on the Chrome team. 108 | 109 | ## Note about Apps for Children 110 | 111 | Be aware that PWAs on Android cannot currently target children as their audience. 112 | 113 | Google Play's [Children And Families Policy](https://developer.android.com/google-play/guides/families) blocks PWAs from targetting children because PWAs potentially have full access to the web. 114 | 115 | If you're building an education app, for example, you'll need to specify `Target Audience: Older Users` when submitting your app to Google Play. Otherwise your app may not be approved, or may be removed from the Store. 116 | 117 | Google is considering engineering and policy updates to permit PWAs for children in the future. Please see [this thread](https://github.com/pwa-builder/PWABuilder/issues/1752) for more details. 118 | 119 | ## Need more help? 120 | 121 | If the browser address bar is showing up in your app, see our [asset links helper](https://github.com/pwa-builder/CloudAPK/blob/master/Asset-links.md). 122 | 123 | If you're otherwise stuck, we're here to help. You can [open an issue](https://github.com/pwa-builder/pwabuilder/issues) and we'll help walk you through it. -------------------------------------------------------------------------------- /src/docs/android/removing-the-browser-address-bar/asset-links-details.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/android/removing-the-browser-address-bar/asset-links-details.png -------------------------------------------------------------------------------- /src/docs/android/removing-the-browser-address-bar/asset-links-package-id.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/android/removing-the-browser-address-bar/asset-links-package-id.png -------------------------------------------------------------------------------- /src/docs/android/removing-the-browser-address-bar/google-play-signing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/android/removing-the-browser-address-bar/google-play-signing.png -------------------------------------------------------------------------------- /src/docs/android/removing-the-browser-address-bar/removing-the-browser-address-bar.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: doc 3 | title: Removing the Browser Address Bar 4 | excerpt: Browser address bar showing in your Android PWA? Learn how to fix this issue using asset-links... 5 | description: Browser address bar showing in your Android PWA? Learn how to fix this issue using asset-links... 6 | date: 2021-10-11 7 | updatedDate: 2021-10-11 8 | trending: false 9 | featured: false 10 | isDocumentation: true 11 | backUrl: '/docs/android-platform-documentation/' 12 | image: docs/android/removing-the-browser-bar/google-play-signing.png 13 | author: 14 | name: PWA Builder documentation 15 | tags: 16 | - docs 17 | - Documentation 18 | - Android 19 | --- 20 | 21 | If you're seeing a browser address bar in your PWA Android app, it means you need to update your digital asset links, the `assetlinks.json` file. 22 | 23 | This document shows how fix this issue so the browser address bar won't show up. 24 | 25 | Please note that a "Chrome is in use" banner is expected the first time your app is run. That is not evidence of a broken asset links. You'll know if your asset links are incorrect when the browser address bar shows up in your Android app. 26 | 27 | ## Make sure assetlinks.json is valid and accessible 28 | 29 | If you're not sure what asset links are or if you don't have an `assetlinks.json` file, go back and read our [Next Steps page](/docs/removing-the-browser-bar). 30 | 31 | Once you have an `assetlinks.json` file deployed to your server, make sure it's accessible via a web browser at `https://YOUR-PWA-URL/.well-known/assetlinks.json`. (Replace YOUR-PWA-URL with the your PWA's URL.) It's important that this file be in the `/.well-known` subdirectory as shown above. Chrome on Android will look at this URL for your asset links file, and will show the browser addres bar if it's not found. 32 | 33 | ## Add production fingerprint 34 | 35 | If you haven't already, you need to add Google Play's production fingerprint to your `assetlinks.json` file. 36 | 37 | Login to the [Google Play Console](https://developer.android.com/distribute/console), select your app, then choose `Setup` -> `App integrity`, then copy your `SHA-256 fingerprint`: 38 | 39 | ![A Screenshot of the Google Play console dashboard](/docs/android/removing-the-browser-address-bar/google-play-signing.png) 40 | 41 | Paste that fingerprint into your `assetlinks.json` file: 42 | 43 | ```json 44 | [ 45 | { 46 | "relation": ..., 47 | "target": { 48 | "namespace": ..., 49 | "package_name": ..., 50 | "sha256_cert_fingerprints": [ 51 | "...", 52 | "PASTE YOUR NEW SHA-256 FINGERPRINT HERE" 53 | ] 54 | } 55 | } 56 | ] 57 | ``` 58 | 59 | Once you follow these steps, the browser address bar should no longer appear in your app. 😎 60 | 61 | ## Validate your `assetlinks.json` file 62 | 63 | If your address bar is still showing up after the above steps, the issue is likely due to incorrect asset links: Android thinking your asset links are different than what your `assetlinks.json` file specifies. 64 | 65 | To fix this, we'll check what Android believes is the asset links for your PWA, then update our `assetlinks.json` with the new value. 66 | 67 | 1. Install your app on an Android device or Android emulator 68 | 2. Install the [Asset Links Tool](https://play.google.com/store/apps/details?id=dev.conn.assetlinkstool) from the Google Play Store. 69 | 3. Run the Asset Links Tool and search for your PWA's package ID (e.g. `com.myawesomepwa`): 70 | ![A screenshot of the Asset Links Tool app showing the package ID](/docs/android/removing-the-browser-address-bar/asset-links-package-id.png) 71 | 4. Tap your PWA's package ID to view its asset links, then tap `Copy Signature`: 72 | ![A screenshot of the Asset Links Tool app showing the asset link details](/docs/android/removing-the-browser-address-bar/asset-links-details.png) 73 | 5. Open your `assetlinks.json` file and find the `sha256_cert_fingerprints` array member. Paste the copied signature into the `sha256_cert_fingerprints`. Your `assetlinks.json` file should look something like this, with 2 fingerprints separated by a comma as shown below: 74 | ```json 75 | [{ 76 | "relation": ..., 77 | "target" : { 78 | "namespace": ..., 79 | "package_name": ..., 80 | "sha256_cert_fingerprints": [ 81 | "...", 82 | "4B:C1:D7:C7:8D:74:21:56:8C:E0:13:00:12:35:19:94:4B:33:1E:3C:2B:E5:7A:04:04:FE:F9:3E:58:30:B0:F4" 83 | ] 84 | } 85 | }] 86 | ``` 87 | 88 | 6. Save your `assetlinks.json` file and re-upload to your server. 89 | 90 | > 💁‍♀️ *Heads up* 91 | > 92 | > Make sure your pasted fingerprints have a comma between them, otherwise your `assetlinks.json` will contain invalid JSON. You can [validate your JSON](https://jsonformatter.curiousconcept.com/) to be sure everything's correct. 93 | 94 | Once you follow these steps, the browser address bar should no longer appear in your app. 😎 95 | 96 | ## Make sure there are no redirects 97 | 98 | Another common cause of the address bar showing is redirects across origins. (Cosmetic redirects are fine.) 99 | 100 | For example, if your site automatically redirects to a different subdomain (e.g. https://myawesomepwa.com redirects to https://www.myawesomepwa.com), you'll need to make sure to generate your Android package on PWABuilder with the correct, canonical URL. 101 | 102 | For example, if you always redirect to https://www.myawesomepwa.com (the `www` subdomain), you need to generate your Android package on PWABuilder using the *same URL*, in this case, the one with the `www` subdomain. 103 | 104 | Likewise, if you redirect the `www` subdomain to the bare domain, you'll need to use the bare domain in PWABuilder when generating your Android package. 105 | 106 | Bottom line: **whatever URL you redirect to, that's the URL you need to put into PWABuilder**. If you don't do this, the Android platform will look for asset links at a URL that redirects, which renders your asset links invalid and causes the address bar to appear. 107 | 108 | See [this issue](https://github.com/GoogleChromeLabs/bubblewrap/issues/310#issuecomment-685505871) for more information. 109 | 110 | ## Clearing your site's cache 111 | 112 | If you had previously installed your PWA on an Android device, your `assetlinks.json` file might be cached. Uninstall isn't enough; you may have to manually clear the browser's cache for your site before Chrome detects an updated `assetlinks.json` file. 113 | 114 | ## The browser address bar is _still_ showing 115 | 116 | If you followed all these steps and are still seeing the browser address bar, we're here to help. [Open an issue](https://github.com/pwa-builder/PWABuilder/issues/new?assignees=&labels=android-platform&body=Type%20your%20question%20here.%20Please%20include%20the%20URL%20to%20your%20app%20in%20Google%20Play.%0A%0A%3E%20If%20my%20answer%20was%20in%20the%20docs%20all%20along%2C%20I%20promise%20to%20give%20%245%20USD%20to%20charity.&title=Address%20bar%20still%20showing%20in%20my%20app) and we'll help you fix it. -------------------------------------------------------------------------------- /src/docs/android/updating-your-existing-app/signing-options.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/android/updating-your-existing-app/signing-options.png -------------------------------------------------------------------------------- /src/docs/android/updating-your-existing-app/update.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: doc 3 | title: Updating your existing app 4 | excerpt: How to update your existing app 5 | description: How to update your existing app 6 | date: 2021-09-17 7 | updatedDate: 2021-09-17 8 | trending: false 9 | featured: false 10 | isDocumentation: true 11 | backUrl: '/docs/android-platform-documentation/' 12 | author: 13 | name: PWA Builder documentation 14 | tags: 15 | - docs 16 | - Documentation 17 | - Android 18 | - PlayStore 19 | --- 20 | 21 | ## Updating an existing app in the Play Store 22 | 23 | If have an existing app in the Play Store and you want to publish a new version of it, follow these steps: 24 | 25 | 1. [Generate your new package](/docs/android/generating-android-package) 26 | 4. Specify your new `App version` and `App version code`: 27 |
A screenshot of the version code and version input on the PWABuilder Android options UI 28 | 5. Scroll down to `Signing key` and choose `Use mine`:
A screenshot of the Signing Key input on the PWABuilder Android options UI 29 | 6. Choose your existing signing key file, and fill in your existing signing key information (`key alias`, `key password`, `store password`) 30 | 7. Build your package. 31 | 32 | [PWABuilder](https://www.pwabuilder.com) will build a package signed with your existing key. When you upload it to Google Play, it'll automatically be recognized as a new version of your existing app. 😎 -------------------------------------------------------------------------------- /src/docs/android/updating-your-existing-app/version-code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/android/updating-your-existing-app/version-code.png -------------------------------------------------------------------------------- /src/docs/base_package/download.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/base_package/download.png -------------------------------------------------------------------------------- /src/docs/base_package/enter-url.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/base_package/enter-url.png -------------------------------------------------------------------------------- /src/docs/base_package/generate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/base_package/generate.png -------------------------------------------------------------------------------- /src/docs/base_package/mani-editor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/base_package/mani-editor.png -------------------------------------------------------------------------------- /src/docs/base_package/mani-options.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/base_package/mani-options.png -------------------------------------------------------------------------------- /src/docs/base_package/pwa-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/base_package/pwa-logo.png -------------------------------------------------------------------------------- /src/docs/base_package/report-card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/base_package/report-card.png -------------------------------------------------------------------------------- /src/docs/base_package/sw-picker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/base_package/sw-picker.png -------------------------------------------------------------------------------- /src/docs/base_package/sw-review.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/base_package/sw-review.png -------------------------------------------------------------------------------- /src/docs/base_package/upload-icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/base_package/upload-icons.png -------------------------------------------------------------------------------- /src/docs/base_package/webapp-to-pwa.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: doc 3 | title: Converting your web app to a Progressive Web App with PWABuilder 4 | excerpt: PWABuilder can help you generate the basic technical requirements.... 5 | description: PWABuilder can help you generate the basic technical requirements to convert your web app to a PWA, a web manifest and a service worker. 6 | date: 2021-09-08 7 | updatedDate: 2021-09-08 8 | trending: false 9 | featured: true 10 | recommended: true 11 | isDocumentation: true 12 | image: docs/base_package/pwa-logo.png 13 | backUrl: '/docs' 14 | author: 15 | name: PWA Builder documentation 16 | tags: 17 | - docs 18 | - Documentation 19 | --- 20 | PWABuilder can help you generate the basic technical requirements to convert your web app to a PWA, a web manifest and a service worker. 21 | 22 | **Note** : Don't have an app yet? Check out our [PWA Starter Kit](https://github.com/pwa-builder/pwa-starter/) to start building one. The starter kit already includes a web manifest and service worker, 23 | which means you can skip the steps below and get right to building your PWA. 24 | 25 | Your Steps: 26 | 1. Enter the URL to your web app in the URL field of PWABuilder: 27 | 28 | A screenshot that shows the homepage of PWABuilder 29 | 30 | 2. Notice that you currently score a 0 for both the web manifest and service worker. This is because you have not added them to your web app yet. 31 | 32 | A screenshot that shows the report-card page of PWABuilder 33 | 34 | 3. Tap the Manifest score bar to see the details of your score. As you can see, your web app will currently score a 0 for each section. This is ok though, as PWABuilder has generated a basic one for us that we can quickly edit and use. Tap the "Manifest Options" button to start editing your generated web manifest. 35 | 36 | A screenshot of the manifest score overview on PWABuilder 37 | 38 | 4. Edit your manifest fields using the manifest editor that is now open. We recommend atleast checking that the name and short_name fields are what you expect them to be. 39 | 40 | A screenshot of the manifest editor on PWABuilder 41 | 42 | 5. Scroll down to the Upload App Icons section and tap the Upload button, then just choose your 512x512 icon and tap generate. This will generate all the different sizes of your Icon that PWAs need. 43 | 44 | A screenshot of the icon generator on PWABuilder 45 | 46 | 6. Tap the Done button and then Tap the Service Worker score bar, just as you did with the Manifest score bar before. This will take you to a list of pre-built service workers that the PWABuilder team has put together. 47 | 48 | A screenshot of the service worker score overview on PWABuilder 49 | 50 | 7. You can now choose the service worker that sounds best suited for your application by tapping the "Add to Base Package" button. After this tap the "Done" button. 51 | 52 | A screenshot of the service worker picker on PWABuilder 53 | 54 | 8. You should now be back at the review page. We are now ready to go forward, so tap the "next" button. 55 | 56 | A screenshot that shows the report-card page of PWABuilder 57 | 58 | 9. You are almost ready! You can now tap the "Generate" button which will generate your Manifest, Service Worker and Icons. Tap the "Download" button when it pops up. You are now ready to move to the next steps, adding these files and your icons to your web app to make it a PWA! 59 | 60 | A screenshot that shows the Generate button on the base package page of PWABuilder 61 | 62 | # Next steps for building your Progressive Web App (PWA) 63 | You've successfully generated a web manifest and service worker for your web app. Once you add these to your app, you'll be a PWA that can be published to app stores. 😎 64 | 65 | Your next steps: 66 | 1. **Upload `manifest.json`** to your server 67 | 2. **Upload `pwabuilder-sw.js`** to your server 68 | 3. **Upload the `images` folder** to your server 69 | 4. **Add a manifest link tag** to your HTML 70 | 5. **Add a service worker registration snippet** to your HTML 71 | 72 | Each step is explained below. 73 | 74 | ## 1. Upload `manifest.json` to your server 75 | 76 | Your zip file contains `manifest.json` - this is your [web manifest](https://www.w3.org/TR/appmanifest/) that contains metadata about your app, such as name, description, and more. 77 | 78 | Upload `manifest.json` to the root directory of your web server, e.g. https://myawesomepwa.com/manifest.json. 79 | 80 | ## 2. Upload `pwabuilder-sw.js` to your server 81 | 82 | Your zip file contains `pwabuilder-sw.js` - this is your [service worker](https://web.dev/codelab-service-workers/) that can provide advanced functionality to your web app. For example, service workers can enable your app to work offline, do push notifications, cache your app's files for faster load times, and more. 83 | 84 | Upload `pwabuilder-sw.js` to the root directory of your web server, e.g. https://myawesomepwa.com/pwabuilder-sw.js. 85 | 86 | ## 3. Upload the `images` folder to your server 87 | 88 | Your zip file contains a `images` folder containing all the image resources for your app. These images are referenced in your web manifest. 89 | 90 | Upload the `images` folder to the root directory of your web server. When you're done, you should have working URLs like https://myawesomepwa.com/images/app-icon-512x512.png 91 | 92 | ## 4. Add a manifest link tag to your HTML 93 | 94 | Now that you've uploaded your web manifest file, your HTML page should load it. 95 | 96 | In the `` section of your HTML, add the following code: 97 | 98 | ```html 99 | 100 | ``` 101 | 102 | ## 5. Add a service worker registration snippet to your HTML 103 | 104 | Now that you've uploaded your service worker file, your HTML page should register your service worker. 105 | 106 | In the `` section of your HTML, add the following code: 107 | 108 | ```html 109 | 114 | ``` 115 | 116 | ## Congrats, you're a PWA! 117 | 118 | If you've followed all these steps, congratulations, you're a Progressive Web App (PWA)! 😎 119 | 120 | To verify your app is a PWA, run your URL through [PWABuilder](https://pwabuilder.com) again. PWABuilder will report a score for your manifest and service worker, acknowledging your PWA status. 121 | 122 | ## Publish your PWA to app stores 123 | 124 | As a PWA, your app can be published to App Stores like Microsoft Store (Windows), Google Play (Android), and more. Run your app URL through PWABuilder and follow the steps to publish to app stores. 125 | 126 | ## Need more help? 127 | 128 | If you're otherwise stuck, we're here to help. You can [open an issue](https://github.com/pwa-builder/pwabuilder/issues) and we'll help walk you through it. -------------------------------------------------------------------------------- /src/docs/index.njk: -------------------------------------------------------------------------------- 1 | --- 2 | pagination: 3 | data: collections.docs 4 | size: 20 5 | alias: docs 6 | reverse: true 7 | permalink: "/docs/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber + 1 }}/{% endif %}" 8 | title: PWABuilder Documentation 9 | --- 10 | 11 | {% extends 'layouts/home.njk' %} 12 | {% block body %} 13 | {% include "docs.njk" %} 14 | {% endblock %} -------------------------------------------------------------------------------- /src/docs/ios/build-your-ios-app/build-your-ios-app.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: doc 3 | title: Build Your iOS App 4 | excerpt: How to build and publish your iOS app package to the App Store 5 | description: How to build and publish your iOS app package to the App Store 6 | date: 2021-10-27 7 | updatedDate: 2021-10-27 8 | trending: false 9 | featured: false 10 | recommended: false 11 | isDocumentation: true 12 | backUrl: '/docs' 13 | image: docs/ios/ios-appstore-documentation/StoreLogo.png 14 | author: 15 | name: PWA Builder documentation 16 | tags: 17 | - docs 18 | - Documentation 19 | - iOS 20 | --- 21 | 22 | Once you've built your iOS app using [PWABuilder](https://www.pwabuilder.com), you're ready for your next steps: 23 | 24 | 1. **Build your project** in Xcode 25 | 2. **Test your app**: Run your project in Xcode to try out your PWA on an iPhone simulator or physical iOS device. 26 | 3. **Submit your app to the iOS App Store** 27 | 28 | What you'll need: 29 | 30 | - A **Mac with Xcode installed** (For details, see [our FAQ](/docs/ios-faq#can-i-publish-to-the-app-store-without-a-mac).) 31 | - An **[Apple Developer Account](/docs/publish-your-pwa-to-the-ios-app-store#1-sign-into-your-apple-developer-account)** to publish your app to the App Store. 32 | 33 | Each step is explained below. 34 | 35 | ## 1. Build your project in Xcode 36 | 37 | Your zip file contains a `src` folder containing the source code for your iOS app. You'll [need a Mac with Xcode installed](/docs/ios-faq#can-i-publish-to-the-app-store-without-a-mac) to build this project. 38 | 39 | Unzip the `src` folder and open a terminal in `src` and execute the following command: 40 | 41 | `pod install` 42 | 43 | > 💁‍♂️ *Heads up*: 44 | > 45 | > If you get an error running `pod install`, you'll need to first run this command: `sudo gem install cocoapods`. Once completed, you can run `pod install`. 46 | 47 | Then, open the `src/[your PWA name].xcworkspace` file. 48 | 49 | This will open the project in Xcode. In Xcode, click `Product` > `Build` to build your project. 50 | 51 | ## 2. Test your app an iPhone simulator 52 | 53 | With the project opened in Xcode, click ▶️ to run your PWA in an iPhone simulator. You may also choose other iOS simulators to try our your app on those devices. 54 | 55 | If you need to debug your PWA while it's running inside an iOS device, click ▶️, then launch Safari. In the top menu bar, choose `Develop` -> `Simulator [device name]` -> `[Your PWA's URL]`. Safari Dev Tools will open, allowing you to execute arbitrary JS, set breakpoints, etc. See [PWABuilder iOS FAQs](/docs/ios-faq) for more info. 56 | 57 | ## 3. Upload your app to the iOS App Store 58 | 59 | Once you've built and tested your app, it's ready to be uploaded to the iOS App Store. 60 | 61 | See [Publish your PWA to the iOS App Store](/docs/publish-your-pwa-to-the-ios-app-store) for a step-by-step guide to publishing your PWA iOS package to the iOS App Store. 62 | 63 | ## Need more help? 64 | 65 | Check out our [PWABuilder iOS FAQs](/docs/ios-faq) for answers to frequently asked questions about PWABuilder's iOS platform. 66 | 67 | If you're stuck, we're here to help. You can [open an issue](https://github.com/pwa-builder/PWABuilder/issues/new?assignees=&labels=ios-platform,question%20%3Agrey_question%3A&body=Type%20your%20question%20here.%20Please%20include%20the%20URL%20to%20your%20PWA.%0A%0A%3E%20If%20my%20answer%20was%20in%20the%20docs%20all%20along%2C%20I%20promise%20to%20give%20%245%20USD%20to%20charity.) and we'll help walk you through it. -------------------------------------------------------------------------------- /src/docs/ios/ios-faq/ios-faq.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: doc 3 | title: iOS FAQ 4 | excerpt: Answers to frequently asked questions about PWABuilder's iOS platform 5 | description: Answers to frequently asked questions about PWABuilder's iOS platform 6 | date: 2021-10-27 7 | updatedDate: 2021-10-27 8 | trending: false 9 | featured: false 10 | recommended: false 11 | isDocumentation: true 12 | backUrl: '/docs' 13 | image: docs/ios/ios-appstore-documentation/StoreLogo.png 14 | author: 15 | name: PWA Builder documentation 16 | tags: 17 | - docs 18 | - Documentation 19 | - iOS 20 | --- 21 | 22 | ## How can I tell if my PWA was launched from the iOS app? 23 | 24 | At runtime, your PWA will have a `app-platform` cookie. This cookie's value will be set to `iOS App Store`. 25 | 26 | ## Can I publish to the App Store without a Mac? 27 | 28 | No, not currently. You'll need Xcode to build your project, which is only available on Mac. 29 | 30 | However, there are 3rd party build services, such as [AppVeyor](https://www.appveyor.com/pricing/) or [GitHub Actions with Xcode Archive](https://github.com/marketplace/actions/xcode-archive), that can build Xcode projects as part of your continuous integration (CI) pipeline. 31 | 32 | Additionally, there are inexpesive services, such as [Macincloud](https://www.macincloud.com/), which let you remote into a Mac with Xcode already installed. You can use those services to build your PWA iOS app package. 33 | 34 | ## What PWA features can I use on iOS? 35 | 36 | Unlike Google Play and Microsoft Store, Apple's App Store doesn't natively support PWAs. 37 | 38 | To bridge this gap, your PWA runs in a [WKWebView](https://developer.apple.com/documentation/webkit/wkwebview) hosted inside a native Swift app. Generally, features that work in iOS Safari will work in your PWA. 39 | 40 | This includes [service worker support](https://love2dev.com/blog/apple-ships-service-workers/). 41 | 42 | To get a glimpse of general PWA support on iOS, we recommend [Maximiliano Firtman's posts on the subject](https://firt.dev/tags/ios/). 43 | 44 | ## How do updates work? 45 | 46 | Since your PWA is being loaded in a web view, pushing changes to your web app will automatically be reflected in your iOS app. No App Store resubmission required. 47 | 48 | If you need to make changes to the iOS app itself -- for example, adding new iOS-specific capabilities, or otherwise modifying your app template -- only then you'll need to submit an update to your App Store listing. 49 | 50 | ## Can I publish my PWA to the *Mac* Store? 51 | 52 | Yes. While this template is designed for the iOS App Store, you can additionally publish to the Mac App Store. 53 | 54 | In [App Store Connect](https://appstoreconnect.apple.com/apps), choose your app. Then under `Pricing & Availability`, enable `Make this app available for MacOS App Store`: 55 | 56 | ![image](https://user-images.githubusercontent.com/312936/138754831-17de3a87-5a8a-47c3-8137-331125ced1e0.png) 57 | 58 | ## Can I debug my PWA app on an iOS device? 59 | 60 | You can open Safari Dev Tools while your PWA is running in your iPhone simulator. 61 | 62 | 1. Open your .xcworkspace file in Xcode. 63 | 2. Click ▶ to run your PWA inside the iPhone simulator. 64 | 3. Open Safari 65 | 4. In the top menu bar, choose `Develop` -> `Simulator [device name]` -> `[Your PWA's URL]` 66 | ![image](https://user-images.githubusercontent.com/312936/138755619-c7a0cb7a-c96d-4640-a808-3aae24e9b1ef.png) 67 | 5. Safari's dev tools will open, allowing you to debug your PWA, execute arbitrary JS, set breakpoints, etc. 68 | 69 | ## Can I customize my source code? 70 | 71 | Yes, certainly. Open your project in Xcode and make your changes as usual. 72 | 73 | ## Can I use iOS capability X? 74 | 75 | Yes. To use iOS capabilities, such as `Sign In with Apple`, `Apple Wallet`, `HealthKit`, or other iOS-specific capabilities, you should specify those capabilities while creating your Bundle ID. 76 | 77 | Then, make changes to the code to make use of that ability. 78 | 79 | ## How is this different from the old PWABuilder iOS platform? 80 | 81 | Some time ago, PWABuilder had an iOS platform based on the now-deprecated UIWebView. The template lacked a number of PWA integrations, and because it used deprecated technology, couldn't take advantage of new WebKit capabilities, such as service worker support via [App-Bound Domains](https://webkit.org/blog/10882/app-bound-domains/). 82 | 83 | This new template is a fresh take on a PWA iOS app using modern iOS technologies. 84 | 85 | ## How is this different than Apache Cordova? 86 | 87 | Apache Cordova is a broader platform that aims to expose native capabilities to your web app through a special runtime and plugins. For example, you might use Cordova to package your PWA, then make special calls from your PWA's JavaScript to interact with native functionality. 88 | 89 | PWA's iOS platform is more narrow in scope, aiming to make your PWA run well, as-is, with as many PWA capabilities as we can build, on iOS. PWABuilder's iOS platform is more like a polyfill for PWAs on iOS: giving you some PWA functionality where iOS is lacking. We make it easy to publish your PWA to the iOS App Store without any changes to your PWA code. 90 | 91 | If Cordova's broader approach is the right tool for your PWA on iOS, by all means use it. 92 | 93 | ## Need more help? 94 | 95 | If you're stuck, the PWABuilder team would be glad to point you in the right direction. [Open an issue](https://github.com/pwa-builder/PWABuilder/issues/new?assignees=&labels=ios-platform,question%20%3Agrey_question%3A&body=Type%20your%20question%20here.%20Please%20include%20the%20URL%20to%20your%20PWA.%0A%0A%3E%20If%20my%20answer%20was%20in%20the%20docs%20all%20along%2C%20I%20promise%20to%20give%20%245%20USD%20to%20charity.) and we'll help walk you through it. 96 | -------------------------------------------------------------------------------- /src/docs/ios/ios-platform/ios-platform.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: doc 3 | title: iOS Platform 4 | excerpt: Publish your PWA to the iOS App Store 5 | description: Publish your PWA to the iOS App Store 6 | date: 2021-10-26 7 | updatedDate: 2021-10-28 8 | trending: false 9 | featured: true 10 | recommended: true 11 | isDocumentation: true 12 | backUrl: '/docs' 13 | image: docs/ios/ios-platform/ios-store-logo.png 14 | author: 15 | name: Judah Gabriel Himango 16 | tags: 17 | - docs 18 | - Documentation 19 | - iOS 20 | --- 21 | 22 | Ios Store Logo 23 | 24 | The PWABuilder iOS platform is an experimental project that utilizes a Webkit-based web view (WKWebView) to load your PWA on iOS and enable some PWA functionality. 25 | 26 | When you use PWABuilder to package your PWA for iOS, your download will include an Xcode project customized for your PWA. Once downloaded, see [Build Your iOS App](/docs/build-your-ios-app) for your next steps. 27 | 28 | ## What can it do? 29 | 30 |
31 | Service worker support 32 | 33 | We utilize [App-Bound Domains]() to enable service workers to function when your PWA is run on supported platforms (iOS 14 and above). 34 | 35 |
36 | 37 |
38 | Shortcuts 39 | 40 | If you've defined [app shortcuts](https://web.dev/app-shortcuts/) in your web manifest, they'll automatically work in your iOS app. See [this issue](https://github.com/pwa-builder/pwabuilder-ios/issues/7) for more details. 41 | 42 |
43 | 44 |
45 | URL capture 46 | 47 | By default, PWABuilder's iOS platform generates a URL capture-ready app. If a user installs your app, you can have your app's URLs open in your PWA, rather than in the browser. 48 | 49 | To enable this, deploy an [Apple App-Site Association file](https://developer.apple.com/documentation/xcode/supporting-associated-domains) to your web server. Your app already contains the necessary configuration to utilize link capture. See [our iOS Platform FAQ](/docs/ios-faq) for more info. 50 | 51 |
52 | 53 |
54 | Permitted navigation scopes 55 | 56 | When you generate your iOS app in PWABuilder, you can specify a list of permitted URLs that are considered in-scope for the app: 57 | 58 | Screenshot of the iOS publish section on PWABuilder 59 | 60 | This can be useful when your PWA needs to work with 3rd party URLs, such as `Login with Google` or other authentication providers. 61 | 62 |
63 | 64 |
65 | Status bar customization 66 | 67 | The iOS status bar -- containing your iPhone's reception bars, battery level, and more -- can be customized when shown in your app. By default, we set the status bar color to your manifest's `theme_color`, or white if you don't have a `theme_color` supplied. 68 | 69 | As a future enhancement, we may allow you to hide the status bar -- useful in `display: fullscreen` PWAs like games -- as well as change the status bar foreground color. 70 | 71 |
72 | 73 |
74 | Splash screen from manifest props 75 | 76 | While your app initializes and the web view loads your PWA, users will see a splash screen. The splash screen will be a solid background color, with your app's icon centered and a progress bar beneath it: 77 | 78 | 79 | 80 | The splash screen background color is taken from your manifest's `background_color`. The icon is from your manifest's `icons`, and the progress bar color is styled using your manifest's `theme_color`. 81 | 82 | When your app finishes initializing and your PWA is done loading into the web view, the splash screen disappears and your PWA takes the fore. 83 | 84 |
85 | 86 |
87 | iOS app awareness from JS code 88 | 89 | In your PWA, you can detect if you're running in the iOS app by looking for an `app-platform` cookie, its value set to `iOS App Store`. 90 | 91 |
92 | 93 |
94 | Mac Store support 95 | 96 | When publishing your iOS app, you can opt-in to publishing to the Mac App Store as well. Your app will be available to M1 devices running macOS 11 or later. 97 | 98 |
99 | 100 | ## PWABuilder iOS documentation 101 | 102 | Once you've downloaded your iOS app package from PWABuilder, you should [build and test your app](/docs/build-your-ios-app). 103 | 104 | After building and testing your app, [publish your PWA to the iOS App Store](/docs/publish-your-pwa-to-the-ios-app-store). 105 | 106 | Finally, we recommend reading our [PWABuilder iOS FAQ](/docs/ios-faq). 107 | 108 | ## A special thanks 109 | 110 | A great big thank you to PWA enthusiast, open sourcer, and [HostMe](https://www.hostmeapp.com/) developer [Gleb Khmyznikov](https://github.com/khmyznikov). In the true open source spirit, Gleb, along with several members of the PWABuilder open source community, contributed open source iOS projects they had successfully published to the iOS App Store. Gleb suggested we could fork his project for a fresh PWABuilder iOS platform based on latest iOS technologies. 111 | 112 | Gleb encouraged us, provided us help and documentation, and [his code](https://github.com/khmyznikov/ios-pwa-wrap), an outgrowth of his work at [HostMe](https://www.hostmeapp.com/), serves as the foundation for PWABuilder's iOS platform. Gleb, you rock! Thank you for your code, your encouragement, your technical help, your answers to our questions over the last few months. ♥ 113 | 114 | ## Disclaimer 115 | 116 | PWABuilder's iOS platform is experimental, and PWABuilder doesn't guarantee that your app will be accepted into Apple's App Store. 117 | 118 | In 2019, Apple released new [guidelines for HTML5 apps in the App Store](https://developer.apple.com/news/?id=09062019b). The new guidelines appear to state that certain kinds of web apps (gambling, lotteries, etc.) may not be accepted into the App Store. 119 | 120 | The PWABuilder team attempted to clarify with Apple their stance on PWAs in their App Store. Despite several meetings, we were unable to receive an official answer from Apple. 121 | 122 | Since that time, a few members of the PWABuilder open source community successfully published PWAs in the iOS app store via web view-based apps. Thus, we are releasing our new iOS platform with the knowledge that Apple may not approve some PWAs, especially if they are little more than traditional websites in an app frame. 123 | 124 | **Our recommendation is to build a great PWA.** PWAs that provide real value to users, PWAs that are more than just websites, PWAs that look and feel like real apps. These are more likely to pass certification and get into the app store. Provide value to your users, and app stores will _want_ your PWA. 125 | -------------------------------------------------------------------------------- /src/docs/ios/ios-platform/ios-store-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/ios/ios-platform/ios-store-logo.png -------------------------------------------------------------------------------- /src/docs/windows/finding-publisher-info/finding-your-windows-publisher-info.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: doc 3 | title: Finding your Windows Publisher info 4 | excerpt: How to get the 3 important details to create your MSIX package 5 | description: How to get the 3 important details to create your MSIX package 6 | date: 2021-06-24 7 | updatedDate: 2021-06-24 8 | trending: false 9 | featured: false 10 | image: docs/windows/windows-store-documentation/StoreLogo.png 11 | isDocumentation: true 12 | backUrl: '/docs' 13 | author: 14 | name: PWA Builder documentation 15 | tags: 16 | - docs 17 | - Documentation 18 | - Windows 19 | --- 20 | 21 | In order to publish your PWA in the Microsoft Store, you'll need 3 things: 22 | 23 | 1. `Package ID` 24 | 2. `Publisher ID` 25 | 3. `Publisher display name` 26 | 27 | To get this information, go to [Windows Partner Center](https://partner.microsoft.com/dashboard) and click on your app. (Don't have an app yet? [Create one](/docs/publish-a-new-app-to-the-microsoft-store/).) 28 | 29 | Choose `Product Management` -> `Product Identity`: 30 | 31 | The partner center showing the required data 32 | 33 | You'll see the Package ID, Publisher ID, and publisher display name. You'll need all three of these to publish in the Store. 34 | 35 | On PWABuilder when generating your Windows app, add these values to the Windows package options: 36 | 37 | Publisher and package info in PWABuilder 38 | 39 | ## Need more help? 40 | 41 | Having trouble getting your package info? You can [open an issue](https://github.com/pwa-builder/pwabuilder/issues) and we'll help walk you through it. 42 | -------------------------------------------------------------------------------- /src/docs/windows/finding-publisher-info/required-data-from-partner-center.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/finding-publisher-info/required-data-from-partner-center.png -------------------------------------------------------------------------------- /src/docs/windows/finding-publisher-info/required-data-in-pwabuilder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/finding-publisher-info/required-data-in-pwabuilder.png -------------------------------------------------------------------------------- /src/docs/windows/fixing-common-errors/app-name-pwabuilder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/fixing-common-errors/app-name-pwabuilder.png -------------------------------------------------------------------------------- /src/docs/windows/fixing-common-errors/app-name.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/fixing-common-errors/app-name.png -------------------------------------------------------------------------------- /src/docs/windows/fixing-common-errors/fixing-common-errors.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: doc 3 | title: Fixing common errors in Microsoft Store app submissions 4 | excerpt: FAQ 5 | description: FAQ 6 | date: 2021-06-24 7 | updatedDate: 2021-06-24 8 | trending: true 9 | featured: false 10 | image: docs/windows/windows-store-documentation/StoreLogo.png 11 | isDocumentation: true 12 | backUrl: '/docs' 13 | author: 14 | name: PWA Builder documentation 15 | tags: 16 | - docs 17 | - Documentation 18 | - Windows 19 | --- 20 | 21 | This guide describes how to fix errors you may receive when uploading your PWA app package. 22 | 23 | - [Invalid package publisher name](#invalid-package-publisher-name) 24 | - [Invalid package identity name](#invalid-package-identity-name--invalid-package-family-name) 25 | - [Invalid package family name](#invalid-package-identity-name--invalid-package-family-name) 26 | - [This package's manifest uses a display name that you have not reserved](#this-packages-manifest-uses-a-display-name-that-you-have-not-reserved) 27 | 28 | Be aware most of these issues are due to using the incorrect publisher information. [Get the correct publisher info](/docs/finding-your-windows-publisher-info/). 29 | 30 | ## "Invalid package publisher name" 31 | 32 | The invalid publisher ID warning 33 | 34 | This error indicates that you need to rebuild your PWA app package with the correct `publisher`. [How can I find my publisher ID?](/docs/finding-your-windows-publisher-info/) 35 | 36 | ## "Invalid package identity name" / "Invalid package family name" 37 | 38 | The invalid package ID warning 39 | 40 | These two combined errors, `Invalid package identity name` and `Invalid package family name`, can be fixed by rebuilding your PWA app package on PWABuilder with the correct package ID. 41 | 42 | In the above error message, the expected package ID is `42541MyCompany.MyAwesomePwa` - go to PWABuilder and rebuild your package with the correct package ID:
43 | 44 | ## "This package's manifest uses a display name that you have not reserved" 45 | 46 | The display name not reserved warning 47 | 48 | This means the app name you used when generating your app package on PWABuilder doesn't match the app name reserved in Partner Center. 49 | 50 | The app name in Partner Center... 51 | 52 | The app name in partner center 53 | 54 | ...must match the app name you used on PWABuilder: 55 | 56 | 57 | 58 | ## Need more help? 59 | 60 | We're here to help. You can [open an issue](https://github.com/pwa-builder/pwabuilder/issues) and we'll help walk you through it. -------------------------------------------------------------------------------- /src/docs/windows/fixing-common-errors/invalid-package-id.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/fixing-common-errors/invalid-package-id.png -------------------------------------------------------------------------------- /src/docs/windows/fixing-common-errors/invalid-publisher-id.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/fixing-common-errors/invalid-publisher-id.png -------------------------------------------------------------------------------- /src/docs/windows/fixing-common-errors/not-reserved.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/fixing-common-errors/not-reserved.png -------------------------------------------------------------------------------- /src/docs/windows/fixing-common-errors/updated-package-id.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/fixing-common-errors/updated-package-id.png -------------------------------------------------------------------------------- /src/docs/windows/image-recommendations/windows-image-app-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/image-recommendations/windows-image-app-icon.png -------------------------------------------------------------------------------- /src/docs/windows/image-recommendations/windows-image-display-scales.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/image-recommendations/windows-image-display-scales.png -------------------------------------------------------------------------------- /src/docs/windows/image-recommendations/windows-image-large-tile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/image-recommendations/windows-image-large-tile.png -------------------------------------------------------------------------------- /src/docs/windows/image-recommendations/windows-image-medium-tile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/image-recommendations/windows-image-medium-tile.png -------------------------------------------------------------------------------- /src/docs/windows/image-recommendations/windows-image-small-tile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/image-recommendations/windows-image-small-tile.png -------------------------------------------------------------------------------- /src/docs/windows/image-recommendations/windows-image-splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/image-recommendations/windows-image-splash.png -------------------------------------------------------------------------------- /src/docs/windows/image-recommendations/windows-image-store-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/image-recommendations/windows-image-store-logo.png -------------------------------------------------------------------------------- /src/docs/windows/image-recommendations/windows-image-target-size.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/image-recommendations/windows-image-target-size.png -------------------------------------------------------------------------------- /src/docs/windows/image-recommendations/windows-image-wide-tile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/image-recommendations/windows-image-wide-tile.png -------------------------------------------------------------------------------- /src/docs/windows/image-recommendations/windows-os-dark-mode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/image-recommendations/windows-os-dark-mode.png -------------------------------------------------------------------------------- /src/docs/windows/image-recommendations/windows-os-light-mode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/image-recommendations/windows-os-light-mode.png -------------------------------------------------------------------------------- /src/docs/windows/next-steps/next-steps.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: doc 3 | title: Next steps for getting your PWA into the Microsoft Store 4 | excerpt: You've successfully generated a Microsoft Store app package, let's see how to publish it now 5 | description: You've successfully generated a Microsoft Store app package, let's see how to publish it now 6 | date: 2021-06-24 7 | updatedDate: 2021-06-24 8 | trending: false 9 | featured: false 10 | image: docs/windows/windows-store-documentation/StoreLogo.png 11 | isDocumentation: true 12 | backUrl: '/docs' 13 | author: 14 | name: PWA Builder documentation 15 | tags: 16 | - docs 17 | - Documentation 18 | - Windows 19 | - Microsoft Store 20 | --- 21 | 22 | You've successfully generated a Microsoft Store app package for your PWA. 😎 23 | 24 | Your next steps: 25 | 1. **Test your app**: run `install.ps1` to install your app on your Windows machine. 26 | 2. **Submit your app packages to the Microsoft Store**: upload the `.appxbundle` and `.msixbundle` files to the Microsoft Store. 27 | 28 | Each step is explained below. 29 | 30 | ## 1. Test your app on your Windows machine 31 | 32 | Your zip file contains `install.ps1`. This is a PowerShell script that installs your app and lets you test it before submitting to the Store. 33 | 34 | Right-click `install.ps1` and choose `Run with PowerShell`. 35 | 36 | > 💁‍♂️ *Heads up*: 37 | > 38 | > If you get an error saying, *"install.ps1 cannot be loaded because running scripts is disabled on this system"*, you can fix this by opening PowerShell as Administrator, then entering the command `Set-ExecutionPolicy bypass` Once completed, you'll be able to run `install.ps1`. 39 | 40 | The install script will install and launch your PWA app. Once complete, you'll find your app in the Start Menu. 41 | 42 | ## 2. Submit your app packages to the Microsoft Store 43 | 44 | Your zip file [contains 2 app packages](/docs/what-is-a-classic-package/): 45 | 46 | - `{app name}.msixbundle` - the main app package 47 | - `{app name}.classic.appxbundle` - app package that allows users on older versions of Windows (below 10.0.19041, May 2020 Update) to run your app. See our [classic app package explainer](/docs/what-is-a-classic-package/) for details. 48 | 49 | Both packages can be submitted directly to the Microsoft Store through the [Windows Partner Center](https://partner.microsoft.com/dashboard) 50 | 51 | When you're ready to publish to the Store, you can either 52 | - [Publish a new app in the Store](/docs/publish-a-new-app-to-the-microsoft-store/) 53 | - [Update an existing app in the Store](/docs/update-an-existing-app-in-the-microsoft-store/) 54 | 55 | Once you submit your app, it will be reviewed. Once approved -- typically within 24 hours -- your PWA will be available in the Microsoft Store and accessible to ~1 billion Windows users worldwide. 😎 56 | 57 | ## Recommended images for Windows 58 | 59 | To help make your PWA shine on Windows, check out our [Windows app images explainer](/docs/image-recommendations-for-windows-pwa-packages/) for details about what image sizes you should include in your web app manifest for the best experience on Windows. 60 | 61 | ## Promote your app with a "Get this app in the Microsoft Store" badge 62 | 63 | Once you've published your app in the Store, help your users find it. Go to the [app badges site](https://developer.microsoft.com/en-us/microsoft-store/badges/) and generate a "Get this app on the Microsoft Store" badge and add the badge to your site. 64 | 65 | The badge allows users on Windows to install your app with a single click. 66 | 67 | ## Need more help? 68 | 69 | If you're having trouble with your app store submission, be sure to read [fixing package errors](/docs/image-recommendations-for-windows-pwa-packages/). 70 | 71 | If you're still hitting issues, we're here to help. You can [open an issue](https://github.com/pwa-builder/pwabuilder/issues) and we'll help walk you through 72 | -------------------------------------------------------------------------------- /src/docs/windows/publish-new-windows-app/add-program.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/publish-new-windows-app/add-program.png -------------------------------------------------------------------------------- /src/docs/windows/publish-new-windows-app/both-packages.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/publish-new-windows-app/both-packages.png -------------------------------------------------------------------------------- /src/docs/windows/publish-new-windows-app/create-app.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/publish-new-windows-app/create-app.png -------------------------------------------------------------------------------- /src/docs/windows/publish-new-windows-app/enroll-apps.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/publish-new-windows-app/enroll-apps.png -------------------------------------------------------------------------------- /src/docs/windows/publish-new-windows-app/full-trust-package-man.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/publish-new-windows-app/full-trust-package-man.png -------------------------------------------------------------------------------- /src/docs/windows/publish-new-windows-app/full-trust-restricted.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/publish-new-windows-app/full-trust-restricted.png -------------------------------------------------------------------------------- /src/docs/windows/publish-new-windows-app/not-started-status.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/publish-new-windows-app/not-started-status.png -------------------------------------------------------------------------------- /src/docs/windows/publish-new-windows-app/packages-new.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/publish-new-windows-app/packages-new.png -------------------------------------------------------------------------------- /src/docs/windows/publish-new-windows-app/publish-new-windows-app.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: doc 3 | title: Publish a new app to the Microsoft Store 4 | excerpt: This guide shows how to publish your PWA as a new app in the Store 5 | description: This guide shows how to publish your PWA as a new app in the Store 6 | date: 2021-06-24 7 | updatedDate: 2021-06-24 8 | trending: false 9 | featured: false 10 | image: docs/windows/windows-store-documentation/StoreLogo.png 11 | isDocumentation: true 12 | backUrl: '/docs' 13 | author: 14 | name: PWA Builder documentation 15 | tags: 16 | - docs 17 | - Documentation 18 | - Windows 19 | --- 20 | 21 | This guide shows how to publish your PWA as a new app in the Store. If you already have an app in the Store, you should instead [update your existing app](/docs/update-an-existing-app-in-the-microsoft-store/). 22 | 23 | ## Enroll in Windows developer program 24 | 25 | Login to [Windows Partner Center](https://partner.microsoft.com/dashboard) with your Microsoft account. 26 | 27 | Then, go to your [dashboard](https://partner.microsoft.com/en-us/dashboard/home) to see your enrolled programs. If `Windows & Xbox` is listed, great, you're already enrolled. If not, choose `Add program`:
A screenshot that shows where the add program button is 28 | 29 | Then, under `Windows & Xbox`, choose `Get started`: 30 | 31 | A screenshot that shows where the Get Started button is 32 | 33 | ## Create your app 34 | 35 | Now that you're enrolled in the Windows developer program, on the left-side nav bar, under `Windows & Xbox`, choose [`Overview`](https://partner.microsoft.com/en-us/dashboard/windows/overview), and click `Create a new app`: 36 | 37 | A screenshot that shows where the create a new app button is 38 | 39 | ## Start a new submission 40 | 41 | If you haven't yet generated your Windows app package through PWABuilder, do that first; you now have everything you need to generate your app package. 42 | 43 | Once you've done that, follow the steps below. 44 | 45 | Click `Start a new Submission`: 46 | 47 | A screenshot that shows where the start a new submission button is 48 | 49 | ## Add packages 50 | 51 | On the submission details page, you'll see your most recent app submission. Click `Packages` to upload your app packages: 52 | 53 | A screenshot that shows where the packages button is 54 | 55 | On the packages screen, click `Browse your files`. When browsing for your files, **choose both package files**, `*.msixbundle` *and* `*.appxbundle`. 56 | 57 | > 💁🏾‍♂️ *Heads up* 58 | > 59 | > Once your packages finish uploading, you may see warnings about restricted capabilities:
A screenshot that shows what the restricted capabilities warning looks like

60 | > These warnings can be safely ignored. 61 | 62 | 63 | > 💁‍♂️ *Other errors* 64 | > 65 | > If you're getting other errors when uploading your packages, see [fixing package errors](/docs/fixing-common-errors-in-microsoft-store-app-submissions/). 66 | 67 | Once you upload both package files, you should see something like this, with both packages listed: 68 | 69 | A screenshot that shows what the packages list looks like 70 |
71 | 72 | > 💁🏽‍♀️ *Heads up*: 73 | > 74 | > Your classic app package has a lower version than the main app package. So if you packaged your PWA as version 2.0.0, the classic app package will be version 1.9.0. This way you can submit both packages as a single app. 75 | 76 | Lastly, in the platforms support list, choose `Windows 10 Desktop` and uncheck all other platforms: 77 | 78 | A screenshot that shows where the Windows 10 Desktop option is 79 |
80 |
81 | 82 | > 💁🏿‍♀️ *Heads up* 83 | > 84 | > While your PWA will run on Windows 10 desktop today, we expect Xbox support to land in 2021. 😎 85 | 86 | Click `Save` to save your packages and return to the submission details screen. 87 | 88 | ## Complete remaining options 89 | 90 | You should now see the submission status. Fill out any incomplete statuses: 91 | 92 | A screenshot that shows what incomplete statuses will look like 93 | 94 | > 💁🏼‍♀️ *Heads up* 95 | > 96 | > In `Submission options`, you may receive a warning about restricted capabilities:
A screenshot that shows what the restricted capability warning looks like

97 | > You can write, "Needed for PWA Hosted App model, created by pwabuilder.com" 98 | 99 | Complete all such statuses, then click `Submit to the Store` when finished. 100 | 101 | ## Need more help? 102 | 103 | If you're having trouble with your app store submission, be sure to read [fixing package errors](/docs/fixing-common-errors-in-microsoft-store-app-submissions/). 104 | 105 | If you're still hitting issues, we're here to help. You can [open an issue](https://github.com/pwa-builder/pwabuilder/issues) and we'll help walk you through it. -------------------------------------------------------------------------------- /src/docs/windows/publish-new-windows-app/start-submission.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/publish-new-windows-app/start-submission.png -------------------------------------------------------------------------------- /src/docs/windows/publish-new-windows-app/win10-desktop-only.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/publish-new-windows-app/win10-desktop-only.png -------------------------------------------------------------------------------- /src/docs/windows/pwa-simulator/descriptions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/pwa-simulator/descriptions.png -------------------------------------------------------------------------------- /src/docs/windows/pwa-simulator/manifest-template.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/pwa-simulator/manifest-template.png -------------------------------------------------------------------------------- /src/docs/windows/pwa-simulator/mode2-code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/pwa-simulator/mode2-code.png -------------------------------------------------------------------------------- /src/docs/windows/pwa-simulator/pwa-simulator.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: doc 3 | title: Simulate your PWA on Windows 11 4 | excerpt: This guide shows you how to use and customize the PWA simulator 5 | description: Visualize your PWA on Windows 11 before packaging for the Microsoft Store 6 | date: 2021-08-03 7 | trending: false 8 | featured: false 9 | image: docs/windows/pwa-simulator/store-preview.png 10 | isDocumentation: true 11 | backUrl: '/docs' 12 | author: 13 | name: PWA Builder documentation 14 | tags: 15 | - docs 16 | - Documentation 17 | - Windows 18 | --- 19 | 20 | Have you ever wondered if it would be possible to see how your PWA looks on Windows 11 before packaging for the Microsoft Store? The new PWA simulator enables you to preview your PWA experience on Windows 11 and see how your application will look in the Microsoft Store and even on the start menu to your users. You can also utilize the code editor within the simulator to edit manifest values real-time and see how changes in your manifest will impact your end users experience on Windows 11. This can help for you to understand what steps you can take to improve your PWA before you package it for distribution on the Microsoft Store. This guide shows you how to use *PWA simulator*, a [web component](https://medium.com/pwabuilder/building-pwas-with-web-components-33f986bf8e4c) that allows you to simulate your PWA on Windows 11 based on your app's `manifest.json` file. Below is the simulation of PWABuilder Using the link below you can now input the link to your PWA and see how your application will appear on a Windows 11 device. Want to try it out with your own URL? Then you can visit the [component's demo site](https://thankful-field-01d77ed10.azurestaticapps.net/) and enter the URL to your PWA! 21 | 22 | ## Installation 23 | The component can be [downloaded](https://www.npmjs.com/package/@pwabuilder/pwa-simulator) from `npm` with `npm i @pwabuilder/pwa-simulator`. Typings are also included in the package. 24 | 25 | ## Using this component 26 | 27 | ### Modes 28 | The `pwa-simulator` can be used in 2 ways: 1. *You can enter the PWA's URL in the initially rendered form*, and via the [\`pwabuilder-manifest-finder\` API](https://github.com/pwa-builder/pwabuilder-manifest-finder), the component fetches the corresponding web manifest. ![URL simulator form](/docs/windows/pwa-simulator/url-form.png) 2. *The site's URL can be passed as a property to the component*, together with the web manifest. Note that the PWA's URL is still needed in this mode to display the icons and other images. ![Mode 2 example](/docs/windows/pwa-simulator/mode2-code.png) 29 | 30 | ## Configuration 31 | All properties are optional and have default values, but for the optimal experience these should be modified as needed. Note that in the HTML markup, property names should be all in lowercase. For more information refer to [lit's documentation](https://lit.dev/docs/components/properties/#attributes). 32 | - `siteUrl`: The PWA's URL. If not defined, the component will initially display a form to input the site's URL (see mode 1 above). 33 | - `manifest`: The input manifest object. The `siteUrl` property should be defined if a manifest is given as input. 34 | - Default: ![Manifest template](/docs/windows/pwa-simulator/manifest-template.png) 35 | - `hideEditor`: If true, the code editor is hidden and only the simulator window is displayed. 36 | - Default: `false` 37 | - `explanations`: Object containing the explanation messages that are displayed when the user interacts with the simulator. 38 | - `initial` is the starting message (can be used to suggest an initial action to the user). 39 | 40 | `appWindow`, `startMenu`, `jumpList` and `store` are all shown when the respective window is open. If a value isn't specified, the default message is used. 41 | 42 | - `Default`: ![Explanations messages](/docs/windows/pwa-simulator/descriptions.png) 43 | 44 | - `explanationDisplayTime`: The duration (in milliseconds) of the explanation message display, after which it fades out. - Default: 5000 (5 seconds) 45 | 46 | ## Styling 47 | The simulator exposes the parts below for customization with the [CSS ::part()pseudo-element](https://css-tricks.com/styling-in-the-shadow-dom-with-css-shadow-parts/): 48 | - `background`: The simulator's main container. 49 | - `content`: The container of both the text editor and platform window. 50 | - `input-form`: The form for entering the PWA's URL. 51 | - `input-title`: The title of the form for entering the PWA's URL. 52 | - `input-field`: The text field for entering the PWA's URL. 53 | - `input-button`: The button that submits the form for entering the PWA's URL. 54 | 55 | The following [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) can also be provided: 56 | - `--font-family`: The component's main font family. 57 | - `--font-color`: The component's main font color. 58 | - `--background`: The CSS background of the entire component. 59 | - `--pwa-background-color`: Fallback background color to use in case it is not defined in the manifest. 60 | - `--pwa-theme-color`: Fallback theme color to use in case it is not defined in the manifest. 61 | 62 | ## Next steps 63 | In the future, the PWABuilder team hopes to integrate the Windows 11 simulator into the manifest editor on the PWABuilder site. This would enable developers to see and feel the PWA Windows 11 experience as they are editing their manifest for store packaging. Have feedback on what you want to see built out next in the Windows 11 simulator? Open a [feature request](https://github.com/pwa-builder/pwa-simulator) on GitHub and make sure to mention the Windows 11 simulator with your recommendations. Ready to get started packaging your PWA, head over to [pwabuilder.com ](https://www.pwabuilder.com/) to package your PWA today! ## Need help? Are you having trouble using this component, encountered a bug, or just have a question concerning its customization? Then feel free to [open an issue](https://github.com/pwa-builder/pwa-simulator) and we'll do our best to help! 64 | -------------------------------------------------------------------------------- /src/docs/windows/pwa-simulator/store-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/pwa-simulator/store-preview.png -------------------------------------------------------------------------------- /src/docs/windows/pwa-simulator/url-form.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/pwa-simulator/url-form.png -------------------------------------------------------------------------------- /src/docs/windows/update-existing-app/add-submission.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/update-existing-app/add-submission.png -------------------------------------------------------------------------------- /src/docs/windows/update-existing-app/both-packages.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/update-existing-app/both-packages.png -------------------------------------------------------------------------------- /src/docs/windows/update-existing-app/browse-for-package.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/update-existing-app/browse-for-package.png -------------------------------------------------------------------------------- /src/docs/windows/update-existing-app/existing-apps.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/update-existing-app/existing-apps.png -------------------------------------------------------------------------------- /src/docs/windows/update-existing-app/full-trust-restricted.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/update-existing-app/full-trust-restricted.png -------------------------------------------------------------------------------- /src/docs/windows/update-existing-app/full-trust.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/update-existing-app/full-trust.png -------------------------------------------------------------------------------- /src/docs/windows/update-existing-app/packages.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/update-existing-app/packages.png -------------------------------------------------------------------------------- /src/docs/windows/update-existing-app/remaining-options.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/update-existing-app/remaining-options.png -------------------------------------------------------------------------------- /src/docs/windows/update-existing-app/update-an-existing-app.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: doc 3 | title: Update an existing app in the Microsoft Store 4 | excerpt: Sometimes, you'll need to do an update 5 | description: This guide shows how to publish your PWA as an update to an existing app in the Store 6 | date: 2021-06-24 7 | updatedDate: 2021-06-24 8 | trending: false 9 | featured: false 10 | image: docs/windows/windows-store-documentation/StoreLogo.png 11 | isDocumentation: true 12 | backUrl: '/docs' 13 | author: 14 | name: PWA Builder documentation 15 | tags: 16 | - docs 17 | - Documentation 18 | - Windows 19 | --- 20 | 21 | This guide shows how to publish your PWA as an update to an existing app in the Microsoft Store. If you don't have an app in the Store yet, you should instead [publish a new app](/publish-new-app.md). 22 | 23 | ## Choose the app you want to update 24 | 25 | Login to [Windows Partner Center](https://partner.microsoft.com/dashboard), then go to `Windows & Xbox` -> `Overview`. Your existing apps will be listed: 26 | 27 | A screenshot that shows your existing apps list 28 | 29 | Click the name of the app you want to update, and you'll be taken to the app details page. 30 | 31 | ## Add a new submission 32 | 33 | On the app details page, you'll see your most recent app submission. Click `Update` to add a new submission: 34 | 35 | A screenshot that shows where the update button is 36 | 37 | On the submission details page, choose `Packages`: 38 | 39 | A screenshot that shows where the packages button is 40 | 41 | On the packages screen, click `Browse your files`: 42 | 43 | A screenshot that shows where the browse your files button is 44 | 45 | When browsing for your files, **choose both package files**, `*.msixbundle` and `*.appxbundle`. 46 | 47 | > 💁🏾‍♂️ *Heads up* 48 | > 49 | > Once your packages finish uploading, you may see the following warning about full trust:

50 | > This warning can be safely ignored. 51 | 52 | 53 | > 💁‍♂️ *Other errors* 54 | > 55 | > If you're getting other errors when uploading your packages, see [fixing package errors](/package-errors.md). 56 | 57 | Once you upload both package files, you should see something like this, with both packages listed: 58 | 59 | A screenshot that shows what the uploaded packages look like 60 |
61 | 62 | > 💁🏽‍♀️ *Heads up*: 63 | > 64 | > Your classic app package has a lower version than the main app package. So if you packaged your PWA as version 2.0.0, the classic app package will be version 1.9.0. This way you can submit both packages as a single app. 65 | 66 | Lastly, in the platforms support list, choose `Windows 10 Desktop` and uncheck all other platforms: 67 | 68 | A screenshot that shows where the Windows 10 Desktop option is 69 |
70 | 71 | > 💁🏿‍♀️ *Heads up* 72 | > 73 | > While your PWA will run on Windows 10 desktop today, we expect Xbox support to land in 2021. 😎 74 | 75 | Click `Save` to save your packages and return to the submission details screen. 76 | 77 | ## Complete remaining options 78 | 79 | You should now see the submission status. Fill out any `in progress` or `incomplete` settings: 80 | 81 | A screenshot that shows what in progress or incomplete settings look like 82 | 83 | Fill out the missing sections, then click `Submit to the Store` when finished. 84 | 85 | > 💁🏼‍♀️ *Heads up* 86 | > 87 | > In `Submission options`, you may receive a warning about full trust capability:
A screenshot that shows what the full trust capability warning is about
88 | > You can write, "Needed for PWA Hosted App model, created by pwabuilder.com" 89 | 90 | ## Need more help? 91 | 92 | If you're having trouble with your app store submission, be sure to read [fixing package errors](/package-errors.md). 93 | 94 | If you're still hitting issues, we're here to help. You can [open an issue](https://github.com/pwa-builder/pwabuilder/issues) and we'll help walk you through it. -------------------------------------------------------------------------------- /src/docs/windows/update-existing-app/win10-desktop-only.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/update-existing-app/win10-desktop-only.png -------------------------------------------------------------------------------- /src/docs/windows/what-is-classic-package/what-is-a-classic-package.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: doc 3 | title: What is a classic package 4 | excerpt: Why 2 different MSIX files? 5 | description: PWABuilder's Windows platform generates 2 versions of your app, know why 6 | date: 2021-06-24 7 | updatedDate: 2021-06-24 8 | trending: false 9 | featured: false 10 | image: docs/windows/windows-store-documentation/StoreLogo.png 11 | isDocumentation: true 12 | backUrl: '/docs' 13 | author: 14 | name: PWA Builder documentation 15 | tags: 16 | - docs 17 | - Documentation 18 | - Windows 19 | --- 20 | 21 | PWABuilder's Windows platform generates 2 versions of your app: 22 | 23 | - Modern package that works on newer versions of Windows. 24 | - Classic package that works on older versions of Windows, with fewer bells and whistles. 25 | 26 | ## Modern package 27 | 28 | The modern package, `{app name}.msixbundle`, uses the [Hosted App Model](https://blogs.windows.com/windowsdeveloper/2020/03/19/hosted-app-model/) to install your PWA as a Windows app hosted by Edge. This app works only on Windows version 10.0.19041, May 2020 Update and newer. 29 | 30 | ## Classic package 31 | 32 | The classic package, `{app name}.classic.appxbundle`, runs on older versions of Windows, versions prior to 10.0.19041, May 2020 Update. This version still uses the new Edge, but it doesn't rely on the Hosted App Model. Instead, it uses a bootstrapper app which instructs Edge to install and launch the PWA. 33 | 34 | The classic package still runs in the new Chromium-based Edge, but lacks deep integration with the OS. 35 | 36 | ## Versioning 37 | 38 | The modern package should have a version greater than the classic package. For example, if your modern package is version `2.0.0`, the classic package should be `1.9.0`. 39 | 40 | Be aware that your app version cannot begin with zero. 41 | 42 | Additionally, app version must contain 3 sections. 43 | 44 | - `0.5.2` - ❌ Invalid, versions cannot start with zero 45 | - `1.5.2.1` - ❌ Invalid, the 4th section is reserved for Store use 46 | - `1.5.2` - ✔ Valid 47 | 48 | ## Submitting your app to the Store 49 | 50 | When you submit your app to the Microsoft Store, you'll [upload both modern and classic app packages](https://github.com/pwa-builder/pwabuilder-windows-chromium-docs/blob/master/publish-new-app.md#add-packages). Users will be offered to download whichever version their OS can support. -------------------------------------------------------------------------------- /src/docs/windows/windows-store-documentation/StoreLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/docs/windows/windows-store-documentation/StoreLogo.png -------------------------------------------------------------------------------- /src/docs/windows/windows-store-documentation/windows-store-documentation.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: doc 3 | title: Windows Platform 4 | url: /windows-store-documentation 5 | excerpt: Publish your PWA to the Microsoft Store 6 | description: Publish your PWA to the Microsoft Store 7 | date: 2021-06-24 8 | updatedDate: 2021-10-26 9 | trending: false 10 | featured: true 11 | recommended: true 12 | isDocumentation: true 13 | backUrl: '/docs' 14 | image: docs/windows/windows-store-documentation/StoreLogo.png 15 | author: 16 | name: PWA Builder documentation 17 | tags: 18 | - docs 19 | - Documentation 20 | - Windows 21 | --- 22 | 23 | Windows Logo 24 | 25 | Both the Microsoft Store and Windows itself natively supports PWAs as first-class apps. 26 | 27 | Follow these steps to get your PWA listed in the Microsoft Store: 28 | 29 | 1. Reserve an app name in the [Windows Partner Center](https://partner.microsoft.com/dashboard) as explained in this documentation [Publish your Progressive Web App to the Microsoft Store](https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/microsoft-store) 30 | 2. Create your Microsoft Store app package on [PWA Builder](https://www.pwabuilder.com) 31 | 3. Follow [the Next steps for getting your PWA into the Microsoft Store](/docs/next-steps-for-getting-your-pwa-into-the-microsoft-store/) 32 | 33 | ### Related documentation 34 | 35 | - [Publish a new app to the Microsoft Store](/docs/publish-a-new-app-to-the-microsoft-store/) 36 | - [Finding your Windows Publisher info](/docs/finding-your-windows-publisher-info/) 37 | - [Image recommendations for Windows PWA packages](/docs/image-recommendations-for-windows-pwa-packages/) 38 | - [Fixing common errors in Microsoft Store app submissions](/docs/fixing-common-errors-in-microsoft-store-app-submissions/) 39 | - [Update an existing app in the Store](/docs/update-an-existing-app-in-the-store/) 40 | - [What is a classic package](/docs/what-is-a-classic-package/) 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /src/globals/build.js: -------------------------------------------------------------------------------- 1 | require("dotenv").config() 2 | 3 | module.exports = { 4 | env: process.env.ELEVENTY_ENV, 5 | timestamp: new Date(), 6 | timezone: process.env.TIMEZONE || "UTC", 7 | url: process.env.URL || "http://localhost:8080", 8 | } 9 | -------------------------------------------------------------------------------- /src/globals/helpers.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | /** 3 | * Returns back some attributes based on whether the 4 | * link is active or a parent of an active item 5 | * 6 | * @param {String} itemUrl The link in question 7 | * @param {String} pageUrl The page context 8 | * @returns {String} The attributes or empty 9 | */ 10 | getLinkActiveState(itemUrl, pageUrl) { 11 | let response = ''; 12 | 13 | if (itemUrl === pageUrl) { 14 | response = ' aria-current="page" class="activeTab subheaderA"'; 15 | } 16 | 17 | if (itemUrl.length > 1 && pageUrl.indexOf(itemUrl) === 0) { 18 | response += ' data-state="active" class="activeTab subheaderA"'; 19 | } 20 | 21 | if (itemUrl === "/" && pageUrl.indexOf("/posts") === 0) { 22 | response += ' data-state="active" class="activeTab subheaderA"'; 23 | } 24 | 25 | if (response === '') { 26 | response += ' class="subheaderA"'; 27 | } 28 | 29 | return response; 30 | } 31 | }; -------------------------------------------------------------------------------- /src/globals/navigation.json: -------------------------------------------------------------------------------- 1 | { 2 | "items": [ 3 | { 4 | "text": "Blog", 5 | "url": "/" 6 | }, 7 | { 8 | "text": "Documentation", 9 | "url": "/docs/" 10 | }, 11 | { 12 | "text": "Demos", 13 | "url": "/demos/" 14 | } 15 | ] 16 | } -------------------------------------------------------------------------------- /src/globals/site.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "PWA Builder Blog", 3 | "excerpt": "Learn about the latest updates of PWA Builder and how to build great PWAs across platforms", 4 | "description": "PWA Builder Blog & Documentation site", 5 | "url": "https://blog.pwabuilder.com", 6 | "baseUrl": "/", 7 | "images": { 8 | "subHeader": "sub-header-background.png", 9 | "placeholder": "placeholder.png", 10 | "logo": "logo.svg" 11 | }, 12 | "feed": { 13 | "filename": "feed.xml", 14 | "path": "/feed/feed.xml", 15 | "id": "https://example.com/" 16 | }, 17 | "jsonfeed": { 18 | "filename": "feed.json", 19 | "path": "/feed/feed.json", 20 | "url": "https://example.com/feed/feed.json" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/includes/categories.njk: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Categories

4 | 5 | 13 |
14 | 15 |
16 | 17 | -------------------------------------------------------------------------------- /src/includes/demos.njk: -------------------------------------------------------------------------------- 1 | {% import "layouts/doccard.njk" as cardLayouts %} 2 | 3 |
4 |

Our selected demos

5 |
We will soon share here our favorite demos to inspire you!
6 | {{ cardLayouts.featured(docs)}} 7 |

More demos from the community

8 |
The community is so active, let's share the good work there soon.
9 | {{ cardLayouts.trending(docs)}} 10 |
-------------------------------------------------------------------------------- /src/includes/docs.njk: -------------------------------------------------------------------------------- 1 | {% import "layouts/doccard.njk" as cardLayouts %} 2 | 3 |
4 |

Main documentation

5 | {{ cardLayouts.featured(docs)}} 6 |

Recommended Documentation

7 | {{ cardLayouts.trending(docs)}} 8 |
-------------------------------------------------------------------------------- /src/includes/footer.njk: -------------------------------------------------------------------------------- 1 | 34 | 35 | -------------------------------------------------------------------------------- /src/includes/header.njk: -------------------------------------------------------------------------------- 1 | 18 | 19 | -------------------------------------------------------------------------------- /src/includes/layouts/basedoc.njk: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | {# Google Schema #} 12 | 20 | 26 | 27 | {# Twitter #} 28 | 36 | 37 | 43 | 44 | 45 | 49 | 50 | {# Open Graph #} 51 | 59 | 65 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | {% if metaTitle %} 78 | {{ metaTitle }} 79 | {% else %} 80 | {{ title }} 81 | {% endif %} 82 | {% if metaTitle or title %} | {% endif %} 83 | {{ site.name }} 84 | 85 | 86 | 90 | 94 | 95 | 96 | 97 | {% block head %}{% endblock %} 98 | 99 | 100 | 101 | {% block header %} 102 | {% include 'header.njk' %} 103 | {% endblock %} 104 | {% block subHeader %} 105 | {% include 'sub-header.njk' %} 106 | {% endblock %} 107 |
108 | {% block body %} 109 | {{ content | safe }} 110 | {% endblock %} 111 |
112 | {% include "categories.njk" %} 113 | {% block footer %} 114 | {% include 'footer.njk' %} 115 | {% endblock %} 116 | 117 | 118 | 119 | 120 | 134 | 135 | -------------------------------------------------------------------------------- /src/includes/layouts/basepost.njk: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | {# Google Schema #} 15 | 23 | 29 | 30 | {# Twitter #} 31 | 39 | 40 | 46 | 47 | 48 | 52 | 53 | {# Open Graph #} 54 | 62 | 68 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | {% if metaTitle %} 81 | {{ metaTitle }} 82 | {% else %} 83 | {{ title }} 84 | {% endif %} 85 | {% if metaTitle or title %} | {% endif %} 86 | {{ site.name }} 87 | 88 | 89 | 93 | 97 | 98 | 99 | 100 | {% block head %}{% endblock %} 101 | 102 | 103 | 104 | {% block header %} 105 | {% include 'header.njk' %} 106 | {% endblock %} 107 | {% block subHeader %} 108 | {% include 'sub-header.njk' %} 109 | {% endblock %} 110 |
111 | {% block body %} 112 | {{ content | safe }} 113 | {% endblock %} 114 |
115 | {% include "categories.njk" %} 116 | {% block footer %} 117 | {% include 'footer.njk' %} 118 | {% endblock %} 119 | 120 | 121 | 122 | 123 | 141 | 142 | -------------------------------------------------------------------------------- /src/includes/layouts/doc.njk: -------------------------------------------------------------------------------- 1 | --- 2 | permalink: "{% if path %}{{ path | slug }}{% else %}{{'/docs/'}}{{ title | slug }}{% endif %}/index.html" 3 | --- 4 | 5 | {% extends 'layouts/basedoc.njk' %} 6 | {% block body %} 7 |
8 |
9 |
10 |

11 | {{title}}

12 | {% if date %} 13 | {% if updatedDate and (date | string) !== (updatedDate | string) %} 14 |

Last updated on {{ updatedDate | dateDisplay }}

15 | {% else %} 16 | 17 | {{ date | dateDisplay }} 18 | 19 | {% endif %} 20 | {% endif %} 21 | {% if author %} 22 | {{author.name}} 23 | {% endif %} 24 |
25 | 26 |
27 | 28 |
29 | {{ content | safe }} 30 |
31 | 32 |
33 | {% if tags %} 34 |
35 | {% for tag in tags %} 36 | {%- if tag !== "post" and tag !== "docs" -%} 37 | {{ tag }} 42 | {%- endif -%} 43 | {% endfor %} 44 |
45 | {% endif %} 46 | 47 |
48 |
49 |
50 |
51 | {%- set nextPost = collections['docsWithoutDrafts'] | 52 | getNextCollectionItem(page) %} 53 | {%- if nextPost %} 54 |

Next

55 |

56 | {{ nextPost.data.title }} 57 |

58 | {% endif %} 59 |
60 |
61 | {%- set previousPost = collections['docsWithoutDrafts'] | 62 | getPreviousCollectionItem(page) %} 63 | {%- if previousPost %} 64 |

Previous

65 |

66 | {{ previousPost.data.title }} 67 |

68 | {% endif %} 69 |
70 |
71 | 72 | {% include "recommended.njk" %} 73 | Back to Documentation Home 74 |
75 | 76 | {% endblock %} -------------------------------------------------------------------------------- /src/includes/layouts/doccard.njk: -------------------------------------------------------------------------------- 1 | {% macro featured(docs) %} 2 |
3 | {% for doc in docs %} 4 | {% if not doc.data.draft and doc.data.featured %} 5 | {{card(doc)}} 6 | {% endif %} 7 | {% endfor %} 8 |
9 | {% endmacro %} 10 | 11 | {% macro recommended(docs) %} 12 |
13 | {% for doc in docs %} 14 | {% if not doc.data.draft and doc.data.recommended %} 15 | {{card(doc)}} 16 | {% endif %} 17 | {% endfor %} 18 |
19 | {% endmacro %} 20 | 21 | {% macro trending(docs) %} 22 |
23 | {% for doc in docs %} 24 | {% if not doc.data.draft and doc.data.trending %} 25 | 26 |
27 | {{ doc.data.date | dateDisplay }} 28 | 29 |

30 |

{{ doc.data.title }}

31 |

32 |

{{ doc.data.description }}

33 |

Continue reading {{ doc.data.title }}

34 |
35 | 36 | {% endif %} 37 | {% endfor %} 38 |
39 | {% endmacro %} 40 | 41 | {% macro card(doc) %} 42 | 43 |
44 | 48 | {{ doc.data.date | dateDisplay }} 49 | 50 | 51 |
52 |

53 | {{ doc.data.title }} 54 |

55 |

{{ doc.data.excerpt }}

56 |

Keep reading...

57 |
58 |
59 | 60 | {% endmacro %} -------------------------------------------------------------------------------- /src/includes/layouts/home.njk: -------------------------------------------------------------------------------- 1 | 2 | {% extends "layouts/basepost.njk" %} 3 | {{ content | safe }} 4 | -------------------------------------------------------------------------------- /src/includes/layouts/post.njk: -------------------------------------------------------------------------------- 1 | --- 2 | permalink: "{% if path %}{{ path | slug }}{% else %}{{'/posts/'}}{{ title | slug }}{% endif %}/index.html" 3 | --- 4 | 5 | {% extends 'layouts/basepost.njk' %} 6 | {% block body %} 7 |
8 |
9 |
10 | {% if date %} 11 | {% if updatedDate and(date | string) !== (updatedDate | string) %} 12 |

Last updated on{{ updatedDate | dateDisplay }}{{ date | dateDisplay }} 15 |

16 | {% else %} 17 |

18 | {{ date | dateDisplay }} 20 |

21 | {% endif %} 22 | {% endif %} 23 | {% if author %} 24 | {{author.name}} 25 |
{{author.title}}
26 | {% endif %} 27 |
28 | 29 |
30 | 31 |
32 | {{ content | safe }} 33 |
34 | 35 |
36 | {% if tags %} 37 |
38 | {% for tag in tags %} 39 | {%- if tag !== "post" -%} 40 | {{ tag }} 45 | {%- endif -%} 46 | {% endfor %} 47 |
48 | {% endif %} 49 | 50 |
51 |
52 |
53 |
54 | {%- set nextPost = collections['postsWithoutDrafts'] | 55 | getNextCollectionItem(page) %} 56 | {%- if nextPost %} 57 |

Next

58 |

59 | {{ nextPost.data.title }} 60 |

61 | {% endif %} 62 |
63 |
64 | {%- set previousPost = collections['postsWithoutDrafts'] | 65 | getPreviousCollectionItem(page) %} 66 | {%- if previousPost %} 67 |

Previous

68 |

69 | {{ previousPost.data.title }} 70 |

71 | {% endif %} 72 |
73 |
74 | 75 | {% include "recommendeddocs.njk" %} 76 | Back to Blog Home 77 |
78 | 79 | {% endblock %} -------------------------------------------------------------------------------- /src/includes/layouts/postcard.njk: -------------------------------------------------------------------------------- 1 | {% macro featured(posts) %} 2 |
3 | {% for post in posts %} 4 | {% if not post.data.draft and post.data.featured %} 5 | {{card(post)}} 6 | {% endif %} 7 | {% endfor %} 8 |
9 | {% endmacro %} 10 | 11 | {% macro recommended(posts) %} 12 |
13 | {% for post in posts %} 14 | {% if not post.data.draft and post.data.featured %} 15 | {{card(post)}} 16 | {% endif %} 17 | {% endfor %} 18 |
19 | {% endmacro %} 20 | 21 | {% macro trending(posts) %} 22 |
23 | {% for post in posts %} 24 | {% if not post.data.draft and post.data.trending %} 25 | 26 |
27 | {{ post.data.date | dateDisplay }} 28 | 29 |

30 | {{ post.data.title }} 31 |

32 |

{{ post.data.description }}

33 |

Continue reading {{ post.data.title }}

34 |
35 | 36 | {% endif %} 37 | {% endfor %} 38 | 39 |
40 | {% endmacro %} 41 | 42 | {% macro tag(posts) %} 43 |
44 | {% for post in posts %} 45 | {% if not post.data.draft %} 46 | 47 |
48 | {{ post.data.date | dateDisplay }} 49 | 50 |

51 | {{ post.data.title }} 52 |

53 |

{{ post.data.description }}

54 |

Continue reading {{ post.data.title }}

55 |
56 | 57 | {% endif %} 58 | {% endfor %} 59 | 60 |
61 | {% endmacro %} 62 | 63 | {% macro card(post) %} 64 | 65 |
66 | 70 | {{ post.data.date | dateDisplay }} 71 | 72 | 73 |
74 |

75 | {{ post.data.title }} 76 |

77 |

{{ post.data.excerpt }}

78 | Keep reading... 79 |
80 |
81 | 82 | {% endmacro %} -------------------------------------------------------------------------------- /src/includes/posts.njk: -------------------------------------------------------------------------------- 1 | {% import "layouts/postcard.njk" as cardLayouts %} 2 | 3 |
4 |

Featured posts

5 | {{ cardLayouts.featured(posts)}} 6 |

Trending posts

7 | {{ cardLayouts.trending(posts)}} 8 |
-------------------------------------------------------------------------------- /src/includes/recommended.njk: -------------------------------------------------------------------------------- 1 | {% import "layouts/postcard.njk" as cardLayouts %} 2 | 3 |
4 |

Posts you may like...

5 | {{ cardLayouts.recommended(collections.posts.slice(0, 3)) }} 6 |
-------------------------------------------------------------------------------- /src/includes/recommendeddocs.njk: -------------------------------------------------------------------------------- 1 | {% import "layouts/doccard.njk" as cardLayouts %} 2 | 3 |
4 |

Documentation you may like...

5 | {{ cardLayouts.recommended(collections.docs) }} 6 |
-------------------------------------------------------------------------------- /src/includes/sub-header.njk: -------------------------------------------------------------------------------- 1 |
5 |
6 |
7 | {% if isPost or isDocumentation %} 8 | {% if isPost %} 9 | 10 | Back 11 | {% else %} 12 | 13 | Back 14 | {% endif %} 15 | {% endif %} 16 |
17 | {{ page.data }} 18 | 19 | {% if '/post' in page.url %} 20 |
21 |

22 | {{ title }}

23 | {% if excerpt %} 24 |

{{ excerpt }}

25 | {% endif %} 26 |
27 | {% elif '/tags' in page.url %} 28 |
29 |

30 | {{ title }}

31 | {% if excerpt %} 32 |

{{ excerpt }}

33 | {% endif %} 34 |
35 | {% elif '/docs' in page.url %} 36 | {% if not isDocumentation %} 37 |
38 |

39 | PWA Builder Documentation

40 |
41 | {% endif %} 42 | {% elif '/demos' in page.url %} 43 |
44 |

45 | PWA Builder Demos

46 |

47 | Learn from the great work of others 48 |

49 |
50 | {% else %} 51 |
52 |

53 | {{ site.name }}

54 |

55 | {{ site.excerpt }} 56 |

57 |
58 | {% endif %} 59 |
60 |
61 | 62 | 113 | -------------------------------------------------------------------------------- /src/includes/taglist.njk: -------------------------------------------------------------------------------- 1 | {% import "layouts/postcard.njk" as cardLayouts %} 2 | 3 |
4 | {{ cardLayouts.tag(posts)}} 5 |
-------------------------------------------------------------------------------- /src/includes/temp/docs.11tydata.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | eleventyComputed: { 3 | eleventyNavigation: { 4 | name: data => data.title, 5 | excerpt: data => data.excerpt, 6 | description: data => data.description, 7 | } 8 | } 9 | }; -------------------------------------------------------------------------------- /src/includes/temp/docs.json: -------------------------------------------------------------------------------- 1 | { 2 | "tags": ["docs"] 3 | } 4 | -------------------------------------------------------------------------------- /src/index.njk: -------------------------------------------------------------------------------- 1 | --- 2 | pagination: 3 | data: collections.post 4 | size: 12 5 | alias: posts 6 | reverse: true 7 | permalink: "/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber + 1 }}/{% endif %}" 8 | image: blog-card.webp 9 | --- 10 | 11 | {% extends 'layouts/home.njk' %} 12 | {% block body %} 13 | {% include "posts.njk" %} 14 | {% endblock %} -------------------------------------------------------------------------------- /src/posts/announcing-ios/ios-announcement.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/posts/announcing-ios/ios-announcement.png -------------------------------------------------------------------------------- /src/posts/announcing-ios/ios-options.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/posts/announcing-ios/ios-options.png -------------------------------------------------------------------------------- /src/posts/announcing-ios/ios-permitted-urls.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/posts/announcing-ios/ios-permitted-urls.png -------------------------------------------------------------------------------- /src/posts/announcing-ios/ios-publish-section.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/posts/announcing-ios/ios-publish-section.png -------------------------------------------------------------------------------- /src/posts/announcing-ios/ios-splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/posts/announcing-ios/ios-splash.png -------------------------------------------------------------------------------- /src/posts/announcing-vscode/announcing-vscode.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: Announcing PWA Studio, the VS Code extension for building Progressive Web Apps! 4 | excerpt: The PWA Studio VSCode extension brings everything you need to build high quality PWAs, right to your VSCode! 5 | description: The PWA Studio VSCode extension brings everything you need to build high quality PWAs, right to your VSCode! 6 | date: 2022-02-01 7 | updatedDate: 2022-02-01 8 | trending: true 9 | featured: true 10 | image: posts/announcing-vscode/vscode-release-graphic.png 11 | isPost: true 12 | backUrl: '/' 13 | author: 14 | name: Justin Willis 15 | twitter: https://twitter.com/Justinwillis96 16 | title: Software Engineer 17 | tags: 18 | - post 19 | - PWA 20 | - Windows 21 | - Android 22 | - iOS 23 | --- 24 | 25 | vscode release graphic 26 | 27 | Today, the PWABuilder project is excited to release a brand new VSCode Extension, the PWA Studio! 28 | The PWA Studio VSCode extension brings everything you need to build high quality PWAs, right to your VSCode. You can: 29 | - Start building a new PWA, with all the best practices, excellent developer experience and exceptional performance that you expect, in seconds using the PWABuilder pwa-starter. 30 | - Learn how to publish your app to the Web with Azure Static Web Apps 31 | - Add a Web Manifest and Service Worker to your existing web app 32 | - Package your PWA for the Microsoft Store, Google Play, and Apple App Store 33 | - Generate Icons for your PWA 34 | - Validate that your PWA is installable in the browser and is ready to publish to the app stores 35 | - Learn more about the features of the Web Manifest to enable new features in your PWA 36 | - Use our snippets to quickly and easily implement native features that can improve the User Experience of your PWA 37 | These features turn VSCode into the best development environment for Progressive Web Apps, ensuring you have tools for every step of your PWA development journey. 38 | 39 | ## Get Started 40 | First, you need to install the extension. Visit the [VSCode Marketplace](https://aka.ms/install-pwa-studio) to install 41 | The quickest way to get started with the extension is by opening the PWABuilder panel. This can be done by clicking the PWABuilder icon on the left side of VSCode: 42 | ![The PWABuilder icon on the left side of the VSCode Window](https://raw.githubusercontent.com/pwa-builder/pwabuilder-vscode/main/resources/icon-view.png) 43 | 44 | You should then see our three sections: Web Manifest, Service Worker, and your Store Ready Checklist. If all three views have the top item checked off, then your PWA is ready to go: 45 | 46 | ![The Web Manifest tree view in VSCode](https://raw.githubusercontent.com/pwa-builder/pwabuilder-vscode/main/resources/validate.png) 47 | 48 | If you are missing one of the items, no problem! The extension will provide you with a button to generate the needed asset: 49 | 50 | ![The Generate Service Worker button](https://raw.githubusercontent.com/pwa-builder/pwabuilder-vscode/main/resources/sw-button.png) 51 | 52 | Finally, the extension also provides buttons at the bottom of VSCode to provide quick access to all of our features: 53 | 54 | ![The quick actions](https://raw.githubusercontent.com/pwa-builder/pwabuilder-vscode/main/resources/quick-actions.png) 55 | 56 | ## Build a new PWA with the PWA Studio 57 | Lets go through an example of what the extension is capable of! Today we are going to start building a brand new PWA in about 2 minutes with the extension and the [PWABuilder pwa-starter](https://aka.ms/pwa-starter) You will get: 58 | - A ready to go codebase that follows best practices from the start: No more spending time choosing which framework to use, which build system to use, which styling system to use etc. Just start building with the PWABuilder team’s recommended setup. Enjoy Web Components? We proudly use [Lit](https://lit.dev) for incredible performance, fast load times and a React-like developer experience. 59 | - A Service Worker setup using [Workbox](https://developers.google.com/web/tools/workbox/) that ties in with the Rollup powered build system. This ensures that your PWA always works offline. 60 | - A full featured Web Manifest, including Icons, with everything that you need to ensure your PWA can be installed from the browser AND is ready to publish to the app stores. 61 | - Everything needed to publish to [Azure Static Web Apps](https://azure.microsoft.com/services/app-service/static/) 62 | 63 | ### Steps 64 | 1) Open a new VSCode Window 65 | 2) Tap the PWABuilder Icon on the left side of VSCode 66 | ![The PWABuilder icon on the left side of the VSCode Window](https://raw.githubusercontent.com/pwa-builder/pwabuilder-vscode/main/resources/icon-view.png) 67 | 68 | 3) Tap the `Start a new PWA` button in the bottom left corner 69 | ![The Start a new PWA button on the left side of the VSCode Window](https://raw.githubusercontent.com/pwa-builder/pwabuilder-vscode/main/resources/main-view.png) 70 | 71 | And that’s it! A new PWA will then open in its own VSCode window with all the dependencies installed and ready to start coding. Just run tap `Run` at the top of VSCode and then `Start Debugging` to start building your new PWA! 72 | ![The Start a new PWA button on the left side of the VSCode Window](https://raw.githubusercontent.com/pwa-builder/pwabuilder-vscode/main/resources/pwa-starter.png) 73 | 74 | What kind of apps can you build with the extension and the starter? Anything! Check [our demos](https://github.com/pwa-builder/pwa-starter#sample-pwas-built-with-the-starter) for some awesome apps built using the starter. Build a new PWA with the extension and starter? Let us know at our [Github](https://github.com/pwa-builder/PWABuilder) 75 | 76 | This experience becomes even more awesome when you use the [Edge VSCode Extension](https://docs.microsoft.com/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension) to debug your PWA in VSCode! 77 | 78 | Convinced and ready to turn your VSCode into the best development environment for PWAs? [Go here]( https://marketplace.visualstudio.com/items?itemName=PWABuilder.pwa-studio) to install the extension and get started today! Running into issues? Have any ideas or suggestions? Feel free to open an issue on our [Github](https://github.com/pwa-builder/PWABuilder) . Also, looking for an open-source project to contribute to? Check out [this link](https://github.com/pwa-builder/PWABuilder/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted+%3Araising_hand%3A%22) to see all our “help wanted” bugs and features. Just reply to the issue and someone from the team will respond. Thanks for making PWABuilder awesome! 79 | 80 | You can also learn more at the [PWA Studio Documentation.](https://docs.pwabuilder.com/#/studio/quick-start) 81 | -------------------------------------------------------------------------------- /src/posts/announcing-vscode/vscode-release-graphic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/posts/announcing-vscode/vscode-release-graphic.png -------------------------------------------------------------------------------- /src/posts/bringing-chromium-edge-pwas-to-the-microsoft-store/BringingChromiumEdgePWAsMicrosoftStore.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/posts/bringing-chromium-edge-pwas-to-the-microsoft-store/BringingChromiumEdgePWAsMicrosoftStore.jpg -------------------------------------------------------------------------------- /src/posts/bringing-chromium-edge-pwas-to-the-microsoft-store/analyzing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/posts/bringing-chromium-edge-pwas-to-the-microsoft-store/analyzing.png -------------------------------------------------------------------------------- /src/posts/bringing-chromium-edge-pwas-to-the-microsoft-store/app_android.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/posts/bringing-chromium-edge-pwas-to-the-microsoft-store/app_android.png -------------------------------------------------------------------------------- /src/posts/bringing-chromium-edge-pwas-to-the-microsoft-store/app_windows.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/posts/bringing-chromium-edge-pwas-to-the-microsoft-store/app_windows.png -------------------------------------------------------------------------------- /src/posts/bringing-chromium-edge-pwas-to-the-microsoft-store/chromium.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/posts/bringing-chromium-edge-pwas-to-the-microsoft-store/chromium.png -------------------------------------------------------------------------------- /src/posts/bringing-chromium-edge-pwas-to-the-microsoft-store/devtools.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/posts/bringing-chromium-edge-pwas-to-the-microsoft-store/devtools.png -------------------------------------------------------------------------------- /src/posts/bringing-chromium-edge-pwas-to-the-microsoft-store/download.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/posts/bringing-chromium-edge-pwas-to-the-microsoft-store/download.png -------------------------------------------------------------------------------- /src/posts/bringing-chromium-edge-pwas-to-the-microsoft-store/enter_url.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/posts/bringing-chromium-edge-pwas-to-the-microsoft-store/enter_url.png -------------------------------------------------------------------------------- /src/posts/bringing-chromium-edge-pwas-to-the-microsoft-store/inspect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/posts/bringing-chromium-edge-pwas-to-the-microsoft-store/inspect.png -------------------------------------------------------------------------------- /src/posts/bringing-chromium-edge-pwas-to-the-microsoft-store/options.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/posts/bringing-chromium-edge-pwas-to-the-microsoft-store/options.png -------------------------------------------------------------------------------- /src/posts/bringing-chromium-edge-pwas-to-the-microsoft-store/publish_page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/posts/bringing-chromium-edge-pwas-to-the-microsoft-store/publish_page.png -------------------------------------------------------------------------------- /src/posts/bringing-chromium-edge-pwas-to-the-microsoft-store/report_card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/posts/bringing-chromium-edge-pwas-to-the-microsoft-store/report_card.png -------------------------------------------------------------------------------- /src/posts/introducing-the-brand-new-pwa-builder/LaunchBlogImage.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/posts/introducing-the-brand-new-pwa-builder/LaunchBlogImage.jpg -------------------------------------------------------------------------------- /src/posts/introducing-the-brand-new-pwa-builder/MicrosoftStorePWAs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/posts/introducing-the-brand-new-pwa-builder/MicrosoftStorePWAs.jpg -------------------------------------------------------------------------------- /src/posts/introducing-the-brand-new-pwa-builder/ScreenshotNewPWABuilder001.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/posts/introducing-the-brand-new-pwa-builder/ScreenshotNewPWABuilder001.jpg -------------------------------------------------------------------------------- /src/posts/introducing-the-brand-new-pwa-builder/ScreenshotNewPWABuilder002.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/posts/introducing-the-brand-new-pwa-builder/ScreenshotNewPWABuilder002.jpg -------------------------------------------------------------------------------- /src/posts/introducing-the-brand-new-pwa-builder/introducing-the-brand-new-pwa-builder.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: Introducing the brand new PWA builder 4 | excerpt: A better PWA Builder, a better PWA Platform boosted by Microsoft Edge, a better OS to run your PWAs on. 5 | description: A better PWA Builder, a better PWA Platform boosted by Microsoft Edge, a better OS to run your PWAs on. 6 | date: 2021-06-24 7 | updatedDate: 2021-06-24 8 | trending: false 9 | featured: true 10 | image: posts/introducing-the-brand-new-pwa-builder/LaunchBlogImage.jpg 11 | isPost: true 12 | backUrl: '/' 13 | author: 14 | name: David Rousset 15 | twitter: https://twitter.com/davrous 16 | title: Program Manager APS W+D 17 | tags: 18 | - post 19 | - Chromium 20 | - Microsoft Edge 21 | - PWA 22 | - Microsoft Store 23 | --- 24 | 25 | We’re excited to launch v3 of PWA builder today - our open-source project that can help web developers like you build Progressive Web Apps (PWAs) and package them for app stores like the Microsoft Store on Windows in minutes! 26 | 27 | Since our initial launch many years ago, PWAs have become more powerful than ever. It has been an incredible journey so far, and we believe we’re just getting started. Every day we see more and more developers interested in evaluating their PWAs or publishing them to app stores. Over the years, we’ve received a ton of great feedback from our developer community, and we listened. 28 | 29 | With the brand new PWA builder, the core value we provide to web developers remains the same. We want to help them: 30 | 31 | - Create and distribute PWAs across multiple marketplaces with minimal cost and friction using our simple tool. 32 | - Eliminate the need to understand native code or local platform architecture to take advantage of distribution channels like app stores. 33 | - Understand what makes a quality PWA and steps they can take to improve the experience they offer to their users. 34 | 35 | While rethinking and redesigning the user experience, we rebuilt our front-end from scratch (using Web Components like lit-element, Rollup, Workbox, and TypeScript, as well as Fast Components) and improved our back-end API to be more stable & robust. Modernizing our architecture will allow us to launch new features more quickly and efficiently in the future. 36 | 37 | The result is a brand-new experience we’re introducing today to build quality PWAs and package them for app stores! 38 | 39 | 40 | Screenshot of the home page of the new PWA Builder v3 41 | 42 | 43 | ## PWAs and Windows – better together than ever before 44 | The newly launched Windows 11, Microsoft Edge, and the new Microsoft Store all bring exciting possibilities to developers building both native and web apps. 45 | 46 | **First**, Windows 11 puts Chromium powered PWAs front and center, integrating them at its core. Thanks to latest improvements shipped in Edge 91, Microsoft Store PWAs are supported on Windows 10 and Windows 11 with shortcuts web share web share target badging push notifications dark/light theme sync with OS settings, & more. 47 | 48 | **Second**, we are glad to share that the technology built in Microsoft Edge and PWA Builder to package apps for the Microsoft Store is now available for all. There’s even more to come in the near future: Experimental features - Microsoft Edge Development such as URI Protocol Handling URL Link Handling Window Controls Overlay for Desktop Apps Run on OS Login and File Handling. You can test them today using Origin Trials to create more integrated PWAs on Windows. 49 | 50 | **And finally**, by distributing your web app through the new Microsoft Store, you can get it in front of millions of users looking for new apps and experiences every day. Whether you want to provide an exceptional user experience to your existing users on the Windows platform, acquire new users for your PWA, or meet your business goals, the new PWA builder can help get you there. 51 | 52 | ## Come join the growing community of PWAs on Windows 53 | 54 | ![Screenshot of the new Microsoft Store app with Facebook, FitOn, Twitter & ClipChamp](/posts/introducing-the-brand-new-pwa-builder/MicrosoftStorePWAs.jpg) 55 | 56 | We are excited to see a growing number of PWAs in the Microsoft Store, like ClipChamp Facebook FitOn Instagram Twitter and many more. There’s never been a better time to bring your PWA to the Microsoft store, and we invite you to join us! 57 | 58 | To start, simply add the URL to your PWA here. Based on features your PWA supports, you will be assigned a score that indicates the quality of your PWA. If you want to improve your score so your PWA integrates more seamlessly with the Windows platform, you can see our recommendations on how to do so. You can also see how your PWA compares to others tested on the platform. 59 | 60 | ![Screenshot of the home page of the new PWA Builder v3](/posts/introducing-the-brand-new-pwa-builder/ScreenshotNewPWABuilder002.jpg) 61 | 62 | Once you have a valid web manifest and minimum requirements met, you can use our package to build your PWA, and submit for distribution on the Microsoft Store or other popular app stores. 63 | 64 | We're continuing to make improvements to PWA builder and welcome your feedback. Stay tuned for our upcoming news by following us on Twitter or our new blog! -------------------------------------------------------------------------------- /src/posts/manifest-previewer/categories.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/posts/manifest-previewer/categories.png -------------------------------------------------------------------------------- /src/posts/manifest-previewer/install-collage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/posts/manifest-previewer/install-collage.png -------------------------------------------------------------------------------- /src/posts/manifest-previewer/manifest-previewer.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: Visualizing your web manifest 4 | excerpt: Building your progressive web app and wondering what's the purpose of this json file? 5 | description: A crucial part of building a PWA is creating its manifest.json file. However, this is not always an easy task... Besides a name and icons, what else should you include? Why do you need a background color if you already have that in your CSS stylesheets? Which are the different display modes, and which one should you use? 6 | date: 2021-08-17 7 | trending: false 8 | featured: true 9 | image: posts/manifest-previewer/name-windows.png 10 | isPost: true 11 | backUrl: '/' 12 | author: 13 | name: Maria José Solano 14 | twitter: https://www.linkedin.com/in/mariasolano151822 15 | title: Software engineering intern 16 | tags: 17 | - post 18 | - PWA 19 | --- 20 | 21 | We have all been there. Staring at this mysterious `json` object that seems so important for a progressive web app. Besides a name and icons, what else should you include? Why do you need a background color if you already have that in your CSS stylesheets? Which are the different display modes, and which one should you use? 22 | 23 | During the last 3 months, I've been working on a project that addresses these questions: the PWABuilder Manifest Previewer This is a web component that takes your web manifest and shows you what the different manifest values look like on different operating systems. As an example, here's the manifest visualizer showing the name attribute appears on the Windows start menu: 24 | Name preview - Windows 25 | 26 | And this is by just knowing the name and icon defined on the manifest! You can also experience the same visualization on Android and iOS: 27 | Name preview - Android iOS 28 | 29 | Similarly, the component can also help you picture what your splash screen will look like, since this loading display is constructed by referring to the name, icons, and background indicated on the manifest. But wait, why do you need to specify a background color again if you have your CSS stylesheets for that? This is because when the splash screen is displayed to the user, your application (and hence styles) is still loading. With help of the web manifest, this loading state is smoother and customized to your PWA. 30 | Manifest Preview Splash Screen 31 | 32 | Besides understanding the impact of changing values in the web manifest, you can also get an idea of what the experience is for users installing your application. Attributes like the name, site url, icons and screenshots are used to describe your application in installation dialogs: 33 | Installation dialogs 34 | 35 | The manifest previewer can also help you visualize your application's store listing, given that with your web manifest you can assign categories to your PWA, include screenshots that show a peak of the user experience, and give details about your app via the `description` attribute. Here's the visualization in the new Microsoft Store 36 | Manifest Categories Preview 37 | 38 | This web component also showcases some of the most modern features of PWAs, like making your app a web share target so that users can share media data to your application directly from the platform's share menu: 39 | Share Target Preview 40 | 41 | And that's not all! This web component also includes previews for the `short_name`, `display`, `theme_color`, `shortcuts`, and many other manifest attributes. You can see them all now on the PWABuilder site since the team is the first proud user of this component, and it is using it to help their users have a better experience when getting their applications ready to be published to the Microsoft store. Currently the team is only enabling the preview on Windows, but the Android and iOS will be added in the near future. 42 | 43 | You can also integrate the manifest visualizer to your own application, since this component is a standalone tool and can be downloaded from `npm`. To learn more about how to use it, check out the documentation and customize it according to your needs, from using your own colors to using the explanation messages that you desire. 44 | 45 | Before I wrap up, I will take a brief detour and get a bit sentimental: Thanks to everyone in the PWABuilder team. You’ve made my internship this summer amazing, and I truly admire your passion and dedication for what you do. More than builders, you’re creators, enhancers, and innovators. Keep doing what you’re doing. 46 | 47 | And that’s all for today fellow PWA builders. I hope that this post fulfilled its goal and you’re now excited and eager to experiment with what you can do with your manifest.json file. Fortunately you don’t need to read long and boring documentation, you can visualize it with the manifest previewer web component! -------------------------------------------------------------------------------- /src/posts/manifest-previewer/name-collage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/posts/manifest-previewer/name-collage.png -------------------------------------------------------------------------------- /src/posts/manifest-previewer/name-windows.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/posts/manifest-previewer/name-windows.png -------------------------------------------------------------------------------- /src/posts/manifest-previewer/share-target.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/posts/manifest-previewer/share-target.png -------------------------------------------------------------------------------- /src/posts/manifest-previewer/splashscreen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwa-builder/pwabuilder-blog/4de115a3676486b5d8ab732ac3036c6939d55ea7/src/posts/manifest-previewer/splashscreen.png -------------------------------------------------------------------------------- /src/posts/microsoft-and-google-team-up.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: Microsoft and Google team up to make PWAs better in the Play Store 4 | excerpt: We’re glad to announce a new collaboration between Microsoft and Google for the benefit of the web developer community. 5 | description: description 6 | date: 2020-07-09 7 | updatedDate: 2020-07-09 8 | trending: false 9 | featured: true 10 | image: microsoft-google.png 11 | isPost: true 12 | backUrl: '/' 13 | author: 14 | name: Judah Gabriel Himango 15 | twitter: https://twitter.com/JudahGabriel 16 | title: Software Engineer APS W+D 17 | tags: 18 | - post 19 | - Microsoft 20 | - Google 21 | - PlayStore 22 | --- 23 | 24 | ![hero-image](https://cdn-images-1.medium.com/max/800/1*6L9UnfO5V3UBpJ3RwaW1Vw.png) 25 | Web shortcuts on Android — now available to PWA developers through PWABuilder 26 | 27 | We’re glad to announce a new collaboration between Microsoft and Google for the benefit of the web developer community. Microsoft’s [PWABuilder](https://pwabuilder.com) and Google’s [Bubblewrap](https://github.com/GoogleChromeLabs/bubblewrap) are now working together to help developers publish PWAs in the Google Play Store. 28 | 29 | [PWABuilder.com](https://pwabuilder.com) is Microsoft’s open source developer tool that helps you build high quality PWAs and publish them in app stores. 30 | 31 | Bubblewrap is Google’s command line utility and library to generate and sign Google Play Store packages from Progressive Web Apps. 32 | 33 | Earlier this year we started working together with Google to make PWABuilder utilize Bubblewrap under the hood. Today, **we’re announcing two great new features for PWA developers borne out of our collaboration:** 34 | 35 | 1. **Web shortcuts support:** PWAs packaged for Google Play via PWABuilder will now support the new [web shortcuts standard](https://w3c.github.io/manifest/#shortcuts-member 36 | 2. **Advanced Android features & customization:** PWABuilder now supports the full range of trusted web activity options that makes your PWA shine on Android devices. From PWABuilder, you can customize the appearance of the Android status bar and nav bar in your PWA, customize your Android splash screen, change your launcher name, use an existing signing key, utilize deeper push notification support, configure your package’s ID and versioning, fallback behavior and more. 37 | 38 | All of this was a result of the collaboration between Google and Microsoft, with 39 | your PWAs reaping the benefit. More details below. 40 | 41 | ## Web Shortcuts Support 42 | 43 | Shortcuts are a [new web standard](https://w3c.github.io/manifest/#shortcuts-member) that enables installed PWAs to have app shortcuts, a contextual list of common actions that users can quickly jump to: 44 | 45 | ![alt](https://cdn-images-1.medium.com/max/800/1*kexmUlkc6zF4VwlTzqBgBw.png) 46 | Twitter is using web shortcuts to enable quick actions like New Tweet, Notifications, DMs. This feature is now available in Edge Canary and Chrome Canary. 47 | 48 | Web shortcuts integrate into the operating system — such as Windows’ task bar and start menu, or Android’s home screen— enabling users to quickly access your app’s core functionality. 49 | 50 | **Today we’re pleased to announce support for shortcuts in PWABuilder**. Thanks to our collaboration with Google’s Bubblewrap, PWAs you package for the Google Play Store through pwabuilder.com will now receive full support for shortcuts. 😎 51 | 52 | The support happens automatically; no extra work required. [Shortcuts you define in your web app manifest](https://w3c.github.io/manifest/#shortcuts-member) will work in your Google Play Store APK package as one might expect them to. As users discover and install your PWA in the Google Play Store, they’ll be able to easily re-engage with your app through web shortcuts. 53 | 54 | To try it out, go to pwabuilder.com and put in the URL to a PWA with shortcuts, such as [https://sadchonks.com](https://sadchonks.com) 55 | 56 | ![alt](https://cdn-images-1.medium.com/max/800/1*ZqsttjST0-y717XcAlj01w.png) 57 | 58 | Click start to analyze the URL and then click “Build My PWA”: 59 | 60 | ![alt](https://cdn-images-1.medium.com/max/800/1*Hdy8J1PRcNsP3-hNR82jOg.png) 61 | 62 | You’re asked which app stores to publish in. Choose Android to package for the Google Play Store: 63 | 64 | ![alt](https://cdn-images-1.medium.com/max/800/1*9sX2c657nWoeU7VDWpYy8g.png) 65 | 66 | ![alt](https://cdn-images-1.medium.com/max/800/1*4BxPF0GM2DN4G1VGSzu4gg.png) 67 | 68 | This will generate an APK package that can be uploaded to the Google Play Store. And when it’s installed on Android, your app shortcuts will just work. For example, you can long-press on your app’s tile to see the web shortcuts: 69 | 70 | ![alt](https://cdn-images-1.medium.com/max/800/1*lS8bi-z_ZcA1oyvmFvIfuA.png) 71 | Web shortcuts working on Android in a PWA published to the Google Play Store 72 | 73 | You can read up more about your PWA’s web shortcuts on Android over at the [shortcuts with trusted web activities explainer](https://web.dev/app-shortcuts/#trusted-web-activity-support) 74 | 75 | ## **Android Features & Customization** 76 | 77 | When we rolled out our initial collaborative work with Google’s Bubblewrap this spring, PWABuilder didn’t have a way to customize the Android package it generated. While this was fine for some basic scenarios, like publishing to the Google Play Store for the first time, it fell short in other ways. 78 | 79 | To address this, we’ve updated PWABuilder to allow for full customization of your Android app package: 80 | 81 | ![alt](https://cdn-images-1.medium.com/max/800/1*yL7vPAg4L5B4hkkPKPM2SA.png) 82 | PWABuilder Android options. When you package your PWA for Android, we give you a 83 | bunch of ways to customize the appearance and functionality of your Android app 84 | 85 | With this new functionality, you can customize your PWA for Android: 86 | 87 | - **Package ID:** The Android identifier unique to your app 88 | - **App name:** The full name of your app. We prepopulate this with the [app name](https://w3c.github.io/manifest/#name-member) from your PWA’s app manifest. 89 | - **Launcher name**: The name of your app in the Android launcher. This is typically the same as app name, or a shortened version of it. We prepopulate this with [short_name](https://w3c.github.io/manifest/#short_name-member) from your PWA’s app manifest. 90 | - **App version**: This is the version string displayed to end users, e.g. “1.0.0.0” 91 | - **App version code**: This is an integer used as a private, internal version of your app. 92 | - **Host, Start URL, Manifest URL**: The URLs used to launch your PWA in the Android app. We prepopulate these for you from your app manifest. 93 | - **Status bar color, Nav bar color**: The color of the Android status bar and navigation bar in your PWA. You can also hide these bars by setting Display to 94 | Fullscreen. We prepopulate this using colors from your app manifest. 95 | - **Nav bar color:** Same as above, but for the Android navigation bar. Also can be hidden by setting Display to Fullscreen. 96 | - **Splash screen color:** The background color of the splash screen that will be used when creating your Android app. We prepopulate this with the theme color 97 | specified in your app manifest. 98 | - **Splash screen fade out time:** How long to fade out the splash screen in milliseconds. We default to 300ms. 99 | - **Icon URL**: URLs for the icon to use for your app. We recommend a 512x512 icon. 100 | - **Maskable icon URL**: Optional. The icon to use on Android devices that show rounded corner icons. Typically, this icon should have some padding around the 101 | icon’s content, enabling the icon to be safely rounded without losing fidelity. We populate this with a [purpose: maskable](https://w3c.github.io/manifest/#purpose-member icon from your app manifest. If one can’t be found, we use the icon. For more information about 102 | maskable icons on Android, see [https://web.dev/maskable-icon](https://web.dev/maskable-icon/) 103 | - **Monochrome icon URL**: Optional. The monochrome icon to use for your app. Android can use this to fill your icon with a certain color based on user preferences, theme or color mode, or high contrast configurations. We populate this with a [purpose: monochrome](https://w3c.github.io/manifest/#purpose-member) icon from your app manifest 104 | - **Fallback behavior:** When the full TWA experience isn’t available, how should your app proceed, whether with a web view or [Chrome’s Custom Tabs feature](https://developer.chrome.com/multidevice/android/customtabs) We default to the latter. 105 | - **Display mode:**
**— Standalone** means your PWA takes up all the area except Android status bar and Navigation bar.
**— Fullscreen** hide both 106 | bars. This is intended for immersive experiences likes games and media playback. 107 | - **Notifications**: If enabled, your PWA will use [Android Notification Delegation](https://github.com/GoogleChromeLabs/svgomg-twa/issues/60) for push 108 | notifications, meaning your installed PWA can send push notifications without browser permission prompts. You should enable this if your PWA sends push 109 | notifications. 110 | - **Signing key:** How the APK app package will be digitally signed:
**— None:** your app package won’t be signed. Unsigned packages will be signed by 111 | the Google Play Store. This is Google’s recommendation, and our default.
**— New:** PWABuilder will create a new signing key for you. The signing key will 112 | be included in your zip download. Choosing this will let you fill in details like password, alias, and more.
**— Mine:** Upload an existing .keystore 113 | file to use for signing the app package. This should be used if you are updating an existing app in the Store. You’ll be prompted to specify your existing key 114 | passwords and alias. 115 | 116 | Whew! As you can see, you can customize nearly every aspect of your PWA Android app package. 117 | 118 | To access this functionality, put a URL into pwabuilder.com then:
**Build My PWA -> Android -> Options** 119 | 120 | ![alt](https://cdn-images-1.medium.com/max/800/1*Ui2YKhWlbvIYgrlESMAPDg.png) 121 | Choosing Options here will open the Android package options discussed above 122 | 123 | ## Final thoughts 124 | 125 | Both web shortcuts and Android package customization are possible thanks to the collaboration between Google and Microsoft. We are working together to make the 126 | web a more capable app platform. 127 | 128 | In addition to the above, we’re also collaborating with Google on [Project Fugu](https://docs.google.com/spreadsheets/d/1de0ZYDOcafNXXwMcg4EZhT0346QM-QFvZfoD8ZffHeA/edit#gid=557099940) to incubate new web platform features, with PWAs front and center, toward the goal of standardization so everyone benefits. We’ve highlighted some Project Fugu capabilities in our [web platform demo showcase](https://components.pwabuilder.com/) 129 | 130 | We hope you enjoy these capabilities in PWABuilder! Please give it a try over at [pwabuilder.com](https://pwabuilder.com) 131 | -------------------------------------------------------------------------------- /src/posts/posts.11tydata.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | eleventyComputed: { 3 | eleventyNavigation: { 4 | name: data => data.title, 5 | excerpt: data => data.excerpt, 6 | description: data => data.description, 7 | } 8 | } 9 | }; -------------------------------------------------------------------------------- /src/posts/posts.json: -------------------------------------------------------------------------------- 1 | { 2 | "tags": ["posts"] 3 | } 4 | -------------------------------------------------------------------------------- /src/posts/pwa-inking.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: PWA Inking Enable 2D inking for the web! 4 | excerpt: There are many ways to enable inking on the web, but they all involve their challenges to set up. Do you need to support 2D drawing or 3D rendering? 5 | description: There are many ways to enable inking on the web, but they all involve their challenges to set up. Do you need to support 2D drawing or 3D rendering? How will you minimize rendering latency? How should the drawing respond to browser events like window resizing, tab switching, or zooming? What kinds of input do you want to handle? What do you want to do with a finished drawing? 6 | date: 2021-07-15 7 | updatedDate: 2021-07-15 8 | trending: true 9 | featured: false 10 | image: pwa-linking.png 11 | author: 12 | name: Killian McCoy 13 | tags: 14 | - post 15 | - Inking 16 | - Microsoft Edge 17 | - Windows 18 | --- 19 | 20 |

via GIPHY

21 | There are many ways to enable inking on the web, but they all involve their challenges to set up. Do you need to support 2D drawing or 3D rendering? How will you minimize rendering latency? How should the drawing respond to browser events like window resizing, tab switching, or zooming? What kinds of input do you want to handle? What do you want to do with a finished drawing? 22 | 23 | The [PWABuilder](https://pwabuilder.com/) team built a solution that enables a basic inking experience for the modern web and addresses the above considerations. We are excited to announce the 1.0 version of [the pwa-inking component](https://github.com/pwa-builder/pwa-inking) is now available! 24 | 25 | ## pwa-inking is a web component that 26 | 27 | - Uses a desynchronized 2D HTML canvas. 28 | - Optimizes canvas redraws through [the requestAnimationFrame() api](https://docs.w3cub.com/dom/window/requestanimationframe/) and [the requestIdleCallback() api](https://w3c.github.io/requestidlecallback/) functions. 29 | - Resizes and refocuses with the browser. 30 | - Supports pointer (mouse, touch, and pen) events. 31 | - Offers 4 inking experiences: pen, pencil, highlighter, and eraser. 32 | - Allows you to copy your drawing to the clipboard and save it as a png through the native device file system 33 | 34 | In other words, pwa-inking can let users draw a picture as quickly as they can doodle it with a finger and then save it to their phone camera roll! And developer can make it happen by adding only a few lines of code to their existing web apps 35 | 36 | ## Why would I use this? 37 | 38 | - **modern** using the latest web APIs to keep your web apps fast while handling and rendering user input: touch, pen, and mouse friendly! 39 | - **ready to go** wherever you want to use it in your web apps, right on your homepage or nested in another web component. 40 | - **customizable** through CSS shadow parts and you can set any configuration of the included tools you want to use. 41 | - **free to use and open-source** because why not! 42 | 43 | ## Getting Started 44 | 45 | ### Install it 46 | 47 | You can install this component through npm or a script tag. If you are already using npm, we recommend installing the pwa-inking npm package. Otherwise, the script tag works fine for simple use cases. 48 | 49 | ### Script tag 50 | 51 | 1. Add this script tag in the head of your index.html 52 | 53 | ### NPM 54 | 55 | 1. Run this command in your project directory: 56 | 57 | ```js 58 | npm install @pwabuilder/pwa-inking 59 | ``` 60 | 61 | 2. Add this import statement to your script file: 62 | 63 | ```js 64 | import @pwabuilder/pwa-inking 65 | ``` 66 | 67 | ### Pick your starter 68 | 69 | This component can be used with or without an included toolbar: 70 | 71 | ### Canvas with toolbar 72 | 73 | ![A screenshot of the pwa-inking component with the default toolbar.](https://miro.medium.com/max/552/1*HHqkPoDIS_D4GwdqApaZZg.png) 74 | 75 | A screenshot of the pwa-inking component with the default toolbar. 76 | 77 | The default and recommended experience is to add an inking-component with a nested inking-toolbar to get the most functionality for the least amount of code: 78 | 79 | [Try the component with the default toolbar live!](https://pwa-inking.glitch.me/) | [See the code for the component with the default toolbar](https://glitch.com/edit/#!/pwa-inking?path=index.html%3A1%3A0) 80 | 81 | ### Canvas without toolbar 82 | 83 | ![A screenshot of the pwa-inking component without a toolbar.](https://miro.medium.com/max/1400/1*5WhYet8qVnf-Fk1Ag28NQQ.png) 84 | 85 | A screenshot of the pwa-inking component without a toolbar. 86 | 87 | Some advanced users might want to implement their own toolbar or control the canvas purely through JavaScript, so the inking-canvas can also be used alone and controlled via [the components exposed API](https://github.com/pwa-builder/pwa-inking/#inking-canvas): 88 | 89 | [Try the component without a toolbar live!](https://pwa-inking-canvas-only.glitch.me/) | [See the code for the component without a toolbar](https://glitch.com/edit/#!/pwa-inking-canvas-only?path=index.html%3A20%3A41) 90 | 91 | ## Customize it 92 | 93 | ### Pick your tools 94 | 95 | ![A screenshot of pwa-inking with a custom toolbar positioned in the bottom right corner.](https://miro.medium.com/max/1400/1*ODsQMpBzUQ7J5uhaHP011w.png) 96 | 97 | A screenshot of pwa-inking with a custom toolbar positioned in the bottom right corner. 98 | 99 | Only want some of the tools? You can specify the toolbar contents and even change its position and orientation on the canvas: 100 | 101 | [See the component live with a custom positioned toolbar](https://pwa-inking-customized-toolbar.glitch.me/) | [See the code for the component with a custom positioned toolbar](https://glitch.com/edit/#!/pwa-inking-customized-toolbar?path=index.html%3A25%3A55) 102 | 103 | ### Modify the CSS 104 | 105 | ![A screenshot of pwa-inking with customized styles on the toolbar and the canvas.](https://miro.medium.com/max/1400/1*wZh-EIkILOfXC9fAuX4U6Q.png) 106 | 107 | A screenshot of pwa-inking with customized styles on the toolbar and the canvas. 108 | 109 | The canvas and the toolbar tool styles are completely customizable through [the CSS shadow parts feature in CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/::part): 110 | 111 | [See the component fully customized live](https://pwa-inking-styling-samples.glitch.me/) | [See the code for fully customizing the component](https://glitch.com/edit/#!/pwa-inking-styling-samples?path=index.html%3A29%3A20) 112 | 113 | ## Limitations 114 | 115 | At the time of this release, browsers do not fully support features that impact the inking experience. 116 | 117 | ### Pointer event properties 118 | 119 | Some [pointer event properties](https://w3c.github.io/pointerevents/#pointerevent-interface) that could be used to influence stroke behavior are available today but do not yet report meaningful data. These include: 120 | 121 | - tangentialPressure 122 | - tiltX 123 | - tiltY 124 | - twist 125 | 126 | The pointer event properties utilized in this release to influence stroke size are _width_ and _pressure_. 127 | 128 | ### Low latency canvas 129 | 130 | The 2D canvas contexts of this web component rely on the availability of [the desynchronized attribute](https://developers.google.com/web/updates/2019/05/desynchronized) to support low latency. 131 | 132 | If a browser does not recognize this attribute, then the canvas contexts are established without it. 133 | 134 | A [Chromium bug](https://bugs.chromium.org/p/chromium/issues/detail?id=1085015#c38) related to image extraction of the low latency canvas is preventing this web component copy & save features from working on impacted platforms. The fix has been applied the Chromium source code, but many Chromium-based browsers (including the stable versions of Edge and Chrome) have not received it yet. We have a [GitHub issue](https://github.com/pwa-builder/pwa-inking/issues/31) tracking this. 135 | 136 | ### requestIdleCallback() 137 | 138 | The ability to process inking component events in a way that yields to other activity on the main thread is made possible through [the requestIdleCallback() function](https://w3c.github.io/requestidlecallback/), but it is not widely supported across browsers yet. 139 | 140 | If a browser does not support this API, the impacted inking component calls are run instead as [IIFE (immediately invoked function expressions)](https://developer.mozilla.org/en-US/docs/Glossary/IIFE). 141 | 142 | ### Clipboard API 143 | 144 | The canvas state is copied as a png image to the browser clipboard through [the Clipboard API](https://w3c.github.io/clipboard-apis/). 145 | 146 | If a browser does not support _navigator.clipboard_ or _ClipboardItem_, then a failure toast (and console error message if you clone and run the source code locally) will appear when a user clicks the copy button. 147 | 148 | ## What next 149 | 150 | We are still planning our roadmap and we would love to hear from you! Let the PWABuilder team know what you think of this version and what you think should come next. 151 | 152 | Find us on [our Twitter (@pwabuilder)](https://twitter.com/pwabuilder) and engage with us on [our GitHub repo](https://github.com/pwa-builder/). 153 | 154 | Thanks for reading! 155 | 156 | ```js 157 | module.exports = { 158 | eleventyComputed: { 159 | eleventyNavigation: { 160 | name: (data) => data.title, 161 | excerpt: (data) => data.excerpt, 162 | description: (data) => data.description, 163 | }, 164 | }, 165 | } 166 | ``` 167 | -------------------------------------------------------------------------------- /src/posts/pwabuiderv3-announcement.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: PWA Builder v3 a brand-new experience to build even better PWAs 4 | excerpt: A better PWA Builder, a better PWA Platform boosted by Microsoft Edge, a better OS to run your PWAs on. 5 | description: A better PWA Builder, a better PWA Platform boosted by Microsoft Edge, a better OS to run your PWAs on. 6 | date: 2020-06-24 7 | updatedDate: 2020-06-24 8 | trending: false 9 | featured: false 10 | image: posts/bringing-chromium-edge-pwas-to-the-microsoft-store/chromium.png 11 | isPost: true 12 | draft: true 13 | backUrl: '/' 14 | author: 15 | name: David Rousset 16 | twitter: https://twitter.com/davrous 17 | title: Program Manager APS W+D 18 | tags: 19 | - post 20 | - Chromium 21 | - Microsoft Edge 22 | - PWA 23 | - Microsoft Store 24 | --- 25 | 26 | **To be published soon** -------------------------------------------------------------------------------- /src/rss.njk: -------------------------------------------------------------------------------- 1 | ---json 2 | { 3 | "permalink": "feed.xml", 4 | "eleventyExcludeFromCollections": true, 5 | "metadata": { 6 | "title": "PWABuilder Blog", 7 | "subtitle": "News, updates, and articles from Microsoft's PWABuilder", 8 | "url": "https://blog.pwabuilder.com/", 9 | "feedUrl": "https://blog.pwabuilder.com/feed.xml", 10 | "author": { 11 | "name": "PWABuilder team", 12 | "email": "nikolame@microsoft.com" 13 | } 14 | } 15 | } 16 | --- 17 | 18 | 19 | {{ metadata.title }} 20 | {{ metadata.subtitle }} 21 | 22 | 23 | {{ collections.posts | getNewestCollectionItemDate | dateToRfc3339 }} 24 | {{ metadata.url }} 25 | 26 | {{ metadata.author.name }} 27 | {{ metadata.author.email }} 28 | 29 | {%- for post in collections.posts %} 30 | {% set absolutePostUrl %}{{ post.url | url | absoluteUrl(metadata.url) }}{% endset %} 31 | 32 | {{ post.data.title }} 33 | 34 | {{ post.date | dateToRfc3339 }} 35 | {{ absolutePostUrl }} 36 | {{ post.templateContent | htmlToAbsoluteUrls(absolutePostUrl) }} 37 | 38 | {%- endfor %} 39 | -------------------------------------------------------------------------------- /src/scripts/copy.js: -------------------------------------------------------------------------------- 1 | // Adapted from https://codepen.io/wilbo/pen/xRVLOj by Wilbert Schepenaar. 2 | // @ts-check 3 | import ClipboardJS from "clipboard" 4 | 5 | const handleCodeCopying = () => { 6 | const preTags = document.querySelectorAll("pre") 7 | const isPrismClass = (preTag) => 8 | preTag.className.substring(0, 8) === "language" 9 | const copy = `
` 10 | if (preTags !== null) { 11 | for (let i = 0; i < preTags.length; i++) { 12 | if (!isPrismClass(preTags[i])) continue 13 | preTags[ 14 | i 15 | ].innerHTML = `${copy} ${preTags[i].innerHTML}` 16 | } 17 | } 18 | 19 | if (navigator.clipboard) { 20 | preTags.forEach((tag) => { 21 | tag.addEventListener("click", () => { 22 | navigator.clipboard.writeText(tag.innerText).then(() => { 23 | tag.children.namedItem("code").textContent = "copied" 24 | setTimeout(() => { 25 | tag.children.namedItem( 26 | "code" 27 | ).innerHTML = `` 28 | }, 2000) 29 | }) 30 | }) 31 | }) 32 | } else { 33 | const clipboard = new ClipboardJS(".copy", { 34 | target: (trigger) => trigger.nextElementSibling, 35 | }) 36 | clipboard.on("success", (event) => { 37 | console.log(event) 38 | event.trigger.textContent = "copied!" 39 | setTimeout(() => { 40 | event.clearSelection() 41 | event.trigger.innerHTML = `` 42 | }, 2000) 43 | }) 44 | } 45 | } 46 | 47 | const handleShareButton = () => { 48 | if (navigator.clipboard) { 49 | const shareButtons = document.querySelectorAll(".share") 50 | shareButtons.forEach((btn) => { 51 | btn.addEventListener("click", () => { 52 | navigator.share({ 53 | url: location.href 54 | }); 55 | // navigator.clipboard.writeText(location.href).then(() => { 56 | // btn.textContent = "copied" 57 | // setTimeout(() => { 58 | // btn.textContent = "share" 59 | // }, 2000) 60 | // }) 61 | }) 62 | }) 63 | } else { 64 | const clipboard = new ClipboardJS(".share", { 65 | target: (trigger) => trigger, 66 | text: () => location.href, 67 | }) 68 | clipboard.on("success", (event) => { 69 | event.trigger.textContent = "copied!" 70 | setTimeout(() => { 71 | event.clearSelection() 72 | event.trigger.textContent = "share" 73 | }, 2000) 74 | }) 75 | } 76 | } 77 | 78 | export { handleCodeCopying, handleShareButton } 79 | -------------------------------------------------------------------------------- /src/scripts/main.js: -------------------------------------------------------------------------------- 1 | import "../assets/css/tailwind.css" 2 | import { handleCodeCopying, handleShareButton } from "./copy.js" 3 | 4 | if (DEV_MODE) console.log("Dev mode is currently enabled.") 5 | 6 | handleCodeCopying() 7 | handleShareButton() 8 | -------------------------------------------------------------------------------- /src/tags.njk: -------------------------------------------------------------------------------- 1 | --- 2 | pagination: 3 | data: collections 4 | size: 1 5 | alias: tag 6 | filter: 7 | - all 8 | - nav 9 | - post 10 | addAllPagesToCollections: true 11 | layout: home.njk 12 | eleventyComputed: 13 | title: Category {{ tag }} 14 | permalink: /tags/{{ tag | slug }}/ 15 | --- 16 |

Search Results

17 | 18 | {% set posts = collections[ tag ] %} 19 | {% include "taglist.njk" %} 20 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | darkMode: "media", 3 | purge: { 4 | content: [ 5 | "./src/**/*.njk", 6 | "./src/**/*.js", 7 | "./src/**/*.svg", 8 | "./src/**/*.md", 9 | ], 10 | }, 11 | plugins: [require("@tailwindcss/forms")], 12 | theme: { 13 | extend: { 14 | fontFamily: { 15 | hind: '"Hind", sans-serif;', 16 | }, 17 | colors: { 18 | "primary-font": "var(--primary-font-color)", 19 | "secondary-font": "var(--secondary-font-color)", 20 | primary: "var(--primary-background-color)", 21 | secondary: "var(--secondary-background-color)", 22 | "mobile-link": "var(--mobile-link-color)", 23 | link: "var(--link-color)", 24 | }, 25 | minHeight: { 26 | 12: "3rem", 27 | 64: "16rem", 28 | }, 29 | }, 30 | }, 31 | } 32 | --------------------------------------------------------------------------------