https://github.com/sigmasd/pwait
Script to kick start pwa app
https://github.com/sigmasd/pwait
deno pwa
Last synced: about 1 month ago
JSON representation
Script to kick start pwa app
- Host: GitHub
- URL: https://github.com/sigmasd/pwait
- Owner: sigmaSd
- License: mit
- Created: 2022-10-08T13:21:02.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-05-19T09:58:56.000Z (about 2 years ago)
- Last Synced: 2025-01-24T19:45:07.483Z (over 1 year ago)
- Topics: deno, pwa
- Language: TypeScript
- Homepage:
- Size: 54.7 KB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: license
Awesome Lists containing this project
README
# PwaIt
Script to kick start pwa app
## Usage
Run on the root of your project
```
deno run -r https://github.com/sigmaSd/PwaIt/raw/master/main.ts
```
This will create `sw.js` and `pwa` folder.
The rest depends on your project, see the next section for examples.
## Examples
**Simple web app:**
- Run the script inside the project root directory
- Create `index.html`
```html
hello
```
- Start a server for example
`deno run -A https://deno.land/std/http/file_server.ts -p 8000`
- Open `localhost:8000`
**deno fresh project:**
- Run the script inside the project root directory
- The `./static` folder is special in fresh, as in all of its contents is dumped
to the root of the web page, so move the created assets to it, for example:
`mv pwa sw.js ./static` (make sure `./static` exists)
- Add the needed manifest link + script in one of your entry routes for example
`routs/index.tsx` or `routes/_app.tsx`
```jsx
import { Head } from "$fresh/runtime.ts";
export default function Home() {
return (
Ok!
);
}
```
- Run `deno task start`
- open `localhost:8000`
**Svelte**
- Move the created pwa and sw.js to `public` folder
- Copy the relevent lines from `index.html` from the `Simple web app` to svelte
index.html
## Offline usage
The app will cache all requests by default whenever there is network so it can
work offline. This behaviour is defined in `sw.js`. When a network connection is
available it will automaticly override the cache with the newer remote resources.
## Tips
- For developping, use chromium
- For installing the application on mobile use chrome, it has the most advanced
implementation
- Open `localhost:8000` not `0.0.0.0:8000` pwa are sensitive to insecure pages
- If you hack on `sw.js` sometimes bug happens and you have to manually unregister the service
worker. To do that go to the site, open the console and unregister the service
worker in the Application tab, in android chrome go to settings, and click on
clear site date
- Firefox doesn't prompt for installing PWAs like chrome, instead it shows on the right menu "Add app to Home screen" instead of the "Add to home screen" for non pwa sites.
## Why
To have a nice loading screen on mobile, also support for
[share-target](https://web.dev/web-share-target/) and other pwa APIs.
https://github.com/sigmaSd/ytdlf
## More examples
- https://github.com/sigmaSd/datediff https://datediff.deno.dev/
- https://github.com/sigmaSd/magic-cam https://magic-cam.deno.dev/
## More Info about PWA
- https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps
- https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Tutorials/js13kGames/Offline_Service_workers
- https://whatpwacando.today/