LIVE DEMO (Google login only)
Looking to build a new Progressive Web App and not sure where to get started?
This is what you are looking for! The PWA-SPA-LOGIN-MAINSCREEN-MENU-Starter-Kit with Cesium integration includes everything you need to start building a production ready PWA with location-based services and follows all best practices.
If you already have an app/website check out pwabuilder.com They provide all tools to get your existing repo on the PWA track. Don't forget to check out their blog. These guys from Microsoft and Google definitely know what they are doing, staying always on the most modern, future proof stack.
Progressive Web Apps - PWA Roadshow: https://youtu.be/z2JgN6Ae-Bo
The power of a decentralized Google Maps Platform for your next cross-plattform app/website/business
While working on the classic Starter Kit for the developer and entrepreneur community (Jamstack, code on Github, react front-end on CDN, API vserver as back-end), I’m developing a DAPP-PWA-SPA-LOGIN-MAINSCREEN-MENU-Starter-Kit to your command.
A dapp is a decentralized app, where the back-end will run client-side, split Peer-to-Peer on your app's users devices and partly on the Ethereum blockchain, but i am actually having an eye on Solana.
My own dapp Cloud.Atlas (under development), basing on the PWA-SPA-LOGIN-MAINSCREEN-MENU-Starter-Kit, will give access to a decentralized global tile server, for free access to map tiles for your location based apps and a Virtual Online Encyclopedia of a very special kind ;) splitted on the app's users devices and the blockchain.
The classic version (this repository) runs for 10$ a month on 200 fast CDN servers worldwide, with estimated 2 billion API requests included. (more under DEPLOYMENT AND PACKAGING) ...and you will need a tile-server or tile API provider on the long term (the actual API key is for evaluation)
The coming P2P version will run faster, more reliable, more democratic (Proof of Humanity) more privacy/data-security guaranteed by concept (even You can't see your users data, like in classic), will handle traffic peaks (like in classic), scales itself, has no bandwidth limitation, and is free...
World Peace Engine Labs's existing and upcoming companies, apps, publishings, products, projects, and code, are always licensed by the World Peace Engine Labs License, to provide the maximum freedom of usage, but restricted to non-profit purposes only.
The World Peace Engine Labs license consists of two well-known licenses. The MIT license is altered, restricted to non-profit purposes only. https://github.com/worldpeaceenginelabs/PWA-SPA-LOGIN-MAINSCREEN-MENU-Starter-Kit/blob/main/LICENSE.txt
- Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0)
- MIT License (altered to non-profit version)
THIS IS PART OF #DECENTRALIZED-NON-PROFIT-AS-A-SERVICE
We are building a PWA Starter Kit for the Jamstack, restricted to non-profit purposes only. But at the same time, we are buidling our own app Cloud.Atlas on the same codebase, where you are able to do the following amongst many other things:
- Transform your profit-based business ideas (like the one that you maybe came with to this repository) into a decentralized, sustainable non-profit business, reaching a worldwide audience in only 1.8 secs each user, for only 10$ a month each project.(estimated 2 billion API requests montly, est. 1 billion more for 10$, more details look up #Deployment) (coming soon)
- Brainstorm how to transform your business idea into a decentralized, sustainable non-profit business with individuals and non-profit, for-profit, and institutional representatives who share your interest… (coming soon)
- Get crowdfundings and donations for your decentralized, sustainable non-profit business ideas and running projects (coming later)
- Let your sustainable non-profit business crash through the ceiling with connecting your PWA to the Cloud.Atlas and other PWAs, decentralized with IPFS InterPlanetary File Sytem (under development)...
A dapp has its backend code running on a decentralized peer-to-peer network. Contrast this with an app where the backend code is running on centralized servers.
A dapp can have frontend code and user interfaces written in any language (just like an app) that can make calls to its backend. Furthermore, its frontend can be hosted on decentralized storage such as IPFS.
- Decentralized means they are independent, and no one can control them as a group.
- Deterministic i.e., they perform the same function irrespective of the environment they are executed.
- Turing complete, which means given the required resources, the dapp can perform any action.
- Isolated, which means they are executed in a virtual environment known as Ethereum Virtual Machine so that if the smart contract happens to have a bug, it won’t hamper the normal functioning of the blockchain network.
(now React and Material UI - dropping the original lit and FAST libraries)
PWA Builder is an awesome project, a collaboration of a handful Microsoft and Google developers, providing a great entree for building a PWA.
You can check anytime how many PWA points your actual app/page has on (https://www.pwabuilder.com/)
- Twitter PWA 190 point
- Google Maps PWA has now 180 points
- PWA-SPA-LOGIN-MAINSCREEN-MENU-Starter-Kit (this repository) 130 points (pwabuilder shows you how to improve this score)
...so this is a good repository to start with.
PWABuilder.com is an awesome page providing all resources, for drag and drop & copy and paste a manifest or service worker scripts and many well explained snippets for additional native app like features.
- A 100 on Lighthouse, giving you a great starting point for performance and accessibility.
- Includes the PWABuilder pwa-install component for an app store like PWA install experience.
- Workbox for service workers along with the PWABuilder pwa-update component to give your PWA a great offline experience.
- Includes PWABuilder pwa-auth web component. This component lets your users sign-in/sign-up using their Google, Apple, or Facebook account. Your app receives their email address, name, and profile picture. (replaced with a not web component solution)
- Includes a blank mainscreen with a map and a blank menu with an open/close animation.
- Includes a Cesium globe for location based services.
Everything's ready to your demand...
- Edge
- Chrome
- Firefox
- Safari
You will need the following things properly installed on your computer.
You should also be familiar with TypeScript which we use for this project. This helps give you more guidance as you code from intellisense when using VSCode.
We recommend the following tools for your dev setup:
- Editor: VSCode
- Terminal: Windows Terminal or hyper
Run npm install and then run npm run dev, the starter should open in your default browser. From here you can start developing, your changes will be rebuilt and reloaded in the browser as you develop.
Run npm run build, the dist/ folder will contain your built PWA. The production build will also generate a pre-caching service worker using Workbox.
Once your PWA is ready to deploy you can deploy/host it anywhere.
We recommend Cloudflare.com (0€ Basic plan, unlimited pages, unlimited bandwidth and 500 deploys a month)
Your static, but from the API fed dynamic app, will be deployed to 200 servers worldwide, loading your app in an average of 1.8 sec in every corner around the globe. From Metropole to jungle village...
Your API is pretty much the only bottleneck! But that's awesome, since we've eliminated every other administrational burden, with just dropping our app to Cloudflare.
Cloudflare is able to catch spikes in traffic with ease. Without Cloudflare, you would have to pay server traffic every time a user visits your app/page or downloads or updates the app.
If the free tier of most as-a-service/api providers is used up, many developers regret some of their decisions due to the complexity of the huge amount of connected environments that developers in the pre-Jamstack time were facing.
Now it's reduced to only a front-end in the framework/language you prefer, and an API back-end that is also replaceable.
We recommend Digitalocean's STRAPI Basic Droplet: 2 CPU, 2 GB RAM, 2 Terabyte traffic included (est. 2 billion API requests) for 10$ a month. Another Terabyte comes for another cheap 10$. (est. 1 billion API requests)
If you need more power, there is a Linux VServer with insane 10 CPU, 48 GB RAM, 800 GB SSD, unlimited traffic for 20€ a month at Strato
From there, if you are growing bigger and bigger, your one and only task is "only" scaling your API server.
That's it. API scaling will become an issue when your business is so big that you actually have the funds to solve the problem. All the other stuff, thats usually connected with running an app or even a platform, is done.
You can focus on design and code and nothing else. (...and API server scaling...)
Cheers.
Same concept, but scales itself... Under Development...
Many app stores, including the Microsoft Store and the Google Play Store support PWAs. To package your PWA for deployment to these app stores head back to https://pwabuilder.com/, put in your URL and hit Build My PWA.
The default layout of this starter is dual screen friendly. We do this here by using the CSS Spanning API to adjust the layout when the app is spanned on a dual screen device. As you start to build your PWA you can use these CSS features to ensure that your PWA looks good in all of the dual screen postures. For more info on developing PWAs for dual screen devices you can check out the Microsoft docs here.
pwa-starter
│ README.md (docs)
│ rollup.config.js (bundler config https://rollupjs.org/)
| tsconfig.json (TypeScript config https://www.typescriptlang.org/)
| pwabuilder-sw.js (Service Worker https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
| package.json (https://docs.npmjs.com/creating-a-package-json-file)
| package-lock.json (https://docs.npmjs.com/files/package-lock.json)
| manifest.json (web manifest https://developer.mozilla.org/en-US/docs/Web/Manifest)
| index.prod.html (index.html file used for production builds)
| index.html (index.html for dev builds)
| *note*: The index.prod.html registers a service worker which caches assets, so index.html is used for dev builds
| .gitignore (git config file https://git-scm.com/docs/gitignore)
│
└───src (most of your development will happen here)
│ │ global.css (used for global CSS styles and CSS variables)
│ │
| └─────components
| | MainScreen.jsx (component)
| | Menu.jsx (component)
| |
| |
| └───pages
| | app.jsx (app component)
| | index.css (Stylesheets)
| | index.jsx (index component)