Embedded Files
PICK YOUR DOMAIN NAME:
PICK YOUR DOMAIN NAME:
If you don't already have one, you will need to obtain a domain name for your PWA.
You can buy a domain name from a registrar. For instance:
https://www.domain.com/ (this is what was used for this trial)
THE CHECK LIST:
THE CHECK LIST:
GoodBarber allows you to create a Progressive Web App (PWA). Their DIY tool is made for people who don't know how to code, but who nevertheless want to create a beautiful PWA.
After creating your Good Barber account you are directed to the "My App" block - this clearly shows the steps that need to be completed to access the Publication blocks and publish the app.
THE BASICS OF GETTING STARTED:
THE BASICS OF GETTING STARTED:
The Global Style menu manages your app's overall design from one single menu.
Colors, fonts, and effects chosen in this menu are applied to every section of your app.
The header (logo and title) is the upper part of the app that is always visible and accessible on all sections.
The icon is a key visual element of your app. Web browsers use it as a favicon, it's displayed in push notifications to identify the sender, and it's displayed on the phone's home screen.
The background parts of the app are fixed regardless of the page displayed and include the background color, separators, buttons, effects and margins of your application.
Your home page is the first page displayed on your app after the launching screen.
On this page, you can automatically highlight content from other pages, add call-to-actions, or insert useful links.
By default, your application has a global style applied to all your app's pages. Use this feature to modify colors, fonts, backgrounds, formats, etc... of each element of your PWA
CUSTOMIZE YOUR PWA:
CUSTOMIZE YOUR PWA:
The options displayed in the Settings of a section will depend on the section's type and the content source.
TESTING YOUR PWA:
TESTING YOUR PWA:
Lighthouse Testing
Lighthouse Testing
This is an open source tool from Google to test the functionality of a website across several domains, search engine optimization, performance (loading speed), accessibility and best practices. Best of all, it's totally free! Once you publish your PWA to a domain, you can paste your URL here and it will create the report for you automatically: https://web.dev/measure
PUBLISHING YOUR PWA:
PUBLISHING YOUR PWA:
You're almost done! Don't let this step overwhelm you.
Good Barber has detailed directions for each of the above mentioned Domain Registrar sites and if you obtained your domain from a different registrar it is usually pretty easy to reach them via their email or online chat if you have any questions. In fact, for this test we used Domain.com and they were able to do everything that was needed over their online chat feature.
Shhhh - don't tell anyone, but we didn't know what a lot of the directions were talking about and our PWA turned out great.
Pro Tip: When in doubt, email Customer Support, that's what they are there for - this can save you a lot of time and headaches!
Page updated
Report abuse