Posts

Showing posts with the label PWA

Adding screenshots shown when installing PWA

Image
 I have been adding screenshots to the manifests of my webpages that are Progressive Web Apps (PWA). Chrome suggests doing this in the 'Application' panel of the 'developer tools'. However Chrome only shows these screenshots as small 'thumbnail' images when you go to install the PWA. It seems each set of screenshots shown needs to have the same 'aspect ratio'.

Cannot install a Progressive Web App with Firefox

Image
 I cannot install a Progressive Web App (PWA) with Firefox on Windows. It seems Firefox on the desktop removed support for installing PWA's. Maybe this feature was broken and Mozilla did not want to spend time on it. There is an unofficial 'extension' to Firefox that lets you Firefox with a PWA. In February 2024, Apple said it would not support PWA in the Ruropean Union. Apple changed its mind perhaps after developers complained. Maybe this was part of a dispute between Apple and the European regulators.  There are more tips at:  bbingo.xyz/techtips/

Giving PWA icons transparent backgrounds

Image
 I changed some of my icons to have transparent backgrounds. These were the icons mentioned in the 'manifest' files of my Progressive Web Apps (PWA). I had given the icons white backgrounds to make them clearer as recommended by the PWA tutorial on Google's 'web.dev'. But these looked strange next to other icons on a Windows desktop. I made all my web pages PWA's by adding a 'manifest' file and starting a 'do-nothing' service worker. Chrome warns that loading these service workers slows things down. There are more tips at: bbingo.xyz/techtips/

Getting started with Progress Web Apps

 Creating a simple minimal Progressive Web App (PWA) helped me get started with this sometimes complex topic. Chrome also helps by showing lots of information about your PWA and letting you test the 'service workers'. I learnt a lot from the course on PWA's on 'web.dev' but the course was a  bit overwhelming. After all, PWA's are quite ambitious. You add hints to a web page, borrow a little code, and magically the page turns into something that runs by itself on a mobile phone like a native app. Now I don't need to learn two new languages to get my game to run nicely on Android phones and iPhones and iPads. However, I had to upgrade my website to use SSL for PWA's to work. I have now changed all my webpages so that they can run as PWA's. There are more tips at:  bbingo.xyz/t

Have many PWA's on one website with 'scope'

 I use the 'scope' property in my 'manifest' so I can have many 'Progressive Web Apps' from one website. It seems the 'start_url' needs to end in a slash. Luckily, my pages are called 'index.html' and are in their own subdirectory. Here is an example:     "scope": "/techtips/",     "start_url": "/techtips/", My 'manifest' is in the top directory of my website. I got the idea from a post on 'stackoverflow':     stackoverflow.com/questions/50548573/are-pwa-sites-in-same-domain-not-able-to-install-both-on-home-screen There are more tips at:  bbingo.xyz/t