LLM Prompts

Transform Website into PWA

Generates code for transforming an existing website into a PWA.

The method

Use in ChatGPT/Gemini/Claude by pasting the prompt. Specify the target website and desired PWA features. This will help generate code snippets, manifest files, and service worker scripts necessary to convert a regular website into a PWA.

The prompts

Prompt 1
I want to convert my website, located at [website URL], into a Progressive Web App (PWA). The website is a simple blog built using HTML, CSS, and JavaScript. I want the PWA to have the following features: 1) Be installable on mobile devices. 2) Work offline, displaying cached content when there is no internet connection. 3) Support push notifications for new blog posts. 4) Have a custom splash screen and icon. Please provide me with the following: A) The manifest.json file content required for installability. B) A basic service worker script that caches the website's static assets (HTML, CSS, JavaScript, images). C) Instructions on how to register the service worker in my main JavaScript file. D) Instructions on how to implement basic push notification functionality (using a push notification service or library like Firebase). Please provide detailed explanations for each code snippet.
Prompt 2
I have a web application built with React and hosted at [website URL]. I want to convert this into a PWA to improve user engagement and offline accessibility. The app uses the following technologies: React, Redux, and a REST API. I would like my PWA to have the following features: Installable on desktop and mobile. Offline access to recently viewed data. Background synchronization for form submissions. Push notifications for important updates. Can you provide: A) A manifest.json file suitable for a React PWA. B) A service worker implementation using Workbox to precache static assets and handle runtime caching of API responses. C) Instructions on integrating the service worker with my React application. D) Guidance on implementing background synchronization for form submissions that occur while offline, ensuring data is sent once the connection is restored. E) Sample code for requesting push notification permissions and handling incoming notifications.