clojure pwa example
generated using Luminus version "3.54"
PWA is implemented with Page-renderer.
Prerequisites
You will need Leiningen 2.0 or above installed.
How to implement it from scratch
Create a project
lein new luminus pwa +cljs +reagent
Swap resources/public/favicon.ico with fovicon.png and add a manifest.json file. Be sure you add icons specified in the resources/public/img/icons folder.
Provide Page-renderer in project.clj dependencies:
(defproject pwa "0.1.0-SNAPSHOT"
...
:dependencies [[page-renderer "0.4.4"]... ]... }}) This Page-renderer library will do all the dirty work with the service-worker creation.
Now we can provide a service worker in our routes. Open src/clj/pwa/routes/home.clj and add:
(ns pwa.routes.home
(:require
...
[page-renderer.api :as pr]))
(defn service-worker [request]
(pr/respond-service-worker
{:script "/js/app.js"
:sw-default-url "/app"
:sw-add-assets
["/css/screen.css"
"/img/warning_clojure.png"
"/img/icons/icon-72x72.png"
"/img/icons/icon-96x96.png"
"/img/icons/icon-128x128.png"
"/img/icons/icon-144x144.png"
"/img/icons/icon-152x152.png"
"/img/icons/icon-192x192.png"
"/img/icons/icon-384x384.png"
"/img/icons/icon-512x512.png"]}))
(defn home-routes []
[""
{:middleware [middleware/wrap-csrf
middleware/wrap-formats]}
["/" {:get home-page}]
["/app" {:get home-page}page]
["/service-worker.js" {:get service-worker}]])Refer specified manifest, favicon, and a screen.css in the head of resources/html/home.html
<link rel="stylesheet" type="text/css" href="screen.css" media="all">
<link rel="manifest" href="/manifest.json">
<link rel="icon" type="image/png" href="/favicon.png"/>Register you service worker in the body of resources/html/home.html:
<script>
if('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(function() {
console.log('Service Worker Registered');
});
}
</script>Make sure you src/cljs/pwa/core.cljs looks like this, and you are ready to go.
Running
To start a web server for the application, run:
lein run
lein figwheel
License
Copyright 2019 Artur Dumchev
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent